<template>
  <div class="course-evaluation-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="evaluation"
          label="评价方式"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="evaluationDesc"
          label="评价方式描述"
          min-width="300"
        >
        </el-table-column>
        <el-table-column class-name="action-column" label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.type === 'CUSTOM'"
              class="btn-primary"
              type="text"
              @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.type === 'CUSTOM'"
              class="btn-danger"
              type="text"
              @click="toDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ModifyCourseExamineEvaluation -->
    <modify-course-examine-evaluation
      ref="ModifyCourseExamineEvaluation"
      :instance="curRow"
      @modified="getList"
    ></modify-course-examine-evaluation>
  </div>
</template>

<script>
import {
  courseExamineEvaluationListPage,
  deleteCourseExamineEvaluation,
} from "../../api";
import ModifyCourseExamineEvaluation from "./ModifyCourseExamineEvaluation.vue";

export default {
  name: "course-examine-evaluation",
  components: { ModifyCourseExamineEvaluation },
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      dataList: [],
      curRow: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await courseExamineEvaluationListPage({
        obeCourseOutlineId: this.rowData.id,
      });
      this.dataList = res || [];
    },
    toAdd() {
      this.curRow = {
        obeCourseOutlineId: this.rowData.id,
      };
      this.$refs.ModifyCourseExamineEvaluation.open();
    },
    toEdit(row) {
      this.curRow = {
        obeCourseOutlineId: this.rowData.id,
        ...row,
      };
      this.$refs.ModifyCourseExamineEvaluation.open();
    },
    async toDelete(row) {
      const confirm = await this.$confirm(
        `删除评价方式会影响权重设置，确定要删除评价方式【${row.evaluation}】吗?`,
        "提示",
        {
          type: "warning",
        }
      ).catch(() => {});
      if (confirm !== "confirm") return;

      const res = await deleteCourseExamineEvaluation(row.evaluationId);
      if (res.warning) {
        this.$notify({
          title: "警告",
          message: "评价方式有变化，请重新设置权重设置！",
          type: "warning",
          duration: 5000,
        });
      }
      this.$message.success("删除成功！");
      this.getList();
    },
  },
};
</script>
