<template>
  <vue-cropper
    :containerStyle="{ height: '100vh' }"
    :imgStyle="{ height: '100%', display: 'none' }"
    ref="cropper"
    :src="imgSrc"
    alt="Source Image"
    @ready="ready"
  ></vue-cropper>
  <button
    class="fixed bottom-5 left-8 z-10 px-4 py-2 text-white text-base"
    @click="$router.back()"
  >
    取消
  </button>
  <button
    @click="clickCrop"
    class="fixed bottom-5 right-8 z-10 rounded-lg px-4 py-2 bg-green-600 text-white text-base"
  >
    确定
  </button>
</template>

<script lang="ts" setup>
import VueCropper, { VueCropperMethods } from 'vue-cropperjs'
import 'cropperjs/dist/cropper.css'
import { ref } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'

const cropper = ref<VueCropperMethods>()

// const imgSrc = 
//   'https://upload.jianshu.io/users/upload_avatars/4515180/f63fc045-482d-403c-96a6-8ea5167522c6.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120'
const imgSrc =
  'https://cn.bing.com/th?id=OHR.LivrariaLello_EN-CN3399107740_1920x1080.jpg&rf=LaDigue_1920x1080.jpg'

onMounted(() => {
  cropper.value?.setAspectRatio(1)
  cropper.value?.setDragMode('move')
})

const ready = () => {
  //   console.log('ready')
}

const clickCrop = () => {
  const theCropper = cropper.value
  if (!theCropper) return
  theCropper.getCroppedCanvas().toBlob((blob) => {
    const ele = document.createElement('a')
    ele.target = '_self'
    const url = URL.createObjectURL(blob)
    ele.href = url
    ele.download = 'a.png'
    document.body.appendChild(ele)
    ele.click()
    ele.remove()
    URL.revokeObjectURL(url)
  })
}
</script>
