<template>
  <div class="training-plan-target">
    <div class="part-box part-box-pad">
      <el-form>
        <el-form-item label="总体描述：">
          <el-input
            v-model="modalForm.description"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            resize="none"
            placeholder="请输入总体描述"
            clearable
            maxlength="999"
            show-word-limit
            :disabled="!checkPrivilege('link', 'canEditRequirement')"
            @blur="descriptionChange"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>

    <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="toAdd"
          >新增</el-button
        >
      </div>
      <el-table ref="TableList" :data="dataList">
        <el-table-column
          type="index"
          label="序号"
          width="70"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column prop="name" label="培养目标名称" min-width="160">
        </el-table-column>
        <el-table-column prop="detail" label="目标分解详情" min-width="300">
        </el-table-column>
        <el-table-column
          v-if="checkPrivilege('link', 'canEditRequirement')"
          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>

    <!-- ModifyTrainingPlanTarget -->
    <modify-training-plan-target
      v-if="checkPrivilege('link', 'canEditRequirement')"
      ref="ModifyTrainingPlanTarget"
      :instance="curRow"
      @modified="getList"
    ></modify-training-plan-target>
  </div>
</template>

<script>
import {
  trainingPlanTargetListPage,
  deleteTrainingPlanTarget,
  updateTrainingPlanDescription,
} from "../../api";
import ModifyTrainingPlanTarget from "./ModifyTrainingPlanTarget.vue";

export default {
  name: "training-plan-target",
  components: { ModifyTrainingPlanTarget },
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalForm: {
        description: "",
      },
      dataList: [],
      curRow: {},
    };
  },
  mounted() {
    this.modalForm.description = this.rowData.description;
    this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        cultureProgramId: this.rowData.id,
      };
      const data = await trainingPlanTargetListPage(datas);
      this.dataList = data || [];
    },
    toAdd() {
      this.curRow = { cultureProgramId: this.rowData.id };
      this.$refs.ModifyTrainingPlanTarget.open();
    },
    toEdit(row) {
      this.curRow = row;
      this.$refs.ModifyTrainingPlanTarget.open();
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `确定要删除培养目标【${row.name}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      await deleteTrainingPlanTarget(row.id);
      this.$message.success("删除成功！");
      this.deletePageLastItem();
    },
    async descriptionChange() {
      if (!this.checkPrivilege("link", "canEditRequirement")) return;

      await updateTrainingPlanDescription({
        id: this.rowData.id,
        description: this.modalForm.description,
      });
      this.$emit("update-detail");
    },
  },
};
</script>
