<script setup lang="ts">
import { close } from '../../../core/libs/svgs'
import { DialogShowOptions, HonorDialogSymbol } from '../../../composables/honor-dialog'
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'

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 show = (options: DialogShowOptions) => {
  title.value = options.title
  content.value = options.content
  path.value = options.path
  src.value = options.image
  modelValue.value = true
}
provide(HonorDialogSymbol, { show })
</script>
<template>
  <wd-config-provider :themeVars="themeVars">
    <wd-popup v-model="modelValue" custom-class="bg-transparent! bg-[#f6f6f6]!">
      <div class="flex flex-col items-center relative">
        <wd-img width="60vw" mode="widthFix" :src="earnBadgeTitle"></wd-img>
        <div class="w-[100vw] h-[68vw] pt-2 flex">
          <div class="w-100vw h-100vw absolute left-0 right-0 top--8">
            <wd-img
              custom-class="absolute! 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
              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
              custom-class="absolute! ma-a top-50% left-50% translate-[-50%,-50%]  vertical-bottom"
              width="40vw"
              mode="widthFix"
              :src="src"
            ></wd-img>
          </div>
        </div>
        <div 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
          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"
          >
            查看奖励
          </div>
        </div>
        <wd-img width="24" height="24" :src="close" @click="modelValue = false"></wd-img>
      </div>
    </wd-popup>
  </wd-config-provider>
</template>
