<template>
  <CtDialog
    :visible="isShowModal"
    :widthType="1"
    titleClass="text-h6"
    title="图片裁剪"
    :footer="true"
    submitText="裁剪"
    @close="cancel"
    @submit="getResult"
  >
    <!-- <div class="text-end"> -->
      <!-- <v-btn color="error" @click="cancel"><v-icon left>mdi-close</v-icon> 取 消</v-btn> -->
      <!-- <v-btn v-if="showClear" class="mx-3" color="warning" @click="clear"><v-icon left>mdi-trash-can-outline</v-icon> 清 除</v-btn> -->
      <!-- <v-btn color="primary" @click="getResult"><v-icon left>mdi-crop</v-icon> 裁 剪</v-btn> -->
    <!-- </div> -->
    <div class="modal-content">
      <VuePictureCropper :img="pic" @ready="ready" :boxStyle="corpBoxStyle" :options="corpOptions" :presetMode="corpPresetMode" />
    </div>
  </CtDialog>
</template>

<script setup>
defineOptions({ name: 'ImgCorpper' })
import { reactive, ref, watch, computed } from 'vue'
import VuePictureCropper, { cropper } from 'vue-picture-cropper'
import { PhotoCompress } from "@/utils/compressUtil.js"

const props = defineProps({
  visible: {
    type: Boolean
  },
  image: {
    type: [String, File]
  },
  presetMode: {
    type: Object
  },
  options: {
    type: Object
  },
  boxStyle: {
    type: Object
  },
  showClear: { // 是否显示 Clear 按钮
    type: Boolean,
    default: true
  },
  showReset: { // 是否显示 Reset 按钮
    type: Boolean,
    default: true
  },
  isCompress: { // 是否压缩裁剪后的图片大小
    type: Boolean,
    default: true
  },
  // 压缩图片大小限制
  maxSize: {
    type: Number,
    default: 0.3 * 1024 * 1024
  },
  minSize: {
    type: Number,
    default: 0.03 * 1024 * 1024
  },
  cropBoxResizable: {
    type: Boolean,
    default: false
  },
  aspectRatio: {
    type: Number,
    default: 16 / 9
  }
})

/** 裁剪组件属性配置 */
const corpOptions = computed(() => {
  return {
    viewMode: 1, // 裁剪框范围 1-只能在图片区域内活动
    dragMode: 'move', // 可选值 crop(可绘制裁剪框) | move(仅移动)
    aspectRatio: props.aspectRatio,// 裁剪框的宽高比
    cropBoxResizable: props.cropBoxResizable, // 是否可以调整裁剪区的大小
    ...props.options
  }
})
/** 裁剪区域的样式 */
const corpBoxStyle = computed(() => {
  return {
    width: 'auto',
    height: '600px',
    backgroundColor: '#f8f8f8',
    margin: 'auto',
    ...props.boxStyle
  }
})

/** 预设模式配置 */
const corpPresetMode = computed(() => {
  return {
    mode: 'fixedSize', width: 300, height: 300,
    ...props.presetMode
  }
})
const emits = defineEmits(["close", 'submit'])

watch(() => props.visible, (val) => {
  isShowModal.value = val
  if (!val) {
    pic.value = ''
    result.dataURL = ''
    result.blobURL = ''
    reset()
  }
})

watch(() => props.image, (val) => {
  pic.value = val
})

const isShowModal = ref(false)
const pic = ref('')
let result = reactive({
  dataURL: '',
  blobURL: '',
})

/**
 * Get cropping results
 */
async function getResult() {
  if (!cropper) return
  const base64 = cropper.getDataURL()
  const blob = await cropper.getBlob()
  if (!blob) return

  let file = await cropper.getFile({
    fileName: "locales.fileName",
  })

  result.dataURL = base64
  result.blobURL = URL.createObjectURL(blob)
  // 是否限制文件大小
  if (props.isCompress && (file.size > props.maxSize)) {
    const photoCompress = new PhotoCompress(props.minSize, props.maxSize);
    photoCompress.compress(file, function (f) {
      const r = new FileReader()
      r.readAsDataURL(f)
      r.onload = function () {
        emits("submit", { result, file: f })
      }
    });
  } else {
    // console.log("crop")
    emits("submit", { result, file })
  }
}

/**
 * Clear the crop box
 */
// function clear() {
//   if (!cropper) return
//   cropper.clear()
// }

/**
 * Reset the default cropping area
 */
function reset() {
  if (!cropper) return
  cropper.reset()
}

/**
 * The ready event passed to Cropper.js
 */
function ready() {
  // console.log('Cropper is ready.')
}

function cancel() {
  isShowModal.value = false
  pic.value = ''
  result = {
    dataURL: '',
    blobURL: ''
  }
  emits("close")
}
</script>

<style lang="scss" scoped>
</style>
