<template>
  <el-dialog
    class="page-dialog"
    :visible.sync="modalIsShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
    @close="closeHandle"
  >
    <div slot="title">{{ rowData.name }}</div>
    <div class="mb-4 tab-btns">
      <el-button
        v-for="tab in tabs"
        :key="tab.val"
        size="medium"
        :type="curTab == tab.val ? 'primary' : 'default'"
        @click="selectMenu(tab.val)"
        >{{ tab.name }}
      </el-button>
    </div>

    <div v-if="modalIsShow">
      <component
        :is="curTab"
        :row-data="dataInfo"
        @update-detail="getDetail"
      ></component>
    </div>

    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { updateTrainingPlanDetail } from "../../api";
import TrainingPlanBase from "./TrainingPlanBase.vue";
import TrainingPlanTarget from "./TrainingPlanTarget.vue";
import TrainingPlanRequirement from "./TrainingPlanRequirement.vue";
import TrainingPlanMatrix from "./TrainingPlanMatrix.vue";
import TrainingPlanCourse from "./TrainingPlanCourse.vue";
import TrainingPlanCourseMatrix from "./TrainingPlanCourseMatrix.vue";

export default {
  name: "detail-training-plan",
  components: {
    TrainingPlanBase,
    TrainingPlanTarget,
    TrainingPlanRequirement,
    TrainingPlanMatrix,
    TrainingPlanCourse,
    TrainingPlanCourseMatrix,
  },
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      curTab: "TrainingPlanBase",
      tabs: [
        {
          name: "基本信息",
          val: "TrainingPlanBase",
        },
        {
          name: "培养目标",
          val: "TrainingPlanTarget",
        },
        {
          name: "毕业要求",
          val: "TrainingPlanRequirement",
        },
        {
          name: "培养目标与毕业要求关系矩阵",
          val: "TrainingPlanMatrix",
        },
        {
          name: "课程体系",
          val: "TrainingPlanCourse",
        },
        {
          name: "课程支撑毕业要求达成矩阵",
          val: "TrainingPlanCourseMatrix",
        },
      ],
      dataInfo: {},
    };
  },
  methods: {
    async getDetail() {
      const res = await updateTrainingPlanDetail(this.rowData.id);
      this.dataInfo = res || {};
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    selectMenu(tab) {
      this.curTab = tab;
    },
    closeHandle() {
      this.curTab = "TrainingPlanBase";
    },
  },
};
</script>
