<template>
  <div class="mark-task-manage">
    <div class="part-box-head mark-task-head">
      <Select
        v-model="questionId"
        placeholder="请选择考区"
        @on-change="areaChange"
        style="width: 140px;margin-right: 10px;"
      >
        <Option
          v-for="area in areas"
          :key="area.id"
          :value="area.id"
          :label="area.areaName"
        ></Option>
      </Select>
      <Button type="primary" icon="md-search" @click="getData">查询</Button>
    </div>
    <div class="part-box mark-task-body">
      <table class="table">
        <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.level }}</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>

      <div class="mark-task-action">
        <span>已选任务数量：{{ curTaskCount }}</span>
        <Button type="primary" @click="submit" :disabled="isSubmit"
          >发布评卷任务</Button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  areaList,
  markTaskInfo,
  checkMarkTaskCanSubmit,
  createGradingTask
} 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: []
    };
  },
  computed: {
    curTaskCount() {
      let nums = this.taskList.map(item => item.taskCount);
      return calcSum(nums);
    }
  },
  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 {
          ...item,
          displayNumber: 0,
          sortRule: 0,
          taskCount: 0
        };
      });
    },
    sortRuleChange(task) {
      if (!task.sortRule) task.displayNumber = 0;
    },
    async submit() {
      if (!this.curTaskCount) {
        this.$Message.error("请设置任务数量！");
        return;
      }
      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await createGradingTask({
        subjectId: this.subjectId,
        taskCount: this.curTaskCount,
        questionId: this.questionId,
        taskList: this.taskList
      }).catch(() => {});
      this.isSubmit = false;
      if (!data) return;
      this.$Message.success("任务创建成功！");
      this.areaChange();
    }
  }
};
</script>
