<script setup lang="ts">
import { close } from '../../../../core/libs/svgs'
import { HonorDialogOptions, HonorDialogSymbol, HonorDialogType } from '.'
import earnBadgeTitle from '@designer-hub/assets/src/libs/assets/earnBadgeTitle'
import radiation from '@designer-hub/assets/src/libs/assets/radiation'
import { NetImages } from '@/core/libs/net-images'
import { ConfigProviderThemeVars } from 'wot-design-uni'
import { useRouter } from '@/core/utils/router'
import earnCertificate from '@designer-hub/assets/src/libs/assets/earnCertificate'
import envelopeFront from '@designer-hub/assets/src/libs/assets/envelopeFront'
import envelopeBack from '@designer-hub/assets/src/libs/assets/envelopeBack'
import ribbonTl from '@designer-hub/assets/src/libs/assets/ribbonTl'
import ribbonBr from '@designer-hub/assets/src/libs/assets/ribbonBr'

const dialogOption = inject(HonorDialogSymbol, ref<HonorDialogOptions>({}))
const { push } = useRouter()
const lazyRender = ref<boolean>(true)
const modelValue = defineModel({ default: false, type: Boolean })
const themeVars: ConfigProviderThemeVars = {
  overlayBg: 'rgba(0,0,0,0.85)',
}
const title = ref('东方研习营')
const content = ref('获得东方研习营游学徽章')
const path = ref('')
const src = ref(
  'https://image.zhuchaohui.com/zhucaohui/e104215c64d39e4a0f8676c48b8e7221c891eade1c8d7f02b2a7f0be862e3f76.png',
)
const isBadge = computed(() => dialogOption.value?.type === HonorDialogType.Badge)
const isCertificate = computed(() => dialogOption.value?.type === HonorDialogType.Certificate)
const reset = (option) => {
  if (option) {
    modelValue.value = option.show
    lazyRender.value = option.lazyRender
    title.value = option.title || '东方研习营'
    content.value = option.content || '获得东方研习营游学徽章'
    path.value = option.path || ''
    src.value = option.image || src.value
  }
}
const jumpTo = () => {
  if (dialogOption.value?.type && dialogOption.value?.type === 'certificate') {
    push('/pages/mine/honors/index?active=certificate')
  }
  if (dialogOption.value?.type && dialogOption.value?.type === 'badge') {
    push('/pages/mine/honors/index?active=badge')
  }
  modelValue.value = false
}
const handleLoad = () => {
  console.log(1111)
  if (dialogOption.value?.onLoad && typeof dialogOption.value?.onLoad === 'function') {
    dialogOption.value.onLoad()
  }
}
watch(
  () => dialogOption.value,
  (newVal) => {
    reset(newVal)
  },
)
// provide(HonorDialogSymbol, { show })
</script>
<template>
  <wd-config-provider :themeVars="themeVars">
    <wd-popup
      v-model="modelValue"
      :lazy-render="lazyRender"
      custom-class="bg-transparent! bg-[#f6f6f6]!"
    >
      <div class="flex flex-col items-center relative">
        <wd-img
          width="60vw"
          mode="widthFix"
          :src="isBadge ? earnBadgeTitle : earnCertificate"
        ></wd-img>
        <div v-if="isBadge" class="w-[100vw] h-[68vw] pt-2 flex">
          <div class="w-100vw h-100vw absolute left-0 right-0 top--8">
            <wd-img
              v-if="isBadge"
              custom-class="absolute! top-50% left-50% translate-[-50%,-50%] vertical-bottom"
              width="68%"
              height="68%"
              :src="radiation"
            ></wd-img>
            <wd-img
              custom-class="absolute! left-16 top-4 vertical-bottom"
              width="58vw"
              mode="widthFix"
              :src="NetImages.Stars"
            ></wd-img>
            <wd-img
              v-if="isBadge"
              custom-class="absolute! ma-a top-50% left-50% translate-[-50%,-50%]  vertical-bottom blur-60"
              width="40vw"
              mode="widthFix"
              :src="src"
            ></wd-img>
            <wd-img
              v-if="isBadge"
              custom-class="absolute! ma-a top-50% left-50% translate-[-50%,-50%]  vertical-bottom"
              width="40vw"
              mode="widthFix"
              @load="handleLoad"
              :src="src"
            ></wd-img>
          </div>
        </div>
        <div v-if="isCertificate" class="relative mb-16">
          <wd-img
            v-if="isCertificate"
            custom-class="absolute! bottom-0 left-7.5vw vertical-bottom"
            width="85%"
            mode="widthFix"
            :src="envelopeBack"
          ></wd-img>
          <wd-img
            custom-class="absolute! left-12 top--4 vertical-bottom"
            width="58vw"
            mode="widthFix"
            :src="NetImages.Stars"
          ></wd-img>
          <div class="w-[100vw] center">
            <wd-img
              v-if="isCertificate"
              custom-class="mt-9.5 mb-22 vertical-bottom"
              width="80vw"
              mode="widthFix"
              @load="handleLoad"
              :src="src"
            ></wd-img>
          </div>
          <wd-img custom-class="absolute! top-0 left-0" width="114" height="114" :src="ribbonTl" />
          <wd-img
            v-if="isCertificate"
            custom-class="absolute! bottom-0 left-7.5vw vertical-bottom"
            width="85vw"
            mode="widthFix"
            :src="envelopeFront"
          ></wd-img>
          <wd-img
            custom-class="absolute! bottom-0 right-0"
            width="76"
            height="56"
            :src="ribbonBr"
          />
          <div class="absolute bottom-0 left-50% translate-[-50%,-50%]">
            <div
              class="w-[115.50px] h-[41.16px] bg-gradient-to-r from-[#f2b36f] to-[#ce995c] rounded-[28.68px] flex center"
              @click="jumpTo"
            >
              <div
                class="w-[110.71px] h-[37.17px] bg-gradient-to-r from-[#f1bf84] to-[#e6c99f] rounded-[28.19px] shadow shadow-inner flex center"
              >
                <div class="text-center text-[#242323] text-base font-normal font-['PingFang_SC']">
                  去查看
                </div>
              </div>
            </div>
          </div>
        </div>

        <div v-if="isBadge" class="text-center">
          <div class="text-white text-2xl font-normal font-['PingFang_SC'] uppercase">
            {{ title }}
          </div>
          <div class="mt-2 text-[#9f9b94] text-base font-normal font-['PingFang_SC'] uppercase">
            {{ content }}
          </div>
        </div>
        <div
          v-if="isBadge"
          class="my-10 w-[155px] px-5 py-2.5 rounded-full border border-solid border-[#c8beab] justify-center items-center gap-1 inline-flex"
        >
          <div
            class="text-center text-[#c7bdab] text-base font-normal font-['PingFang_SC'] leading-normal"
            @click.stop="jumpTo"
          >
            查看奖励
          </div>
        </div>
        <wd-img width="24" height="24" :src="close" @click="modelValue = false"></wd-img>
      </div>
    </wd-popup>
  </wd-config-provider>
</template>
