<template>
  <el-dialog
    class="modify-mark-params"
    :visible.sync="modalIsShow"
    top="0"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
    fullscreen
    @open="initData"
  >
    <div slot="title">
      <h2 class="el-dialog__title">评卷参数设置</h2>
      <span
        >课程名称：{{ instance.courseName }}（{{ instance.courseCode }}）</span
      >
      <span class="ml-4">{{ instance.paperType }}卷</span>
      <button class="el-dialog__headerbtn" @click="cancel"></button>
    </div>

    <div class="mb-4 tab-btns">
      <el-button
        v-for="tab in tabs"
        :key="tab.val"
        size="medium"
        :type="curTab == tab.val ? 'primary' : 'default'"
        :disabled="checkTabValid(tab)"
        @click="selectMenu(tab.val)"
        >{{ tab.name }}
      </el-button>
    </div>

    <div v-if="dataReady">
      <component
        :is="currentComponent"
        @cancel="cancel"
        @confirm="confirm"
      ></component>
    </div>
    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import MarkParamStructure from "./MarkParamStructure.vue";
import MarkParamGroup from "./MarkParamGroup.vue";
import MarkParamClass from "./MarkParamClass.vue";
import MarkParamObjectiveAnswer from "./MarkParamObjectiveAnswer.vue";
import MarkParamSubjectiveAnswer from "./MarkParamSubjectiveAnswer.vue";
import { markStructureList, markGroupList } from "../../api";

export default {
  name: "modify-mark-params",
  components: {
    MarkParamStructure,
    MarkParamGroup,
    MarkParamClass,
    MarkParamObjectiveAnswer,
    MarkParamSubjectiveAnswer,
  },
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      dataReady: false,
      // step
      curTab: "structure",
      tabs: [
        {
          name: "试卷结构设置",
          val: "structure",
        },
        {
          name: "评卷任务设置",
          val: "group",
        },
        {
          name: "分班阅卷设置",
          val: "class",
        },
        {
          name: "客观题标答设置",
          val: "objective-answer",
        },
        {
          name: "主观题标答设置",
          val: "subjective-answer",
        },
      ],
      current: 0,
      questionSubmit: false,
    };
  },
  computed: {
    ...mapState("markParam", ["openMarkClass"]),
    currentComponent() {
      return `mark-param-${this.curTab}`;
    },
    isFirstStep() {
      return this.current === 0;
    },
    isLastStep() {
      return this.current === this.lastStep;
    },
    lastStep() {
      return this.tabs.length - 1;
    },
  },
  methods: {
    ...mapMutations("markParam", [
      "setBasicInfo",
      "setPaperStructureInfo",
      "setStructureCanEdit",
      "setGroupInfo",
      "setOpenMarkClass",
      "setOpenDoubleMarking",
      "initStore",
    ]),
    async initData() {
      this.setBasicInfo({ ...this.instance });
      const params = {
        examId: this.instance.examId,
        paperNumber: this.instance.paperNumber,
        paperType: this.instance.paperType,
      };

      // structure
      const structRes = await markStructureList(params);
      let curMainNumber = null;
      const questions = (structRes.questions || []).map((item) => {
        let nitem = {
          ...item,
          mainFirstSub: false,
        };
        if (curMainNumber !== item.mainNumber) {
          curMainNumber = item.mainNumber;
          nitem.mainFirstSub = true;
        }
        return nitem;
      });
      this.setPaperStructureInfo(questions || []);
      this.setStructureCanEdit(structRes.canCreate);
      this.questionSubmit = structRes.questionSubmit;
      // group
      const groupRes = await markGroupList(params);
      if (groupRes.groups && groupRes.groups.length) {
        groupRes.groups.forEach((item) => {
          item.questions.forEach((q) => {
            q.qno = `${q.mainNumber}-${q.subNumber}`;
          });
        });
      }
      this.setGroupInfo(groupRes.groups || []);
      this.setOpenMarkClass(!!groupRes.openMarkClass);
      this.setOpenDoubleMarking(!!groupRes.openDoubleMarking);

      this.selectMenu("structure");
      this.dataReady = true;
    },
    checkTabValid(tab) {
      return (
        (!this.questionSubmit && tab.val !== "structure") ||
        (tab.val === "class" && !this.openMarkClass)
      );
    },
    selectMenu(val) {
      this.curTab = val;
      this.current = this.tabs.findIndex((item) => item.val === val);
    },
    async cancel() {
      const res = await this.$confirm("确定要退出阅卷参数编辑吗?", "提示", {
        type: "warning",
      }).catch(() => {});
      if (res !== "confirm") return;

      this.initStore();
      this.dataReady = false;
      this.$emit("modified");
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    confirm() {
      if (this.isLastStep) {
        this.selectMenu(this.tabs[0].val);
      } else {
        if (this.curTab === "structure") {
          this.questionSubmit = true;
        }
        if (this.curTab === "group" && !this.openMarkClass) {
          this.selectMenu(this.tabs[this.current + 2].val);
        } else {
          this.selectMenu(this.tabs[this.current + 1].val);
        }
      }
    },
  },
};
</script>
