<template>
  <div class="grading-progress">
    <div class="progress-title">
      <span>当前阶段：{{ stepName }}</span
      ><span>进度：{{ stepProgress }}</span>
    </div>
    <div class="part-box-head" v-if="IS_ADMIN">
      <div class="part-box-head-left">
        <Button type="primary" @click="toGrading" v-if="showGradingBtn"
          >正评任务创建</Button
        >
        <Button type="primary" @click="toTryGrading" v-if="showTryGradingBtn"
          >试评任务创建</Button
        >
        <Button type="primary" @click="toMark" v-if="showMarkBtn"
          >进入打分阶段</Button
        >
      </div>
      <div class="part-box-head-right" v-if="curSubject.stage !== 'INIT'">
        <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="(item, aindex) in areaProgress" :key="aindex">
            <td style="width: 12%">{{ item.areaName }}</td>
            <td style="width: 60%;">
              <progress-line
                :sum="item.totalCount"
                :current="item.successCount"
              ></progress-line>
            </td>
            <td style="width: 14%;">进度：{{ item.progress }}%</td>
            <td style="width: 14%;"></td>
          </tr>
        </table>
      </div>
      <div class="progress-table">
        <table class="table table-noborder">
          <tr v-for="(item, aindex) in markerProgress" :key="aindex">
            <td style="width: 12%">{{ item.markerName }}</td>
            <td style="width: 60%;">
              <progress-line
                :sum="item.totalCount"
                :current="item.successCount"
              ></progress-line>
            </td>
            <td style="width: 14%;">进度：{{ item.progress }}%</td>
            <td style="width: 14%;">打回：{{ item.rejectedCount }}</td>
          </tr>
        </table>
      </div>
    </div>

    <!-- modify-unformal-grading-task -->
    <modify-unformal-grading-task
      :cur-subject="curSubject"
      @modified="getData"
      ref="ModifyUnformalGradingTask"
      v-if="curSubject.id"
    ></modify-unformal-grading-task>
    <!-- modify-formal-grading-task -->
    <modify-formal-grading-task
      :subject-id="subjectId"
      @confirm="getData"
      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, subjectDetail } from "@/api";
import { SUBJECT_STAGE } from "@/constants/enumerate";

export default {
  name: "grading-progress",
  components: {
    ProgressLine,
    ModifyUnformalGradingTask,
    ModifyFormalGradingTask
  },
  data() {
    return {
      subjectId: this.$route.params.subjectId,
      stepName: "",
      stepProgress: "",
      curSubject: {},
      SUBJECT_STAGE,
      totalProgress: {},
      areaProgress: [],
      markerProgress: [],
      curUserRoleType: ""
    };
  },
  computed: {
    showGradingBtn() {
      return (
        (this.curSubject.stage == "INIT" &&
          this.curSubject.test !== 2 &&
          !this.curSubject.formal) ||
        (this.curSubject.stage == "LEVEL" &&
          this.stepProgress !== 100 &&
          this.curSubject.test === 0 &&
          this.curSubject.formal)
      );
    },
    showTryGradingBtn() {
      return (
        (this.curSubject.stage == "INIT" &&
          this.curSubject.test !== 2 &&
          !this.curSubject.formal) ||
        (this.curSubject.stage == "LEVEL" && this.curSubject.test === 2)
      );
    },
    showMarkBtn() {
      return (
        (this.curSubject.stage == "LEVEL" && this.stepProgress === 100) ||
        (this.curSubject.stage == "SCORE" && !this.curSubject.allLevel)
      );
    },
    IS_ADMIN() {
      return this.curUserRoleType === "ADMIN";
    },
    IS_MARK_LEADER() {
      return this.curUserRoleType === "MARK_LEADER";
    }
  },
  mounted() {
    this.curUserRoleType = this.$ls.get("user", { role: "" }).role;
    this.getData();
  },
  methods: {
    async getData() {
      await this.getSubjectDetail();
      this.getProgressDetail();
    },
    async getProgressDetail() {
      const data = await gradingProgressDetail({
        workId: this.curSubject.workId,
        subject: this.curSubject.subject
      });
      this.totalProgress = data.totalProgress;
      this.stepProgress = data.totalProgress.progress.toFixed(2) + "%";
      const totalInfo = {
        successCount: data.totalProgress.successCount,
        totalCount: data.totalProgress.totalCount,
        progress: data.totalProgress.progress.toFixed(2),
        areaName: "总体进度"
      };
      if (this.curSubject.stage === "INIT") {
        this.areaProgress = [totalInfo];
        this.markerProgress = [];
      } else {
        this.areaProgress = [totalInfo, ...this.addProgress(data.areaProgress)];
        this.markerProgress = this.addProgress(data.markerProgress);
      }
    },
    addProgress(data) {
      return data.map(item => {
        item.successCount = item.totalCount - item.leftCount;
        item.progress = item.totalCount
          ? ((100 * item.successCount) / item.totalCount).toFixed(2)
          : "0.00";
        return item;
      });
    },
    async getSubjectDetail() {
      this.curSubject = await subjectDetail(this.subjectId);
      this.stepName =
        this.curSubject.test === 2
          ? "试评"
          : this.SUBJECT_STAGE[this.curSubject.stage];
    },
    toGrading() {
      this.$refs.ModifyFormalGradingTask.open();
    },
    toTryGrading() {
      this.$refs.ModifyUnformalGradingTask.open();
    },
    toMark() {
      this.$Modal.confirm({
        title: "操作警告",
        content: "确定要进入打分阶段吗？",
        onOk: () => {
          console.log("ok");
        }
      });
    },
    toExportStandard() {},
    toExportGrading() {}
  }
};
</script>
