
<template>
  <a-modal
    :visible="visible"
    title="裁剪图片"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    destoryOnClose
    :width="1200"
    @cancel="cancelHandel"
  >
    <a-row>
      <a-col :span="12" :style="{ height: '500px' }">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :info="options.info"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixedBox="options.fixedBox"
          :fixed="options.fixed"
          :fixedNumber="options.fixedNumber"
          :outputSize="options.outputSize"
          :outputType="options.outputType"
          :full="options.full"
          :canMoveBox="options.canMoveBox"
          :original="options.original"
          :centerBox="options.centerBox"
          :infoTrue="options.infoTrue"
          :canScale="options.canScale"
          :maxImgSize="options.maxImgSize"
          :enlarge="options.enlarge"
          :mode="options.mode"
          :height="options.height"
          @realTime="realTime"
          @imgLoad="onLoadCropper"
        >
        </vue-cropper>
      </a-col>
      <a-col :span="1"></a-col>
      <a-col :span="11" :style="{ height: '500px', 'overflow': 'hidden' }">
        <div class="avatar-upload-preview" :style="previews.div">
          <img :src="previews.url" :style="previews.img"/>
        </div>
      </a-col>
    </a-row>
    <br>
    <a-row>
      <a-col :lg="{span: 1, offset: 2}" :md="2">
        <a-button icon="plus" @click="changeScale(1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="minus" @click="changeScale(-1)"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="undo" @click="rotateLeft"/>
      </a-col>
      <a-col :lg="{span: 1, offset: 1}" :md="2">
        <a-button icon="redo" @click="rotateRight"/>
      </a-col>
    </a-row>
    <!-- 比例-按钮 -->
    <a-row style='margin-top: 20px;margin-left: 8.33333333%;' v-show='isRatio'>
      <a-radio-group v-model='ratio' button-style="solid" @change="onChange">
        <a-radio-button :value="1">
          正方形
        </a-radio-button>
        <a-radio-button :value="4">
          4 : 3
        </a-radio-button>
        <a-radio-button :value="5">
          5 : 4
        </a-radio-button>
        <a-radio-button :value="16">
          16 : 9
        </a-radio-button>
        <a-radio-button :value="0">
          自定义
        </a-radio-button>
      </a-radio-group>
    </a-row>

    <template slot="footer">
      <a-button key="back" @click="cancelHandel">取消</a-button>
      <a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel('blob')">保存</a-button>
    </template>

  </a-modal>
</template>
<script>
import { VueCropper } from 'vue-cropper'
  export default {
    components: {
      VueCropper
    },
    props: {},
    data () {
      return {
        visible: false,
        img: null,
        confirmLoading: false,
        options: {
          img: '', // 裁剪图片的地址
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 252, // 默认生成截图框宽度
          autoCropHeight: 140, // 默认生成截图框高度
          fixedBox: false, // 固定截图框大小 不允许改变
          info: true, // 裁剪框的大小信息
          outputSize: 1, // 裁剪生成图片的质量
          outputType: 'png', // 裁剪生成图片的格式
          canScale: true, // 图片是否允许滚轮缩放
          fixed: false, // 是否开启截图框宽高固定比例
          fixedNumber: [1, 1], // 截图框的宽高比例
          full: true, // 是否输出原图比例的截图
          canMoveBox: true, // 截图框能否拖动
          original: true, // 上传图片按照原始比例渲染
          centerBox: false, // 截图框是否被限制在图片里面
          infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          // maxImgSize: 475,
          enlarge: 1 // 图片根据截图框输出比例倍数
          // mode: '230px 150px', // 图片默认渲染方式
          // height: true
        },
        previews: {},
        imgWidth: 0, // 图片的实际宽
        imgHeight: 0, // 图片的实际高
        ratio: 4, // 默认比例 4:3
        isRatio: true
      }
    },
    watch: {
    },
    created () {},
    methods: {
      // 初始化工具
      onLoadCropper (msg) {
        // console.log(msg)
      },
      // 是否开启截图框宽高固定比例
      onChange (e) {
        const _this = this
        _this.ratio = e.target.value
        _this.options.autoCropHeight = 0
        // 判断是否是 - 自定义
        if (_this.ratio) {
          _this.compute()
          this.options.fixed = true
        } else {
          this.options.fixed = false
        }
      },
      // 比例计算
      compute () {
        const _this = this
        switch (_this.ratio) {
          case 1:
            _this.options.fixedNumber = [1, 1]
            _this.options.autoCropHeight = _this.imgWidth
            break
          case 4:
            _this.options.fixedNumber = [4, 3]
            _this.options.autoCropHeight = _this.imgWidth / 4 * 3
            break
          case 5:
            _this.options.fixedNumber = [5, 4]
            _this.options.autoCropHeight = _this.imgWidth / 5 * 4
            break
          case 16:
            _this.options.fixedNumber = [16, 9]
            _this.options.autoCropHeight = _this.imgWidth / 16 * 9
            break
        }
        _this.$forceUpdate()
      },
      // 初始化当前截图工具
      edit (record, cropperOptions, callback) {
        console.log(cropperOptions)
        var { options } = this
        this.visible = true
        this.options = Object.assign({}, options, record)
        this.ratio = typeof cropperOptions.ratio === 'undefined' ? 4 : cropperOptions.ratio
        this.isRatio = typeof cropperOptions.isRatio === 'undefined' ? true : cropperOptions.isRatio
        if (cropperOptions.ratio === 0) this.options.fixed = false
        this.$nextTick(() => { setTimeout(() => { callback() }, 500) })
      },
      // 关闭
      cancelHandel () {
        this.$refs.cropper.clearCrop()
        this.visible = false
      },
      // 确定
      okHandel (type) {
        const _this = this
        // 输出
        if (type === 'blob') {
          _this.$refs.cropper.getCropData((data) => {
            _this.$emit('ok', data)
            _this.cancelHandel()
          })
          // 获取截图的blob数据
          // _this.$refs.cropper.getCropBlob((data) => {
          //   // do something
          //   _this.$emit('ok', data)
          //   _this.cancelHandel()
          // })
        }
      },
      // 下载输入框里的图片
      downloadNewImg () {
        // 获取截图的blob数据
        this.$refs.cropper.getCropBlob((data) => {
          // Utils.blob2Base64(data).then(res=>{
          //   Utils.downLoadImage(res, '测试的哟')
          // })
        })
      },
      // 移动框的事件
      realTime (data) {
        const _this = this
        _this.previews = data
        _this.imgWidth = parseInt(data.img.width)
        _this.imgHeight = parseInt(data.img.height)
        _this.options.autoCropWidth = _this.imgWidth
        _this.compute()
      },
      // 放大缩小
      changeScale (num) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      },
      // 左旋
      rotateLeft () {
        this.$refs.cropper.rotateLeft()
      },
      // 右旋
      rotateRight () {
        this.$refs.cropper.rotateRight()
      }
    }
  }
</script>

<style scoped>
  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  .avatar-upload-preview img {
    width: 100%;
    height: 100%;
  }
</style>
