import { defineComponent } from 'vue'
import styles from './index.module.less'
import { VueCropper } from 'vue-cropper'
import umiRequest from 'umi-request'
import 'vue-cropper/dist/index.css'
import {
  ElButton,
  ElCol,
  ElDialog,
  ElIcon,
  ElImage,
  ElMessage,
  ElRow
} from 'element-plus'
import { CirclePlus, Remove } from '@element-plus/icons-vue'
import iconRate from '../col-upload/images/icon_rate.png'
import request from '@/helpers/request'

export default defineComponent({
  name: 'cropper',
  props: {
    cropperNo: {
      type: Function,
      default: (data: any) => {}
    },
    cropperOk: {
      type: Function,
      default: (data: any) => {}
    },
    bucket: {
      type: String,
      default: 'daya'
    }
  },
  data() {
    return {
      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        KSSAccessKeyId: '',
        acl: 'public-read',
        name: ''
      },
      visible: false,
      img: null,
      options: {
        img: '', //裁剪图片的地址
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: 180, //默认生成截图框宽度
        autoCropHeight: 180, //默认生成截图框高度
        fixedBox: true, //是否固定截图框大小 不允许改变
        full: false,
        enlarge: 1, // 是否按照截图框比例输出 默认为1
        previewsCircle: true, //预览图是否是原圆形
        centerBox: true,
        outputType: 'png',
        title: '修改头像',
        name: null // 文件名称
      },
      previews: {} as any,
      url: {
        upload: '/sys/common/saveToImgByStr'
      },
      submitLoading: false
    }
  },
  methods: {
    edit(record: any) {
      const { options } = this
      this.visible = true
      this.options = Object.assign({}, options, record)
      console.log(this.options)
    },
    /**
     * 取消截图
     */
    cancelHandel() {
      this.visible = false
      this.cropperNo()
    },
    /**
     * 确认截图
     */
    okHandel() {
      ;(this as any).$refs.cropperRef.getCropBlob(async data => {
        this.submitLoading = true
        const options: any = this.options
        const fileName =
          (options.name ? options.name.split('.')[0] : +new Date()) + '.png'
        try {
          let key = new Date().getTime() + fileName
          let obj = {
            filename: fileName,
            bucketName: this.bucket,
            postData: {
              filename: fileName,
              acl: 'public-read',
              key: key,
              unknowValueField: []
            }
          }
          const res = await request.post('/api-website/getUploadSign', {
            data: obj
          })
          this.dataObj = {
            policy: res.data.policy,
            signature: res.data.signature,
            key: key,
            KSSAccessKeyId: res.data.kssAccessKeyId,
            acl: 'public-read',
            name: fileName
          }

          let formData = new FormData()
          for (let key in this.dataObj) {
            formData.append(key, this.dataObj[key])
          }
          formData.append('file', this.blobToFile(data, fileName), fileName)
          await umiRequest(this.ossUploadUrl, {
            method: 'POST',
            data: formData
          })
          console.log(this.ossUploadUrl + '/' + key)
          const uploadUrl = this.ossUploadUrl + '/' + key
          this.cropperOk(uploadUrl)
        } catch (err: any) {
          ElMessage.error(err)
        } finally {
          this.submitLoading = false
          this.cancelHandel()
        }
      })
    },
    //转成blob
    blobToFile(Blob: any, fileName: any) {
      //兼容IE
      Blob.lastModifiedDate = new Date()
      Blob.name = fileName
      return Blob
    },
    base64ToFile(urlData: any, fileName: any) {
      let arr = urlData.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bytes = atob(arr[1]) // 解码base64
      let n = bytes.length
      let ia = new Uint8Array(n)
      while (n--) {
        ia[n] = bytes.charCodeAt(n)
      }
      return new File([ia], fileName, { type: mime })
    },
    //移动框的事件
    realTime(data: any) {
      this.previews = data
    },
    //图片缩放
    changeScale(num: number) {
      num = num || 1
      ;(this as any).$refs.cropperRef.changeScale(num)
    },
    //向左旋转
    rotateLeft() {
      ;(this as any).$refs.cropperRef.rotateLeft()
    },
    //向右旋转
    rotateRight() {
      ;(this as any).$refs.cropperRef.rotateRight()
    }
  },
  render() {
    return (
      <ElDialog
        modelValue={this.visible}
        onUpdate:modelValue={val => (this.visible = val)}
        appendToBody
        title={this.options.title}
        closeOnClickModal={false}
        width={'900px'}
        v-slots={{
          footer: () => (
            <span class="dialog-footer !text-center block">
              <ElButton
                onClick={this.cancelHandel}
                disabled={this.submitLoading}
              >
                取消
              </ElButton>
              <ElButton
                type="primary"
                onClick={this.okHandel}
                loading={this.submitLoading}
              >
                保 存
              </ElButton>
            </span>
          )
        }}
      >
        <ElRow>
          <ElCol xs={24} md={12} style={{ width: '350px' }}>
            <VueCropper
              ref="cropperRef"
              img={this.options.img}
              info={true}
              autoCrop={this.options.autoCrop}
              autoCropWidth={this.options.autoCropWidth}
              full={this.options.full}
              outputType={this.options.outputType}
              autoCropHeight={this.options.autoCropHeight}
              fixedBox={this.options.fixedBox}
              enlarge={this.options.enlarge}
              onRealTime={this.realTime}
              style={{ height: '350px' }}
            />
            <div class="flex pt-2">
              <div
                onClick={() => {
                  this.changeScale(1)
                }}
                class="mr-2 cursor-pointer"
                title="放大"
              >
                <ElIcon size={30} color="#333">
                  <CirclePlus />
                </ElIcon>
              </div>
              <div
                onClick={() => {
                  this.changeScale(-1)
                }}
                class="mr-2 cursor-pointer"
                title="缩小"
              >
                <ElIcon size={30} color="#333">
                  <Remove />
                </ElIcon>
              </div>
              <div
                onClick={this.rotateRight}
                title="向右旋转"
                class="cursor-pointer"
              >
                <img src={iconRate} class="w-[30px] h-[30px]" />
              </div>
            </div>
          </ElCol>
          <ElCol xs={24} md={12} style={{ height: '350px' }}>
            <div class={styles.previewImg}>
              <span>预览图片</span>
              <div
                class={
                  this.options.previewsCircle
                    ? styles['avatar-upload-preview']
                    : styles['avatar-upload-preview_range']
                }
                style={{
                  width: this.options.autoCropWidth + 'px',
                  height: this.options.autoCropHeight + 'px'
                }}
              >
                <ElImage src={this.previews.url} style={this.previews.img} />
              </div>
            </div>
          </ElCol>
        </ElRow>
      </ElDialog>
    )
  }
})
