<template>
  <div class="grading-progress">
    <div class="progress-title">
      <span>当前阶段：{{ stepName }}</span
      ><span>进度：{{ stepProgress }}</span>
    </div>
    <div class="part-box-head">
      <div class="part-box-head-left">
        <Button type="primary" @click="toGrading">正评任务创建</Button>
        <Button type="primary" @click="toTryGrading">试评任务创建</Button>
        <Button type="primary" @click="toMark">进入打分阶段</Button>
      </div>
      <div class="part-box-head-right">
        <Button type="primary" icon="md-download" @click="toExportStandard"
          >导出标准卷信息</Button
        >
        <Button type="primary" icon="md-download" @click="toExportGrading"
          >导出一键定档信息</Button
        >
      </div>
    </div>
    <div class="part-box">
      <div class="progress-table">
        <table class="table table-noborder">
          <tr v-for="(area, aindex) in areaInfos" :key="aindex">
            <td style="width: 12%">{{ area.name }}</td>
            <td style="width: 60%;">
              <progress-line
                :sum="area.sum"
                :current="area.current"
              ></progress-line>
            </td>
            <td style="width: 14%;">进度：{{ area.progress }}%</td>
            <td style="width: 14%;"></td>
          </tr>
        </table>
      </div>
      <div class="progress-table">
        <table class="table table-noborder">
          <tr v-for="(area, aindex) in userInfos" :key="aindex">
            <td style="width: 12%">{{ area.name }}</td>
            <td style="width: 60%;">
              <progress-line
                :sum="area.sum"
                :current="area.current"
              ></progress-line>
            </td>
            <td style="width: 14%;">进度：{{ area.progress }}%</td>
            <td style="width: 14%;">打回：{{ area.arbitration }}</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- modify-unformal-grading-task -->
    <modify-unformal-grading-task
      ref="ModifyUnformalGradingTask"
    ></modify-unformal-grading-task>
    <!-- modify-formal-grading-task -->
    <modify-formal-grading-task
      ref="ModifyFormalGradingTask"
    ></modify-formal-grading-task>
  </div>
</template>

<script>
import ProgressLine from "./components/ProgressLine";
import ModifyUnformalGradingTask from "./components/ModifyUnformalGradingTask";
import ModifyFormalGradingTask from "./components/ModifyFormalGradingTask";
import { gradingProgressDetail } from "@/api";

export default {
  name: "grading-progress",
  components: {
    ProgressLine,
    ModifyUnformalGradingTask,
    ModifyFormalGradingTask
  },
  data() {
    return {
      subjectId: this.$route.params.subjectId,
      stepName: "采集阶段",
      stepProgress: "95.56%",
      areaInfos: [
        {
          name: "总体进度",
          sum: 5500,
          current: 0,
          progress: 0
        },
        {
          name: "考区1进度",
          sum: 1000,
          current: 990,
          progress: 100
        },
        {
          name: "考区2进度",
          sum: 5500,
          current: 2000,
          progress: 45.45
        },
        {
          name: "考区3进度",
          sum: 5500,
          current: 2000,
          progress: 45.45
        }
      ],
      userInfos: [
        {
          name: "科组长",
          sum: 5500,
          current: 2000,
          arbitration: 10,
          progress: 45.45
        },
        {
          name: "评卷员1",
          sum: 5500,
          current: 2000,
          arbitration: 10,
          progress: 45.45
        },
        {
          name: "评卷员2",
          sum: 5500,
          current: 2000,
          arbitration: 10,
          progress: 45.45
        },
        {
          name: "评卷员3",
          sum: 5500,
          current: 2000,
          arbitration: 10,
          progress: 45.45
        }
      ]
    };
  },
  methods: {
    async getData() {
      const data = await gradingProgressDetail(this.subjectId);
      console.log(data);
    },
    toGrading() {
      this.$refs.ModifyFormalGradingTask.open();
    },
    toTryGrading() {
      this.$refs.ModifyUnformalGradingTask.open();
    },
    toMark() {
      this.$Modal.confirm({
        title: "操作警告",
        content: "确定要进入打分阶段吗？",
        onOk: () => {
          console.log("ok");
        }
      });
    },
    toExportStandard() {},
    toExportGrading() {}
  }
};
</script>
