<template>
  <div class="course-outline-target">
    <div class="part-box part-box-pad">
      <div class="box-justify mb-2">
        <div></div>
        <div>
          <el-button type="primary" @click="toAdd">新增课程目标</el-button>
          <el-button type="success" @click="toPredict">预期值</el-button>
        </div>
      </div>
      <el-table ref="TableList" :data="dataList">
        <el-table-column
          type="index"
          label="序号"
          width="70"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column prop="targetName" label="课程目标" min-width="120">
        </el-table-column>
        <el-table-column prop="expectValue" label="预期值" width="120">
        </el-table-column>
        <el-table-column prop="degreeRequirement" label="内容" min-width="300">
        </el-table-column>
        <el-table-column
          prop="obeCultureProgramRequirementName"
          label="指标点"
          width="140"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.obeCultureProgramRequirementName }}</span>
            <el-tooltip
              v-if="scope.row.obeCultureProgramRequirementContent"
              effect="dark"
              placement="top"
            >
              <div slot="content" class="tooltip-area">
                {{ scope.row.obeCultureProgramRequirementContent }}
              </div>
              <i class="el-icon-info ml-1 tooltip-info-icon"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          class-name="action-column"
          label="操作"
          width="120"
          fixed="right"
        >
          <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 class="mt-2">
        <span>未被选择的指标点：</span>
        <span>{{ unuseRequirements.join("，") || "无" }}</span>
        <!-- <el-tag
          v-for="(item, index) in unuseRequirements"
          :key="index"
          class="mr-1"
          type="danger"
          >{{ item }}</el-tag
        > -->
      </div>
    </div>

    <!-- ModifyCourseOutlineTarget -->
    <modify-course-outline-target
      ref="ModifyCourseOutlineTarget"
      :instance="curRow"
      :dimensions="dimensions"
      :requirement-list="requirementList"
      @modified="targetModified"
      @enforce-close="targetModified"
    ></modify-course-outline-target>
    <!-- ModifyCourseOutlineTargetPredict -->
    <modify-course-outline-target-predict
      ref="ModifyCourseOutlineTargetPredict"
      :rowData="rowData"
      @modified="getList"
    ></modify-course-outline-target-predict>
  </div>
</template>

<script>
import {
  courseOutlineTargetListPage,
  deleteCourseOutlineTarget,
  courseOutlineTargetRequirementList,
} from "../../api";
import ModifyCourseOutlineTarget from "./ModifyCourseOutlineTarget.vue";
import ModifyCourseOutlineTargetPredict from "./ModifyCourseOutlineTargetPredict.vue";

export default {
  name: "course-outline-target",
  components: { ModifyCourseOutlineTarget, ModifyCourseOutlineTargetPredict },
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalForm: {
        description: "",
      },
      dataList: [],
      curRow: {},
      requirementList: [],
      unuseRequirements: [],
      dimensions: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      await this.getList();
      await this.getRequirementList();
      this.updateUnuseRequirements();
    },
    async getList() {
      const datas = {
        obeCourseOutlineId: this.rowData.id,
      };
      const data = await courseOutlineTargetListPage(datas);
      this.dataList = data || [];
      this.updateRequirementDimensions();
    },
    updateRequirementDimensions() {
      const data = {};
      this.dataList.forEach((item) => {
        const k = item.obeCultureProgramRequirementId;
        if (data[k]) return;
        data[k] = item.dimensionList.map((elem) => elem.id);
      });
      this.dimensions = Object.keys(data).map((k) => {
        return {
          requirementId: k,
          dimensionIds: data[k],
        };
      });
    },
    updateUnuseRequirements() {
      const usedRids = this.dataList.map(
        (item) => item.obeCultureProgramRequirementId
      );
      const unusedData = [];
      this.requirementList.forEach((item) => {
        item.children.forEach((elem) => {
          if (usedRids.includes(elem.id)) return;
          unusedData.push(elem.name);
        });
      });
      this.unuseRequirements = unusedData;
    },
    async getRequirementList() {
      const data = await courseOutlineTargetRequirementList({
        cultureProgramId: this.rowData.cultureProgramId,
        courseId: this.rowData.courseId,
      });
      this.requirementList = (data || []).map((item) => {
        item.children = item.subRequirements.map((elem) => {
          const nelem = { ...elem, disabled: false };
          nelem.parentName = item.name;
          return nelem;
        });
        item.subRequirements = null;
        return item;
      });
    },
    updateRequirementList(obeCultureProgramRequirementId) {
      const usedIds = this.dataList
        .filter(
          (item) =>
            item.obeCultureProgramRequirementId !==
            obeCultureProgramRequirementId
        )
        .map((item) => item.obeCultureProgramRequirementId);

      this.requirementList.forEach((item) => {
        item.children.forEach((elem) => {
          elem.disabled = usedIds.includes(elem.id);
        });
      });
    },
    toAdd() {
      this.curRow = {
        obeCourseOutlineId: this.rowData.id,
        cultureProgramId: this.rowData.cultureProgramId,
        courseId: this.rowData.courseId,
      };
      this.updateRequirementList();
      this.$refs.ModifyCourseOutlineTarget.open();
    },
    toPredict() {
      this.$refs.ModifyCourseOutlineTargetPredict.open();
    },
    toEdit(row) {
      this.curRow = {
        ...row,
        obeCourseOutlineId: this.rowData.id,
        cultureProgramId: this.rowData.cultureProgramId,
        courseId: this.rowData.courseId,
      };
      this.updateRequirementList(row.obeCultureProgramRequirementId);
      this.$refs.ModifyCourseOutlineTarget.open();
    },
    async targetModified() {
      await this.getList();
      this.updateUnuseRequirements();
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `修改课程目标会影响权重设置，确定要删除课程目标【${row.targetName}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await deleteCourseOutlineTarget(row.id);
      this.$message.success("删除成功！");
      this.targetModified();
    },
  },
};
</script>
