<template>
  <el-dialog
    class="modify-base-config page-dialog"
    :visible.sync="modalIsShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    fullscreen
    destroy-on-close
    @opened="visibleChange"
    @closed="dialogClosed"
  >
    <div slot="title">
      基础配置<span class="color-gray-2 ml-2">{{ insCont }}</span>
    </div>
    <div v-if="dataReady" class="part-box part-box-pad">
      <el-steps :active="curStep" align-center finish-status="success">
        <el-step
          v-for="(item, ind) in steps"
          :key="item.val"
          :status="item.status"
        >
          <el-button
            slot="title"
            :class="['step-title', { 'is-active': curStep === ind }]"
            type="text"
            :disabled="item.disabled"
            @click="changeStep(ind)"
            >{{ item.name }}</el-button
          >
        </el-step>
      </el-steps>
    </div>

    <div v-if="dataReady" class="part-box part-box-pad">
      <component :is="compName" @modified="modified"></component>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import DimensionConfig from "./baseConfig/DimensionConfig.vue";
import BlueprintConfig from "./baseConfig/BlueprintConfig.vue";
import DiagnoseConfig from "./baseConfig/DiagnoseConfig.vue";
import CommentConfig from "./baseConfig/CommentConfig.vue";

const steps = [
  {
    name: "知识/能力维度设置",
    val: "dimension",
    disabled: false,
    status: "process",
    storeName: "dimensionList",
    fetchFunc: "fetchDimensionList"
  },
  {
    name: "命题蓝图设置",
    val: "blueprint",
    disabled: false,
    status: "wait",
    storeName: "structList",
    fetchFunc: "fetchStructList"
  },
  {
    name: "诊断规则定义",
    val: "diagnose",
    disabled: false,
    status: "wait",
    storeName: "defineList",
    fetchFunc: "fetchDefineList"
  },
  {
    name: "评价模型设置",
    val: "comment",
    disabled: false,
    status: "wait",
    storeName: "evaluationList",
    fetchFunc: "fetchEvaluationList"
  }
];

export default {
  name: "modify-base-config",
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    DimensionConfig,
    BlueprintConfig,
    DiagnoseConfig,
    CommentConfig
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      curStep: 0,
      steps: [],
      dataReady: false
    };
  },
  computed: {
    ...mapState("baseConfigs", [
      "dimensionList",
      "structList",
      "defineList",
      "evaluationList"
    ]),
    compName() {
      const stepVal = this.steps[this.curStep] && this.steps[this.curStep].val;
      if (!stepVal) return null;
      return `${stepVal}-config`;
    },
    insCont() {
      return `${this.instance.semesterName}-${this.instance.examName}-${this.instance.courseName}(${this.instance.courseCode})`;
    }
  },
  methods: {
    ...mapMutations("baseConfigs", ["setBaseInfo", "initConfigStore"]),
    ...mapActions("baseConfigs", [
      "fetchDimensionList",
      "fetchStructList",
      "fetchDefineList",
      "fetchEvaluationList"
    ]),
    async visibleChange() {
      this.setBaseInfo({ ...this.instance });
      await this.getData();
      this.dataReady = true;
    },
    dialogClosed() {
      this.initConfigStore();
      this.dataReady = false;
      this.steps = [];
      this.curStep = 0;
      this.$emit("closed");
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async getData() {
      const funcs = [
        this.fetchDimensionList(),
        this.fetchStructList(),
        this.fetchDefineList(),
        this.fetchEvaluationList()
      ];
      const result = await Promise.all(funcs).catch(() => {});
      if (!result) return;

      this.steps = steps.map(step => {
        let item = { ...step };
        if (item.val === "blueprint") {
          const finished = !this[item.storeName].some(
            elem => !elem.knowledgeDimension || !elem.abilityDimension
          );
          if (finished) item.status = "success";
        } else if (item.val === "diagnose") {
          if (this[item.storeName]) item.status = "success";
        } else {
          if (this[item.storeName] && this[item.storeName].length)
            item.status = "success";
        }
        return item;
      });

      const nextStep = this.steps.findIndex(item => item.status !== "success");
      if (nextStep > -1 && this.steps[nextStep].status === "wait") {
        this.curStep = nextStep;
        this.steps[this.curStep].status = "process";
      }

      this.steps.forEach(item => {
        item.disabled = item.status === "wait";
      });
    },
    changeStep(ind) {
      if (ind === this.curStep) return;
      this.curStep = ind;
    },
    modified() {
      if (
        this.curStep === this.steps.length - 1 &&
        this.steps[this.curStep].status === "process"
      ) {
        this.cancel();
        return;
      }

      this[this.steps[this.curStep].fetchFunc]();
      this.steps[this.curStep].status = "success";
      if (
        this.curStep !== this.steps.length - 1 &&
        this.steps[this.curStep + 1].status === "wait"
      ) {
        this.curStep += 1;
        this.steps[this.curStep].status = "process";
      }

      this.steps.forEach(item => {
        item.disabled = item.status === "wait";
      });
    }
  }
};
</script>
