<template>
  <div class="tailor-area">
    <div class="part-head">
      <h2>裁剪区域设置</h2>
    </div>
    <div class="code-area-main">
      <div class="code-area-cont">
        <img :src="imageUrl" ref="editImage" />
      </div>
    </div>
  </div>
</template>

<script>
import Cropper from "cropperjs";

export default {
  name: "tailor-area",
  props: {
    imageUrl: {
      type: String,
      require: true
    },
    curSetting: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      cropper: ""
    };
  },
  mounted() {
    this.initCropper();
  },
  methods: {
    initCropper() {
      const _this = this;
      const defTailorArea =
        (this.curSetting && this.curSetting.tailorArea) || {};

      this.cropper = new Cropper(this.$refs.editImage, {
        viewMode: 1,
        checkCrossOrigin: false,
        zoomable: false,
        minCropBoxWidth: 10,
        minCropBoxHeight: 10,
        ready() {
          _this.cropper.setData(defTailorArea);
          _this.$emit("on-ready");
        }
      });
    },
    checkValid() {
      const tailorArea = {
        ...this.cropper.getData()
      };
      this.$emit("on-next", { tailorArea });
    },
    pass() {
      this.$emit("on-next", { tailorArea: {} });
    }
  },
  beforeDestroy() {
    if (this.cropper) {
      this.cropper.destroy();
      this.cropper = false;
    }
  }
};
</script>
