<script lang="ts" setup>
import type { GlobalThemeOverrides, UploadCustomRequestOptions } from 'naive-ui'
import { computed, ref } from 'vue'
import { useElementHover } from '@vueuse/core'
import { useThemeVars } from 'naive-ui'
import { upload } from '@/api/home/main'
import { getImgUrl } from '@/utils/urlUtils'

defineOptions({ name: 'Upload' })

const props = defineProps<{
  value: string
}>()

const emit = defineEmits<{
  (e: 'update:value', value: string): void
}>()

const figureUrl = ref(props.value)

async function customRequest(data: UploadCustomRequestOptions) {
  const result = await upload({ file: data.file.file as any })
  const imgUrl = getImgUrl(result.data)
  figureUrl.value = imgUrl
  emit('update:value', result.data)
}

const showFigure = computed(() => {
  return figureUrl.value !== ''
})

const figureRef = ref<HTMLDivElement | null>()
const figureHovered = useElementHover(figureRef)
const imageRef = ref<ComponentElRef | null>()

function clearHandler(event: MouseEvent) {
  event.stopImmediatePropagation()
  event.stopPropagation()
  figureUrl.value = ''
}

function previewHandler(event: MouseEvent) {
  event.stopImmediatePropagation()
  event.stopPropagation()

  if (imageRef.value)
    (imageRef.value as any).mergedOnClick()
}

const imageGroupThemeOverrides = computed(() => {
  const { popoverColor, boxShadow2, textColor2, borderRadius }
    = useThemeVars().value
  const themeOverrides: NonNullable<GlobalThemeOverrides['Image']> = {
    toolbarColor: popoverColor,
    toolbarBoxShadow: boxShadow2,
    toolbarIconColor: textColor2,
    toolbarBorderRadius: borderRadius,
  }
  return themeOverrides
})
</script>

<template>
  <n-space>
    <n-upload directory-dnd :show-file-list="false" accept=".png,.jpg,.bmp" :custom-request="customRequest">
      <n-upload-dragger class="wrapper">
        <div v-show="!showFigure" class="wrapper-dragger">
          <SvgIcon size="30" name="upload" />
          <span class="wrapper-tip1">点击拖拽</span>
          <span class="wrapper-tip2">上传格式为：.png .jpg .bmp 20M以内</span>
        </div>
        <div v-show="showFigure" ref="figureRef" class="wrapper-figure">
          <n-image ref="imageRef" :theme-overrides="imageGroupThemeOverrides" width="288" height="116" :src="figureUrl" />
          <div v-show="figureHovered" class="wrapper-figure-tools">
            <SvgIcon size="28" name="view" @click="previewHandler" />
            <div class="wrapper-figure-line" />
            <SvgIcon size="28" name="delete" @click="clearHandler" />
          </div>
        </div>
      </n-upload-dragger>
    </n-upload>
  </n-space>
</template>

<style lang="less" scoped>
.wrapper {
  width: 288px;
  height: 116px;
  padding: 12px;
  box-sizing: border-box;
  margin-top: 10px;
  background: rgba(202, 210, 221, 0.10);
  border-radius: 2px;

  &-dragger {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &-tip1 {
    font-size: 12px;
    color: #666666;
    line-height: 24px;
    margin-top: 5px;
  }

  &-tip2 {
    font-size: 11px;
    color: #999999;
    line-height: 22px;
    margin-top: 5px;
  }

  &-figure {
    width: 100%;
    height: 100%;
    display: inline-block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;

    &-tools {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color:rgba(102, 102, 102, 0.2)
    }

    &-line {
      height: 28px;
      width: 2px;
      background-color: #fff;
      margin: 0px 15px;
    }
  }
}
</style>
