<template>
  <div class="mark-task-manage">
    <div class="part-box part-box-head">
      <div class="part-box-head-left">
        <Select
          v-model="questionId"
          placeholder="选择考区"
          @on-change="areaChange"
          style="width: 200px;margin-right: 10px;"
        >
          <Option
            v-for="area in areas"
            :key="area.id"
            :value="area.id"
            :label="area.areaName"
          ></Option>
        </Select>
        <Button
          class="btn-form-search"
          size="small"
          type="primary"
          @click="getData"
          >查询</Button
        >
      </div>
      <div class="part-box-head-right">
        <p class="mark-task-total">
          <span>已选试卷数量：</span>
          <span>{{ curTaskCount }}</span>
        </p>
        <Button
          shape="circle"
          type="success"
          icon="upload-white icon"
          @click="toSubmit"
          :disabled="isSubmit || !canSubmitTask"
          >发布评卷任务</Button
        >
      </div>
    </div>
    <table class="table table-width">
      <tr>
        <th>档位</th>
        <th>总数量</th>
        <th>已评</th>
        <th>未评</th>
        <th>排序规则</th>
        <th>是否显示档内序号</th>
        <th>本次任务数</th>
      </tr>
      <tr v-for="(task, tindex) in taskList" :key="tindex">
        <td>{{ task.code }}</td>
        <td>{{ task.totalCount }}</td>
        <td>{{ task.successCount }}</td>
        <td>{{ task.waitCount }}</td>
        <td>
          <Select v-model="task.sortRule" @on-change="sortRuleChange(task)">
            <Option
              v-for="(val, key) in SORT_ORDER_TYPE"
              :key="key"
              :value="key * 1"
              :label="val"
            ></Option>
          </Select>
        </td>
        <td>
          <Select v-model="task.displayNumber">
            <Option
              v-for="(val, key) in BOOLEAN_TYPE"
              :key="key"
              :value="key * 1"
              :label="val"
            ></Option>
          </Select>
        </td>
        <td>
          <InputNumber
            v-model="task.taskCount"
            :min="0"
            :max="task.waitCount"
            :precision="0"
            :disabled="!task.waitCount"
          ></InputNumber>
        </td>
      </tr>
    </table>

    <p class="tips-info tips-error" v-if="!canSubmitTask">
      警告：当前考区还有未完成的任务，无法发布新任务！
    </p>

    <!-- task info confirm modal -->
    <Modal
      class="task-confirm-modal"
      v-model="modalIsShow"
      :title="modalTitle"
      :width="800"
      :mask-closable="false"
      :closable="false"
    >
      <Table
        ref="TableList"
        :columns="columns"
        :data="taskList"
        disabled-hover
        border
      ></Table>

      <div slot="footer">
        <Button
          shape="circle"
          type="primary"
          :disabled="isSubmit || !canSubmitTask"
          @click="submit"
          >确认</Button
        >
        <Button shape="circle" @click="cancel">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  areaList,
  markTaskInfo,
  checkMarkTaskCanSubmit,
  publishScoreTask
} from "@/api";
import { calcSum } from "@/plugins/utils";
import { SORT_ORDER_TYPE, BOOLEAN_TYPE } from "@/constants/enumerate";

export default {
  name: "mark-task-manage",
  data() {
    return {
      workId: this.$route.params.workId,
      subjectId: this.$route.params.subjectId,
      subject: "",
      questionId: "",
      SORT_ORDER_TYPE,
      BOOLEAN_TYPE,
      canSubmitTask: true,
      isSubmit: false,
      taskList: [],
      areas: [],
      // modal
      modalIsShow: false,
      columns: [
        {
          title: "档位",
          key: "code",
          width: 70
        },
        {
          title: "总数量",
          key: "totalCount"
        },
        {
          title: "已评",
          key: "successCount"
        },
        {
          title: "未评",
          key: "waitCount"
        },
        {
          title: "排序规则",
          key: "sortRule",
          width: 100,
          render: (h, param) => {
            return h("div", SORT_ORDER_TYPE[param.row.sortRule]);
          }
        },
        {
          title: "是否显示档内序号",
          key: "displayNumber",
          width: 200,
          render: (h, param) => {
            return h("div", BOOLEAN_TYPE[param.row.displayNumber]);
          }
        },
        {
          title: "本次任务数",
          key: "taskCount",
          width: 120
        }
      ]
    };
  },
  computed: {
    curTaskCount() {
      let nums = this.taskList.map(item => item.taskCount);
      return calcSum(nums);
    },
    modalTitle() {
      return `已选试卷数量：${this.curTaskCount}`;
    }
  },
  mounted() {
    this.subject = this.subjectId.split("-")[1];
    this.initData();
  },
  methods: {
    async initData() {
      await this.getAreaList();
      this.questionId = this.areas[0].id;
      this.areaChange();
    },
    async getAreaList() {
      const data = await areaList({
        workId: this.workId,
        subject: this.subject
      });
      this.areas = data.map(item => {
        return {
          id: item.id,
          areaName: item.areaName,
          areaCode: item.areaCode
        };
      });
    },
    async checkCanSubmitTask() {
      this.canSubmitTask = await checkMarkTaskCanSubmit(
        this.subjectId,
        this.questionId
      );
    },
    areaChange() {
      this.checkCanSubmitTask();
      this.getData();
    },
    async getData() {
      const data = await markTaskInfo(this.subjectId, this.questionId);
      this.taskList = data.map(item => {
        return {
          code: item.code,
          totalCount: item.totalCount,
          successCount: item.successCount,
          waitCount: item.waitCount,
          displayNumber: 0,
          sortRule: 0,
          taskCount: 0
        };
      });
    },
    sortRuleChange(task) {
      if (!task.sortRule) task.displayNumber = 0;
    },
    cancel() {
      this.modalIsShow = false;
    },
    toSubmit() {
      if (!this.canSubmitTask) {
        this.$Message.error("当前考区还有未完成的任务，无法发布新任务！");
        return;
      }
      if (!this.curTaskCount) {
        this.$Message.error("请设置任务数量！");
        return;
      }
      this.modalIsShow = true;
    },
    async submit() {
      if (this.isSubmit) return;
      this.isSubmit = true;
      let result = true;
      await publishScoreTask({
        subjectId: this.subjectId,
        questionId: this.questionId,
        taskList: this.taskList
      }).catch(() => {
        result = false;
      });
      this.isSubmit = false;
      if (!result) return;
      this.$Message.success("任务创建成功！");
      this.cancel();
      this.areaChange();
    }
  }
};
</script>
