<template>
  <div class="rc-cropper" v-if="originImg">
    <div
      :class="{
        'rc-cropper__canvasCrop1': cropOption.uploadType == 1,
        'rc-cropper__canvasCrop2': cropOption.uploadType == 2,
      }"
    >
      <img :src="originImg" v-if="!cropper" />
      <canvas :id="originImg" ref="canvas" />
      <div class="rc-cropper__iconCrop">
        <el-tooltip content="确认裁剪" placement="right" v-if="cropper">
          <el-button type="success" size="mini" @click="sureCropper()"
            ><el-icon><el-icon-check /></el-icon
          ></el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import { Check as ElIconCheck } from '@element-plus/icons'
import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
  components: {
    ElIconCheck,
  },
  name: 'rc-cropper2',
  props: {
    cropOption: {
      type: Object,
      required: true,
      default: () => {},
    },
    originImg: {
      required: true,
    },
  },
  data() {
    return {
      cropper: null,
      croppShow: false,
    }
  },
  mounted() {
    this.drawImg()
  },
  unmounted() {
    this.cropper && this.cropper.destroy()
  },
  methods: {
    // 在canvas上绘制图片
    drawImg() {
      const _this = this
      this.$nextTick(() => {
        let canvas = document.getElementById(this.originImg)
        if (canvas) {
          // canvas.width = 1000
          // canvas.height = 800
          canvas.width = _this.cropOption.cvWidth
          canvas.height = _this.cropOption.cvHeight
          let ctx = canvas.getContext('2d')
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          let img = new Image()
          img.crossOrigin = 'Anonymous'
          img.src = this.originImg
          img.onload = function () {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
            _this.initCropper()
          }
        }
      })
    },
    // 显示裁剪框
    initCropper() {
      if (!HTMLCanvasElement.prototype.toBlob) {
        console.log('HTMLCanvasElement.prototype.toBlob####')
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
          value: function (callback, type, quality) {
            var canvas = this
            setTimeout(function () {
              var binStr = window.atob(
                canvas.toDataURL(type, quality).split(',')[1]
              )
              var len = binStr.length
              var arr = new window.Uint8Array(len)
              for (var i = 0; i < len; i++) {
                arr[i] = binStr.charCodeAt(i)
              }
              // callback(new window.Blob([arr], { type: type || 'image/jpeg' }));
              callback(new window.Blob([arr], { type: type || 'image/jpeg' }))
            })
          },
        })
      }

      this.croppShow = true
      this.cropper = new Cropper(this.$refs.canvas, {
        checkCrossOrigin: true,
        viewMode: 3,
        zoomOnWheel: true, // 是否可以通过移动鼠标来放大图像
        dragMode: 'move',
        // autoCropArea: 0.6,
        // center: true,
        // autoCrop: true,
        restore: false,
        modal: true,
        guides: true,
        highlight: true,
        cropBoxMovable: true,
        cropBoxResizable: false,
        toggleDragModeOnDblclick: false,
        // aspectRatio: 75/42,
        // aspectRatio: 5/3,
        ready: () => {
          this.cropper.setData({
            x: this.cropOption.offset_x,
            y: this.cropOption.offset_y,
            width: this.cropOption.width,
            height: this.cropOption.height,
          })
          // this.cropper.zoomTo(1);
        },
        // zoom: function (event) {
        //   // Keep the image in its natural size
        //   if (event.detail.oldRatio === 1) {
        //     event.preventDefault();
        //   }
        // },
      })
    },
    // 确认裁剪
    sureCropper() {
      let _this = this
      const cropParam = this.cropper.getData()
      console.log('cropParam', cropParam)
      this.cropper.getCroppedCanvas().toBlob(function (blob) {
        var objecturl = window.URL.createObjectURL(blob)
        console.log('objecturl', objecturl)
        let files = new window.File([blob], 'cropper.jpg')
        console.log('getCroppedCanvas', files)
        let oFileReader = new window.FileReader()
        console.log('oFileReader', oFileReader)
        oFileReader.onloadend = function (e) {
          console.log('e.target.result', e, e.target, e.target.result)
          let base64 = e.target.result
          $emit(_this, 'getCropImg', base64, cropParam, files, _this.cropper)
        }
        oFileReader.readAsDataURL(blob)
      }, 'image/jpeg')
    },
  },
  emits: ['getCropImg'],
}
</script>

<style lang="scss" scoped>
 {
}
.rc-cropper__canvasCrop1 {
  width: 800px;
  height: 540px;
}
.rc-cropper__canvasCrop2 {
  width: 400px;
  height: 300px;
}
.rc-cropper__iconCrop {
  position: absolute;
  right: 13%;
  top: 15%;
}
.el-tooltip {
  margin: 20px 4px;
  display: block;
  z-index: 10000;
}
</style>
