<script setup lang="ts">
import { ImageCropping } from '@/components/ImageCropping'
import { ref, unref } from 'vue'

defineProps({
  url: {
    type: String,
    default: ''
  }
})

const fileUrl = ref('')

const CropperRef = ref<ComponentRef<typeof ImageCropping>>()

const getBase64 = (type: string = '') => {
  if (type) {
    return unref(CropperRef)?.cropperExpose?.getCroppedCanvas()?.toDataURL(type) ?? ''
  } else {
    return unref(CropperRef)?.cropperExpose?.getCroppedCanvas()?.toDataURL() ?? ''
  }
}
defineExpose({
  getBase64
})
</script>

<template>
  <div>
    <ImageCropping ref="CropperRef" :image-url="fileUrl || url" />
  </div>
</template>
