<template>
  <Modal
    class="scan-exception-dialog"
    v-model="modalIsShow"
    :mask-closable="false"
    :closable="false"
    fullscreen
    footer-hide
    @on-visible-change="visibleChange"
  >
    <div slot="header"></div>

    <div class="exception-body">
      <h2 class="exception-title" v-if="scanType === 'SCAN'">
        <i class="icon ivu-icon-error-hollow"></i>
        <span>{{ curException.message }}</span>
      </h2>
      <h2 class="exception-title" v-else>人工绑定</h2>
      <div class="code-area exception-code-area">
        <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-footer" v-if="curException.showAction">
        <Form
          class="exception-form"
          ref="modalFormComp"
          :model="modalForm"
          :rules="rules"
          :label-width="0"
          inline
        >
          <FormItem prop="examNumber">
            <Input
              size="default"
              key="1"
              v-model.trim="modalForm.examNumber"
              placeholder="请扫码输入"
              suffix="scan icon"
              style="width: 200px;"
              autofocus
              v-code-input.prevent="{ inputOver }"
              v-if="scanType === 'SCAN'"
            >
              ></Input
            >
            <Input
              size="default"
              key="2"
              v-model.trim="modalForm.examNumber"
              placeholder="请在此输入考号"
              style="width: 200px;"
              @on-blur="checkStudent"
              autofocus
              v-else
            >
            </Input>
          </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 icon="handle icon" @click="toHandInput">人工绑定</Button>
          <Button @click="toRescan">重新扫描</Button>
          <Button @click="toReset"
            ><i class="icon-font icon-setting"></i>设置采集信息</Button
          >
        </div>
      </div>
      <div class="exception-footer" style="text-align:center;" v-else>
        <Button type="primary" style="width: 160px;" @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() {
      if (!this.modalForm.examNumber) return;
      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.examNumber, this.scanType);
      this.cancel();
    }
  },
  beforeDestroy() {
    if (this.cropper) {
      this.cropper.destroy();
      this.cropper = false;
    }
  }
};
</script>
