<template>
  <div class="custom-upload">
    <el-dialog
        title="图片裁剪"
        :visible.sync="showCropper"
        width="50%"
        height="600"
        class="cropper-dialog"
        center
        append-to-body
    >
      <vue-cropper
          v-if="showCropper"
          id="corpper"
          ref="cropper"
          :class="{'corpper-warp':showCropper}"
          v-bind="cropper"
      />
      <div v-if="showCropper" class="cropper-button">
        <el-button class="cancel-btn" size="small" @click.native="showCropper=false">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" @click="uploadCover">完成</el-button>
      </div>
    </el-dialog>
    <input
        :id="id"
        type="file"
        style="display: none"
        name="single"
        accept="image/*"
        @change="onChange($event)"
    />

    <el-button size="small" type="primary" :loading="loading" @click="handleOpenFile()">
      <i class="fa fa-upload"/>
      {{ buttonName }}
    </el-button>
    <div v-if="tips" class="tips clear-margin-top">{{ tips }}</div>
  </div>
</template>

<script>
import * as qiniu from 'qiniu-js';
// 上传文件组件
import {VueCropper} from 'vue-cropper'

// 定义的接口根据自己项目更换
// import {uploadImage} from '@/api/upload'
//grpc参数对象
import {
  DefaultRequest,
  QiNiuTokenReply
} from "@/grpc/base_pb";


import {isImageFile, isMaxFileSize, readFile} from '@/utils/upload'   // 见下文
let qs = require('qs');
export default {
  components: {
    VueCropper
  },
  props: {
    // 最大上传文件的大小
    maxFileSize: {
      type: Number,
      default: 50 // （MB)
    },
    // 按钮文字
    buttonName: {
      type: String,
      default: '添加图片'
    },
    // 提示内容
    tips: {
      type: String
    },
    // 图片裁剪比列
    fixedNumber: {
      type: Array,
      default: function () {
        return []
      }
    },
    // 图片文件分辨率的宽度
    width: {
      type: Number,
      default: 460
    },
    // 图片文件分辨率的高度
    height: {
      type: Number,
      default: 300
    }
  },
  data() {
    return {
      imageUrl: '',
      token: {},
      // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
      // domain: 'https://up-z1.qiniup.com',
      // 这是七牛云空间的外链默认域名
      // qiniuaddr: 'qjzpcd34v.hb-bkt.clouddn.com',
      // domain: 'https://up-z1.qiniup.com', // 这是七牛云空间的外链默认域名
      domain: 'https://up-z1.qiniup.com', // 这是七牛云空间的外链默认域名
      qiniuaddr: 'xhead.beswell.com',//xhead.beswell.com 旧的 qjzpcd34v.hb-bkt.clouddn.com
      id: 'cropper-input-' + +new Date(),
      loading: false,
      showCropper: false,
      cropper: {
        img: '',
        info: true,
        size: 0.9,
        outputType: 'png',
        canScale: true,
        autoCrop: true,
        full: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: this.width,
        autoCropHeight: this.height,
        fixedBox: false,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: this.fixedNumber,
        canMoveBox: true,
        canMove: true,
        outputSize: 1, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        full: true, // 是否输出原图比例的截图
        info: true, // 图片大小信息
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
        canMove: true, // 上传图片是否可以移动
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: false, // 是否开启截图框宽高固定比例
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        height: true,
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        enlarge: 1, // 图片根据截图框输出比例倍数
        mode: 'container', // 图片默认渲染方式
        maxImgSize: 375 // 限制图片最大宽度和高度
      }
    }
  },
  methods: {
    // 打开文件
    handleOpenFile() {
      const input = document.getElementById(this.id)
      // 解决同一个文件不能监听的问题
      input.addEventListener(
          'click',
          function () {
            this.value = ''
          },
          false
      )
      // 点击input
      input.click()
    },

    // 裁剪input 监听1
    async onChange(e) {
      let file = e.target.files[0];
      console.log(file);
      if (!file) {
        console.log('选择图片失败');
        return false
      }
      // 验证文件类型
      if (!isImageFile(file)) {
        return
      }
      try {
        // 读取文件
        const src = await readFile(file)
        this.showCropper = true
        this.cropper.img = src
      } catch (error) {
        console.log(error)
      }
    },

    // 封面上传功能
    uploadCover() {
      this.$refs.cropper.getCropBlob(async imgRes => {
        try {
          // 文件大小限制
          if (!isMaxFileSize(imgRes, this.maxFileSize)) {
            return
          }
          this.loading = true
          // this.$emit('subUploadSucceed', url);
          console.log(imgRes);
          // 上传图片
          this.upqiniu(imgRes);
          this.loading = false
          this.showCropper = false
        } catch (error) {
          this.loading = false
          this.showCropper = false
          console.log(error);
        }
      })
    },
    // 上传文件到七牛云
    upqiniu(req) {
      let that = this;
      const config = {
        headers: {'Content-Type': 'multipart/form-data'}
      };
      let filetype = 'jpg';
      // 重命名要上传的文件
      const keyname = 'GoAllOut' + new Date().valueOf() + Math.floor(Math.random() * 100) + '.' + filetype;
      // 从后端获取上传凭证token
      let getRequest = new DefaultRequest();
      let reply = new QiNiuTokenReply();
      that.client.getSimpleQiNiuToken(getRequest, {"Token": localStorage.token}, (err, reply) => {
        if (err == null) {
            const formdata = new FormData();
            formdata.append('file', req);
            formdata.append('token', reply.getToken());
            formdata.append('key', keyname);
            // 获取到凭证之后再将文件上传到七牛云空间
            this.axios.post(this.domain, formdata, config).then(res => {
              this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
              this.$emit('subUploadSucceed', this.imageUrl)
            })
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    }
  }
}
</script>

<style scoped>
#corpper {
  width: 90%;
  height: 400px;
  margin: 0 auto;
  background-image: none;
  background: #fff;
  z-index: 1002;
}

.cropper-dialog {
  height: 800px;
  text-align: center;
}

.el-dialog__header {
  padding-top: 15px;
}

.el-dialog--center .el-dialog__body {
  padding-top: 0;
  padding-bottom: 15px;
}

.el-dialog {
  text-align: center;
}

.cropper-button {
  z-index: 1003;
  text-align: center;
  margin-top: 20px;
}

.el-button {
  font-size: 16px;
  cursor: pointer;
  text-align: center;
}

.cancel-btn {
  color: #373737;
}

.el-button:last-child {
  margin-left: 0px;
}

.cropper-modal {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.custom-upload .tips {
  margin-top: 10px;
  color: red;
  font-size: 12px;
}

.custom-upload.clear-margin-top {
  margin-top: 0;
}
</style>
