<template>
  <div class="info-sample-container">
    <div class="info-sample-title">{{ title }}</div>
    <div class="info-sample-seperator"></div>
    <div class="info-sample-list" v-if="dataList.length">
      <template v-for="(item, idx) in dataList">
        <info-card
          :key="item.id"
          :name="item.title"
          @click.native="detail(item)"
        />
        <mx-seperator
          class="info-sample-item-seperator"
          :key="idx"
          v-if="idx < dataList.length - 1"
        />
      </template>
    </div>
  </div>
</template>
<script>
import infoCard from "./infoCard.vue";
import * as career from "@/api/webApi/career-news";

export default {
  components: { infoCard },
  props: {
    type: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tag: "hot",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    detail(item) {
      this.$emit("click", item);
    },
    getList() {
      if (!this.type) return;
      career.list({ ...this.queryParams, type: this.type }).then((res) => {
        console.log("career news list res", res);
        if (res.code == 200 || res.code == 0) {
          this.dataList = res.rows;
          this.total = res.total;
        } else {
          this.msgError(res.msg || "career news list 请求异常");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.info-sample-container {
  display: flex;
  flex-direction: column;
}
.info-sample-title {
  font-size: 14px;
  font-weight: 600;
  color: #414141;
}
.info-sample-seperator {
  width: 21px;
  height: 2px;
  background-color: #414141;
}
.info-sample-item-seperator {
  margin: 5px -5px;
}
</style>