<template>
  <div style="height: calc(100vw * 0.59)" class="w-full">
    <div
      v-if="!bannerUrl"
      class="flex relative h-full w-full items-center justify-center bg-[url('~/assets/img/note-create/note_create_banner_bg.png')]"
    >
      <div
        @click="handleSelectImage"
        class="flex absolute bottom-10 right-10 h-40 w-150 active:bg-[#000]/[0.1] bg-[#000]/[0.2] items-center justify-center space-x-10 rounded-full"
      >
        <div class="w-16 h-16">
          <van-image width="100%" height="100%" :src="icon_image_fill" />
        </div>
        <span class="text-sm font-normal pt-4 text-white">设置游记头图</span>
      </div>
    </div>

    <div v-else class="relative h-full w-full">
      <img :src="bannerUrl" class="h-full w-full" alt="" />
      <div
        @click="open"
        class="absolute rounded-full bottom-10 right-10 flex cursor-pointer items-center space-x-8 bg-[#00000080] px-15 py-8 hover:opacity-90"
      >
        <div class="w-16 h-16">
          <van-image width="100%" height="100%" :src="image" />
        </div>

        <span class="text-sm text-white">重新上传头图</span>
      </div>
    </div>

    <div
      v-if="showCropper"
      style="z-index: 200; position: fixed"
      class="border top-0 left-0 w-[100vw] h-[100vh] bg-[#000]"
    >
      <vueCropper
        ref="cropperRef"
        :autoCrop="true"
        high
        :info="false"
        fixed
        canMove
        canScale
        :outputSize="1"
        centerBox
        mode
        fixedBox
        maxImgSize="max"
        original
        :full="true"
        :infoTrue="true"
        :fixedNumber="[393, 195]"
        :img="cropperImageBase64"
      ></vueCropper>

      <div class="relative">
        <div @click="showCropper = false" class="absolute bottom-20 left-20 z-210">
          <van-icon name="cross" size="20" color="#fff" />
        </div>
        <div @click="handleCropperOk" class="absolute bottom-20 right-20 z-210">
          <van-icon name="success" size="20" color="#fff" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useFileDialog } from '@vueuse/core'
import icon_image_fill from '~/assets/img/note-create/icon-image-fill.png'
import image from '~/assets/img/note-create/image.svg'

import { VueCropper } from 'vue-cropper'
import 'vue-cropper/dist/index.css'

const bannerUrl = defineModel('bannerUrl')
const { open, onChange } = useFileDialog({
  accept: '.png,.png,.jpeg,.JPG,Png '
})

const cropperImageBase64 = ref('')

const cropperRef = ref(null)
const showCropper = ref(false)

function handleSelectImage() {
  open()
}

onChange((files) => {
  if (!files.length) return
  const reader = new FileReader()
  reader.readAsDataURL(files[0])

  reader.onload = () => {
    cropperImageBase64.value = reader.result

    showCropper.value = true
  }
})

async function handleCropperOk() {
  cropperRef.value?.getCropBlob(async (data) => {
    try {
      // 此处需上传图片，保存URL
      const formData = new FormData()
      formData.append('uploadFile', data)
      formData.append('asImage', true)
      formData.append('fieldName', 'travelNotesBanner')
      showLoadingToast({
        message: '图片上传中...',
        duration: 1000000
      })

      const res = await request('/admin/app/tourismProjectTravelNotesWrite/upload', {
        method: 'post',
        body: formData
      })

      bannerUrl.value = res.data.fileUrl
      closeToast()
      showCropper.value = false
    } catch (error) {
      closeToast()
      showToast('图片上传失败')
      console.log(error)
    } finally {
    }
  })
}
</script>

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