<template>
  <div class="training-plan-requirement">
    <div class="part-box part-box-pad">
      <div
        v-if="checkPrivilege('link', 'canEditRequirement')"
        class="box-justify mb-2"
      >
        <div></div>
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="toEditPredict"
          >预期值</el-button
        >
      </div>
      <el-table
        ref="TableList"
        :data="dataList"
        row-key="id"
        default-expand-all
      >
        <el-table-column prop="label" label="毕业要求及指标点" width="200">
        </el-table-column>
        <el-table-column prop="content" label="内容" min-width="300">
        </el-table-column>
        <el-table-column
          v-if="checkPrivilege('link', 'canEditRequirement')"
          class-name="action-column"
          label="操作"
          width="180"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.children"
              class="btn-primary"
              type="text"
              @click="toAddNode(scope.row)"
              >新增指标点</el-button
            >
            <el-button
              v-else
              class="btn-danger"
              type="text"
              @click="toDeleteNode(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ModifyTrainingPlanRequirement -->
    <modify-training-plan-requirement
      v-if="checkPrivilege('link', 'canEditRequirement')"
      ref="ModifyTrainingPlanRequirement"
      :instance="curRow"
      @modified="getList"
    ></modify-training-plan-requirement>
    <!-- ModifyTrainingPlanRequirementPredict -->
    <modify-training-plan-requirement-predict
      v-if="checkPrivilege('link', 'canEditRequirement')"
      ref="ModifyTrainingPlanRequirementPredict"
      :row-data="rowData"
      @modified="predictChange"
    ></modify-training-plan-requirement-predict>
  </div>
</template>

<script>
import {
  trainingPlanRequirementListPage,
  deleteTrainingPlanRequirementNode,
  addTrainingPlanRequirementNode,
} from "../../api";

import ModifyTrainingPlanRequirement from "./ModifyTrainingPlanRequirement.vue";
import ModifyTrainingPlanRequirementPredict from "./ModifyTrainingPlanRequirementPredict.vue";

export default {
  name: "training-plan-requirement",
  components: {
    ModifyTrainingPlanRequirement,
    ModifyTrainingPlanRequirementPredict,
  },
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      curRow: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const data = await trainingPlanRequirementListPage({
        cultureProgramId: this.rowData.id,
      });
      this.dataList = (data || []).map((item) => {
        item.label = `${item.sortNum}.${item.name}`;
        item.children = item.subRequirementList.map((elem) => {
          const nelem = { ...elem };
          nelem.label = `指标点${item.sortNum}-${elem.sortNum}`;
          nelem.parentName = item.name;
          delete nelem.subRequirementList;
          return nelem;
        });
        return item;
      });
    },
    async toAddNode(row) {
      await addTrainingPlanRequirementNode({
        cultureProgramId: this.rowData.id,
        id: row.id,
      });
      await this.getList();
    },
    toEdit(row) {
      this.curRow = row;
      this.$refs.ModifyTrainingPlanRequirement.open();
    },
    toEditPredict() {
      this.$refs.ModifyTrainingPlanRequirementPredict.open();
    },
    predictChange() {
      this.$emit("update-detail");
    },
    async toDeleteNode(row) {
      if (row.parentId) {
        const parentRow = this.dataList.find(
          (item) => item.id === row.parentId
        );
        if (parentRow.children.length <= 1) {
          this.$message.error("当前毕业要求必须有一个指标点！");
          return;
        }
      }

      const confirm = await this.$confirm(
        `确定要删除 ${row.parentName} 【${row.label}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

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