<template>
  <div class="check-info home-main">
    <div class="part-head">
      <h2>请核对试卷信息</h2>
    </div>
    <div class="check-form">
      <Form
        ref="modalFormComp"
        :model="modalForm"
        :rules="rules"
        :label-width="100"
      >
        <FormItem prop="level" label="档位">
          <Select v-model="modalForm.level">
            <Option
              v-for="(level, lindex) in levels"
              :key="lindex"
              :value="level.name"
              >{{ level.name }}</Option
            >
          </Select>
        </FormItem>
      </Form>
    </div>
    <div class="check-action">
      <Button type="primary" @click="save">下一步</Button>
    </div>

    <Modal
      class="modify-data"
      v-model="modalIsShow"
      title="确认试卷信息"
      :mask-closable="false"
    >
      <Form :label-width="100">
        <FormItem label="科目："> {{ curSubject.name }}</FormItem>
        <FormItem label="档位：">
          {{ modalForm.level }}
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="confirm">确认</Button>
        <Button type="text" @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: ""
      },
      rules: {
        level: [
          {
            required: true,
            message: "请选择档位",
            trigger: "change"
          }
        ]
      },
      levels: [
        {
          id: 1,
          name: "A"
        }
      ]
    };
  },
  computed: {
    ...mapState("client", ["curSubject", "curLevel"]),
    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.modalFsorm.level);
      const scanName = this.config.isPackageMode ? "GroupScan" : "LineScan";
      this.$router.push({ name: scanName });
    }
  }
};
</script>
