<template>
  <div class="course-target-manage">
    <div class="part-box part-box-pad box-justify">
      <p>请根据《课程教学大纲》中的课程对“毕业要求”进行填写</p>
      <div>
        <el-button type="primary" @click="toAdd">新增目标</el-button>
      </div>
    </div>
    <div class="part-box part-box-pad">
      <el-table :data="dataList">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="targetName" label="课程目标"></el-table-column>
        <el-table-column prop="dimensionList" label="毕业要求指标">
          <template slot-scope="scope">
            <p v-for="item in scope.row.dimensionList" :key="item.id">
              {{ item.name }}（{{ item.code }}）
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="degreeRequirement"
          label="毕业要求"
        ></el-table-column>
        <el-table-column class-name="action-column" label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              class="btn-danger"
              type="text"
              @click="toDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ModifyCourseTarget -->
    <modify-course-target
      ref="ModifyCourseTarget"
      :instance="curRow"
      @modified="getList"
      @enforce-close="getList"
    ></modify-course-target>
  </div>
</template>

<script>
import { courseTargetList, deleteCourseTarget } from "../../api";
import ModifyCourseTarget from "./ModifyCourseTarget.vue";

export default {
  name: "CourseTargetManage",
  components: { ModifyCourseTarget },
  props: {
    course: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      curRow: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await courseTargetList({
        teachCourseId: this.course.id,
      });
      this.dataList = res || [];
    },
    toAdd() {
      this.curRow = {
        teachCourseId: this.course.id,
        disabledDimensionIds: this.getDisabledDimensionIds(),
      };
      this.$refs.ModifyCourseTarget.open();
    },
    getDisabledDimensionIds(excapeRowId = null) {
      const ids = [];
      const list = excapeRowId
        ? this.dataList.filter((item) => item.id !== excapeRowId)
        : this.dataList;
      list.forEach((item) => {
        ids.push(...item.dimensionList.map((d) => d.id));
      });
      return ids;
    },
    toEdit(row) {
      this.curRow = {
        ...row,
        teachCourseId: this.course.id,
        disabledDimensionIds: this.getDisabledDimensionIds(row.id),
      };
      this.$refs.ModifyCourseTarget.open();
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `修改课程目标会影响权重设置，确定要删除课程目标【${row.targetName}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      const res = await deleteCourseTarget(row.id);
      this.$message.success("删除成功！");
      if (res.warning) {
        this.$notify({
          title: "警告",
          message: "课程目标有变化，请重新设置权重设置！",
          type: "warning",
          duration: 5000,
        });
      }
      this.getList();
    },
  },
};
</script>
