<template>
  <div class="mark-param-class">
    <div class="part-box part-box-pad">
      <el-table :data="dataList" border>
        <el-table-column type="index" width="50"> </el-table-column>

        <el-table-column label="评卷员" width="200">
          <template slot-scope="scope">
            <el-tag size="medium">
              {{ scope.row.marker.name }}（{{ scope.row.marker.loginName }}）
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="groupQuestions" label="评卷题目">
        </el-table-column>
        <el-table-column prop="markerClassList" label="评卷班级">
          <template slot-scope="scope">
            {{ scope.row.markerClassList.join() }}
          </template>
        </el-table-column>
        <el-table-column class-name="action-column" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              class="btn-primary"
              type="text"
              @click="toSelectClass(scope.row)"
              >选择班级</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mark-footer">
      <el-button type="primary" :disabled="loading" @click="submit"
        >提交</el-button
      >
      <el-button @click="cancel">取消</el-button>
    </div>

    <!-- SelectClassByCourse -->
    <select-class-by-course
      ref="SelectClassByCourse"
      :selected-ids="selectedClassIds"
      :class-list="classList"
      required
      @confirm="classSelected"
    ></select-class-by-course>
  </div>
</template>

<script>
import { markClassMarkerList, markClassMarkerSave } from "../../api";
import { mapState } from "vuex";
import SelectClassByCourse from "./SelectClassByCourse.vue";

export default {
  name: "mark-param-class",
  components: { SelectClassByCourse },
  data() {
    return {
      dataList: [],
      curRow: {},
      classList: [],
      selectedClassIds: [],
      loading: false,
    };
  },
  computed: {
    ...mapState("markParam", ["basicInfo"]),
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      const params = {
        examId: this.basicInfo.examId,
        paperNumber: this.basicInfo.paperNumber,
      };
      const res = await markClassMarkerList(params);
      this.dataList = res.markerClass || [];
      this.classList = res.classNames || [];
    },
    toSelectClass(row) {
      this.curRow = row;
      this.selectedClassIds = row.markerClassList;
      this.$refs.SelectClassByCourse.open();
    },
    classSelected(markerClassList) {
      this.curRow.markerClassList = markerClassList;
    },
    async submit() {
      if (this.loading) return;

      const unvalid = this.dataList.some(
        (item) => !item.markerClassList.length
      );
      if (unvalid) {
        this.$message.error("有评卷员未设置班级");
        return;
      }

      const res = await markClassMarkerSave({
        examId: this.basicInfo.examId,
        paperNumber: this.basicInfo.paperNumber,
        groupMarkerClass: this.dataList,
      }).catch(() => {});
      if (!res) return;
      this.$message.success("保存成功！");
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>
