<template>
  <div class="info-container">
    <el-container>
      <el-main>
        <div class="info-tabs">
          <el-radio-group v-model="type" @change="detailMode = false">
            <el-radio-button
              v-for="opt in typeOptions"
              :key="opt.value"
              :label="opt.label"
              >{{ opt.label }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <info-list
          class="mt10"
          :type="type"
          v-show="!detailMode"
          @click="detailList"
        ></info-list>
        <info-detail
          class="mt10"
          v-if="detailMode"
          :type="type"
          :title="detailTitle"
          :id="detailId"
          @close="detailClose"
        />
      </el-main>
      <el-aside width="400px" style="background-color: #ffffff">
        <el-card class="mt20" v-for="opt in typeOptions" :key="opt.value">
          <info-sample
            :type="opt.label"
            :title="opt.label"
            @click="detailSample"
        /></el-card>
      </el-aside>
    </el-container>
  </div>
</template>
<script>
import InfoDetail from "../components/infoDetail.vue";
import infoList from "../components/infoList.vue";
import InfoSample from "../components/infoSample.vue";
import * as career from "@/api/webApi/career-news";

export default {
  components: { infoList, InfoSample, InfoDetail },
  data() {
    return {
      detailMode: false,
      detailTitle: "",
      detailId: 0,
      type: "",
      typeOptions: [],
    };
  },
  watch: {
    $route: function () {
      this.getTypes();
    },
  },
  created() {
    this.getTypes();
  },
  methods: {
    detailList(item) {
      this.detailTitle = item.title;
      this.detailId = item.id;
      this.detailMode = true;
    },
    detailSample(item) {
      this.detailTitle = item.title;
      this.detailId = item.id;
      this.detailMode = true;
    },
    detailClose() {
      this.detailMode = false;
    },
    getTypes() {
      career.types().then((res) => {
        console.log("career news res", res);
        if (res.code == 200 || res.code == 0) {
          this.typeOptions = res.rows;
          let query = this.$route.query;
          console.log(query)
          if (query.hasOwnProperty("name")) {
            this.type = query.name;
            return;
          } else {
            this.type = this.typeOptions[0].label;
          }
        } else {
          this.msgError(res.msg || "career news types 请求异常");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>