<template>
  <div class="rc-cropper" v-if="originImg">
    <div class="rc-cropper__canvasCrop2">
      <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()"><i class="el-icon-check"></i></el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
  name: 'rc-cropper2',
  props: {
    cropOption: {
      type: Object,
      required: true,
      default: () => {}
    },
    originImg: {
      required: true
    },
    previewImg: {
      type: String
    }
  },
  data () {
    return {
      cropper: null,
      croppShow: false
    }
  },
  mounted () {
    this.drawImg()
  },
  destroyed() {
    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
          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 () {
      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) {
        let files = new window.File([blob], 'cropper.jpg');
        console.log(files);
        let oFileReader = new FileReader()
        oFileReader.onloadend = function (e) {
          let base64 = e.target.result
          _this.$emit('getCropImg', base64, cropParam, files, _this.cropper)
        }
        oFileReader.readAsDataURL(blob)
      }, 'image/jpeg')
    }
  }
}
</script>
<style scoped lang="scss">

// .rc-cropper {
//   position: relative;
//   margin-top: 10px;
//   img {
//     width: 100%;
//     height: 100%;    
//     }
// }

/* img {
  width: 100%;
  height: 100%;
} */

.rc-cropper__canvasCrop2 {
  /* border: 1px solid red; */
  width: 800px;
  height: 540px;
}

.rc-cropper__iconCrop {
  position: absolute;
  /* left: 8%; */
  left: 46%;
  top: 10%;
}

.el-tooltip {
  margin: 20px 4px;
  display: block;
  z-index: 10000;
}

</style>
