<template>
  <div class="check-info part-box">
    <div class="part-head">
      <h2>核对试卷信息</h2>
    </div>
    <div class="check-form">
      <Form
        ref="modalFormComp"
        :model="modalForm"
        :rules="rules"
        :label-width="0"
      >
        <FormItem prop="level">
          <Select
            v-model="modalForm.level"
            prefix="menu icon"
            placeholder="请选择档位"
          >
            <Option
              v-for="(level, lindex) in levels"
              :key="lindex"
              :value="level"
              >{{ level }}档</Option
            >
          </Select>
        </FormItem>
      </Form>
    </div>
    <div class="check-action">
      <Button size="large" type="primary" @click="save">下一步</Button>
    </div>
    <!-- confirm modal -->
    <Modal
      class="modify-data"
      v-model="modalIsShow"
      title="确认试卷信息"
      :width="490"
      :mask-closable="false"
      :closable="false"
      :mask="false"
    >
      <div class="check-result">
        <div class="check-result-item">
          <i class="check-result-icon icon ivu-icon-subject"></i>
          <h4>科目</h4>
          <p>{{ curSubject.name }}</p>
        </div>
        <div class="check-result-item">
          <i class="check-result-icon icon ivu-icon-level"></i>
          <h4>档位</h4>
          <p>{{ modalForm.level }}</p>
        </div>
      </div>
      <div slot="footer">
        <Button type="primary" @click="confirm">确认</Button>
        <Button @click="modalIsShow = false">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { getLevelList } from "../api";

export default {
  name: "check-info",
  data() {
    return {
      modalIsShow: false,
      modalForm: {
        level: "1"
      },
      rules: {
        level: [
          {
            required: true,
            message: "请选择档位",
            trigger: "change"
          }
        ]
      },
      levels: []
    };
  },
  computed: {
    ...mapState("client", ["curSubject", "curLevel", "clientConfig"]),
    user() {
      return this.$store.state.user;
    }
  },
  mounted() {
    this.modalForm.level = this.curLevel;
    this.getLevels();
  },
  methods: {
    ...mapMutations("client", ["setCurLevel"]),
    async getLevels() {
      this.levels = await getLevelList(this.user.examId);
    },
    async save() {
      const valid = await this.$refs.modalFormComp.validate();
      if (!valid) return;
      this.modalIsShow = true;
    },
    confirm() {
      this.modalIsShow = false;
      this.setCurLevel(this.modalForm.level);
      const scanName = this.clientConfig.packageScan ? "GroupScan" : "LineScan";
      this.$router.push({ name: scanName });
    }
  }
};
</script>
