<template>
  <div class="course-simple-detail">
    <el-dialog
      class="page-dialog"
      :visible.sync="modalIsShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
    >
      <div slot="title">
        课程管理<span class="color-gray ml-2"
          >{{ course.courseName }}（{{ course.courseCode }}）</span
        >
      </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" :course="course"></component>
      </div>

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

<script>
// import ClazzSimpleManage from "./ClazzSimpleManage.vue";
// import TeacherSimpleManage from "./TeacherSimpleManage.vue";
import CourseTargetManage from "./CourseTargetManage.vue";
import CourseEvaluationManage from "./CourseEvaluationManage.vue";
import CourseWeightManage from "./CourseWeightManage.vue";
import { mapActions } from "vuex";

export default {
  name: "course-simple-detail",
  components: {
    // ClazzSimpleManage,
    // TeacherSimpleManage,
    CourseTargetManage,
    CourseEvaluationManage,
    CourseWeightManage,
  },
  props: {
    course: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      curTab: "CourseTargetManage",
      tabs: [
        // {
        //   name: "教学班",
        //   val: "ClazzSimpleManage",
        // },
        // {
        //   name: "教师团队管理",
        //   val: "TeacherSimpleManage",
        // },
        {
          name: "课程目标管理",
          val: "CourseTargetManage",
        },
        {
          name: "评价方式管理",
          val: "CourseEvaluationManage",
        },
        {
          name: "权重设置",
          val: "CourseWeightManage",
        },
      ],
    };
  },
  methods: {
    ...mapActions("base", ["updateCwStatus"]),
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    selectMenu(tab) {
      this.curTab = tab;

      const statusTabs = ["CourseTargetManage", "CourseEvaluationManage"];
      if (statusTabs.includes(tab)) {
        this.updateCwStatus({
          teachCourseId: this.course.id,
        });
      }
    },
  },
};
</script>
