<template>
  <div class="mark-task-manage">
    <div class="part-box-head mark-task-head">
      <Select
        v-model="areaCode"
        placeholder="请选择考区"
        style="width: 140px;margin-right: 10px;"
      >
        <Option value="">考区一</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.grade }}</td>
          <td>{{ task.sum }}</td>
          <td>{{ task.finished }}</td>
          <td>{{ task.unfinished }}</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.showSerialNo">
              <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.unfinished"
              :precision="0"
              :disabled="!task.unfinished"
            ></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 { markTaskInfo, createMarkTask } from "@/api";
import { calcSum } from "@/plugins/utils";
import { SORT_ORDER_TYPE, BOOLEAN_TYPE } from "@/constants/enumerate";

export default {
  name: "mark-task-manage",
  data() {
    return {
      subjectId: this.$route.params.subjectId,
      SORT_ORDER_TYPE,
      BOOLEAN_TYPE,
      areaCode: "",
      isSubmit: false,
      taskList: []
    };
  },
  computed: {
    curTaskCount() {
      let nums = this.taskList.map(item => item.taskCount);
      return calcSum(nums);
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.taskList = "ABCDEFGHIJK".split("").map(item => {
        const sum = Math.floor(Math.random() * 20);
        const finished = Math.floor(sum * Math.random());
        return {
          grade: item,
          sum,
          finished,
          unfinished: sum - finished,
          sortRule: 0,
          showSerialNo: 0,
          taskCount: 0
        };
      });
    },
    async getData() {
      const data = await markTaskInfo(this.subjectId);
      console.log(data);
    },
    sortRuleChange(task) {
      if (!task.sortRule) task.showSerialNo = 0;
    },
    async submit() {
      if (this.isSubmit) return;
      this.isSubmit = true;
      const data = await createMarkTask(this.taskList).catch(() => {});
      this.isSubmit = false;
      if (!data) return;
      this.$Message.success("任务创建成功！");
      this.getData();
    }
  }
};
</script>
