<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">
        <i-form
          ref="modalFormComp"
          :model="modalForm"
          :rules="rules"
          :label-width="0"
          inline
        >
          <form-item prop="examNumber">
            <div class="input-append">
              <i-input
                size="default"
                v-model.trim="modalForm.examNumber"
                placeholder="请扫码输入"
                style="width: 220px;"
                autofocus
              >
                ></i-input
              >
            </div>
          </form-item>
          <form-item :label-width="0">
            <i-button size="default" type="primary" @click="toHandInput"
              >手工绑定</i-button
            >
            <i-button size="default" type="primary" @click="toRescan"
              >重新采集</i-button
            >
            <i-button size="default" type="default" @click="toReset"
              ><i class="icon-font icon-setting"></i>重新配置</i-button
            >
          </form-item>
        </i-form>
      </div>
    </div>
  </Modal>
</template>

<script>
import Cropper from "cropperjs";

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: {},
      modalForm: {
        examNumber: ""
      },
      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)`
          };
        }
      });
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    toReset() {
      this.$emit("on-reset");
      this.cancel();
    },
    toRescan() {
      this.$emit("on-rescan");
      this.cancel();
    },
    async toHandInput() {
      const valid = await this.$refs.modalFormComp.validate();
      if (!valid) return;
      this.$emit("on-hand-input", this.modalForm.examNumber, "MANUAL");
      this.cancel();
    }
  },
  beforeDestroy() {
    if (this.cropper) {
      this.cropper.destroy();
      this.cropper = false;
    }
  }
};
</script>
