<template>
  <Modal
    class="scan-exception-dialog"
    v-model="modalIsShow"
    :mask-closable="false"
    :closable="!curException.showAction"
    fullscreen
    footer-hide
    @on-visible-change="visibleChange"
  >
    <div class="exception-title" slot="header">
      <h2>{{ curException.message }}</h2>
    </div>

    <div class="home-main">
      <div class="code-area-main exception-main">
        <div class="code-area-cont code-area-cont-disabled">
          <img :src="curImage.url" :alt="curImage.name" ref="editImage" />
        </div>
        <div class="code-area-preview">
          <div class="code-area-spin">
            <div
              class="code-area-spin-img"
              :style="spinStyle"
              ref="CodeAreaSpinImg"
            ></div>
          </div>
        </div>
      </div>

      <div class="exception-form" v-if="curException.showAction">
        <Form
          ref="modalFormComp"
          :model="modalForm"
          :rules="rules"
          :label-width="0"
          inline
        >
          <FormItem prop="examNumber">
            <div class="input-append">
              <Input
                size="default"
                v-model.trim="modalForm.examNumber"
                placeholder="请扫码输入"
                style="width: 220px;"
                autofocus
                v-code-input.prevent="{ inputOver }"
                v-if="scanType === 'SCAN'"
              >
                ></Input
              >
              <Input
                size="default"
                v-model.trim="modalForm.examNumber"
                placeholder="请在此输入考号"
                style="width: 220px;"
                @on-blur="checkStudent"
                autofocus
                v-else
              >
              </Input>
            </div>
          </FormItem>
          <FormItem>
            <Input
              v-model="modalForm.studentName"
              placeholder="姓名"
              readonly
            ></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="confirm">确认</Button>
          </FormItem>
        </Form>
        <div class="exception-actions" v-if="scanType === 'SCAN'">
          <Button size="default" type="primary" @click="toHandInput"
            >手工绑定</Button
          >
          <Button size="default" type="primary" @click="toRescan"
            >重新采集</Button
          >
          <Button size="default" type="default" @click="toReset"
            ><i class="icon-font icon-setting"></i>重新配置</Button
          >
        </div>
      </div>
      <div class="exception-actions" v-else>
        <Button size="default" type="primary" @click="toRescan">确定</Button>
      </div>
    </div>
  </Modal>
</template>

<script>
import Cropper from "cropperjs";
import { getStudentByExamNumber } from "../api";

export default {
  name: "scan-exception-dialog",
  props: {
    curImage: {
      type: Object,
      default() {
        return {
          url: "",
          name: ""
        };
      }
    },
    curException: {
      type: Object,
      default() {
        return {
          showAction: true,
          message: ""
        };
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      cropper: "",
      spinStyle: {},
      scanType: "SCAN",
      modalForm: {
        examNumber: "",
        studentName: ""
      },
      rules: {
        examNumber: [
          {
            required: true,
            message: "请输入准考证号！",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    initData() {
      this.modalForm.examNumber = "";
    },
    visibleChange(visible) {
      if (visible) {
        this.initData();
        this.$nextTick(() => {
          this.initCropper();
        });
      } else {
        if (this.cropper) {
          this.cropper.destroy();
          this.cropper = false;
        }
      }
    },
    initCropper() {
      const _this = this;
      const codeArea = this.curException.collectConfig.codeArea;

      this.cropper = new Cropper(this.$refs.editImage, {
        viewMode: 1,
        checkCrossOrigin: false,
        zoomable: false,
        preview: _this.$refs.CodeAreaSpinImg,
        ready() {
          _this.cropper.setData(codeArea);
          _this.spinStyle = {
            transform: `translate(-50%, -50%) rotate(${codeArea.codeRotate}deg)`
          };
        }
      });
    },
    inputOver(code) {
      this.modalForm.examNumber = code;
      this.checkStudent();
    },
    async checkStudent() {
      const data = await getStudentByExamNumber(this.modalForm.examNumber);
      this.modalForm.studentName = data.name;
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    toReset() {
      this.$emit("on-reset");
      this.cancel();
    },
    toRescan() {
      this.$emit("on-rescan");
      this.cancel();
    },
    toHandInput() {
      this.scanType = "MANUAL";
    },
    async confirm() {
      const valid = await this.$refs.modalFormComp.validate();
      if (!valid) return;
      this.$emit("confirm", this.modalForm, this.scanType);
    }
  },
  beforeDestroy() {
    if (this.cropper) {
      this.cropper.destroy();
      this.cropper = false;
    }
  }
};
</script>
