<template>
  <div>
    <el-dialog
      v-loading="loading"
      :show-close="false"
      :close-on-click-modal="false"
      :visible.sync="isShow"
      :title="'图片裁剪'"
      :modal-append-to-body="false"
      :append-to-body="true"
      :fullscreen="false"
      width="700px"
      custom-class="xl-dialog"
      center
    >
      <div class="scoped-upload">
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.outputSize"
            :outputType="option.outputType"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :enlarge="option.enlarge"
            :mode="option.mode"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox">
          </vueCropper>
        </div>
        <template v-if="option.autoCropWidth * option.enlarge > preImgOptions.w || option.autoCropHeight * option.enlarge > preImgOptions.h">
          <div class="su-tips t2">当前上传图片尺寸过小(宽度{{preImgOptions.w}}px,宽度{{preImgOptions.h}}px)，最低尺寸(宽度{{option.autoCropWidth * option.enlarge}}px+,宽度{{option.autoCropHeight * option.enlarge}}px+)，图片尺寸太小可能导致图片模糊</div>
        </template>
        <template v-else>
          <div class="su-tips">原图尺寸(宽度{{preImgOptions.w}}px,宽度{{preImgOptions.h}}px)，最低尺寸(宽度{{option.autoCropWidth * option.enlarge}}px+,宽度{{option.autoCropHeight * option.enlarge}}px+)</div>
        </template>
      </div>
      <div class="xl-form">
        <div class="xl-form-footer padding20">
          <el-button class="xl-form-btn t3" @click="rotateLeft">逆90°旋转</el-button>
          <el-button class="xl-form-btn t3" @click="rotateRight">顺90°旋转</el-button>
          <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
          <el-button class="xl-form-btn t1" @click="close('confirm')">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'CropperImg',
  props: {
    isShow: Boolean,
    curObj: Object,
  },
  data() {
    return {
      loading: true,
      option: {
        img: '', //裁剪图片的地址
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'jpeg', // 裁剪生成图片的格式
        full: false, // 是否输出原图比例的截图
        info: true, // 图片大小信息
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 375, // 默认生成截图框宽度
        autoCropHeight: 262, // 默认生成截图框高度
        canMove: true, // 上传图片是否可以移动
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        // height: true,
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        enlarge: 2, // 图片根据截图框输出比例倍数
        // mode: 'cover', // 图片默认渲染方式
        maxImgSize: 750 // 限制图片最大宽度和高度
      },
      preImgOptions: {
        h: 0,
        w: 0,
      }
    }
  },
  watch: {
    isShow: function(val) {
      if (val) {
        this.option.img = this.curObj.url
        let nImg = new Image()
        nImg.src = this.curObj.url
          // console.log(nImg)
        nImg.onload = () => {
          this.preImgOptions.h = nImg.height
          this.preImgOptions.w = nImg.width
        }
        const options = this.curObj.options || {}
        if (options.w) this.option.autoCropWidth = options.w
        if (options.h) this.option.autoCropHeight = options.h
      }
    },
  },
  methods: {
    rotateRight () {
      this.$refs.cropper.rotateRight()
    },
    rotateLeft () {
      this.$refs.cropper.rotateLeft()
    },
    close(str) {
      if (str === 'confirm') {
        this.$refs.cropper.getCropBlob((data) => {
          let newData = new FormData()
          // newData.append('token', 'B4mtpOy9yz0c72Y2+FqmkzjrBb2tKqB8j2HHe9zwh9Y80BpvEj2FANMdq5yFCc+cvFSJM3V9m5bq')
          newData.append('token', window.sessionStorage.getItem('fp_token'))
          newData.append('upload', data, 'honglou.jpg')
          const options = this.curObj.options || {}
          const SY = options.SY
          let apiUrl = process.env.VUE_APP_BASE_API + '/adm/upload/cloud'
          if (SY === 1) {
            apiUrl = process.env.VUE_APP_BASE_API + '/adm/upload/cloud'
          }
          axios({
            method: 'post',
            url: apiUrl,
            data: newData
          }).then(res => {
            const cData = res.data
            if (cData.errno === 0) {
              const cObj = cData.data || {}
              this.$emit('close', cObj.url)
            } else {
              this.$msgw(cData.errmsg)
            }
            // console.log(cData)
          })
        })
      } else {
        this.$emit('close')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.scoped-upload {
  text-align: center;
  .cropper {
    width: auto;
    height: 500px;
  }
  .su-tips {
    padding-top: 10px;
    color: #666;
    &.t2 {
      color: #f00;
      font-weight: bold;
    }
  }
}
</style>
