<template>
  <CommonDialog v-model:show="show">
    <FlexCol gap="gap.lg" width="600rpx" align="center" :padding="35">
      <Image
        src="https://xy.wenlvti.net/app_static/images/home/bless/IconHeader.png"
        :width="300" 
        :height="100" 
      />
      <Height :height="20" />
      <BoxMid 
        v-for="(item, k) in infoGrids"
        :key="k"
        direction="row"
        justify="space-between"
        align="center"
        gap="gap.md"
        width="96%"
      >
        <FlexRow align="center" gap="gap.sm">
          <Image 
            :src="item.image"
            :width="60"
            :height="60"
            round
          />
          <Text :text="item.label" fontConfig="lightImportantTitle"  />
        </FlexRow>
        <FlexRow align="center" gap="gap.sm">
          <Text :text="item.value" fontConfig="lightGoldTitle" :fontSize="50" />
          <Text :text="item.unit" fontConfig="lightGoldTitle" :fontSize="26" />
        </FlexRow>
      </BoxMid>

      <BackgroundBox 
        backgroundImage="https://xy.wenlvti.net/app_static/images/home/bless/PriceBg.png"
        :backgroundCutBorder="36"
        :backgroundCutBorderSize="36"
        :padding="36"
        direction="row"
        justify="space-between"
        align="center"
        gap="gap.md"
        width="90%"
      >
        <FlexRow align="center" gap="gap.sm">
          <Text text="￥" fontConfig="lightImportantTitle" fontFamily="SongtiSCBlack" :fontSize="26" />
          <Text :text="props.currentBless?.amount || 0" fontConfig="lightImportantTitle" :fontSize="42" fontFamily="SongtiSCBlack" />
        </FlexRow>
        <Text :text="`有效期至 ${effectiveDate}`" fontConfig="contentText" color="white" />
      </BackgroundBox>
        
      <Height :height="5" />
      <PrimaryButton text="立即赐福" @click="show = false;emit('buyBless')" width="520rpx" />
      <Height :height="5" />
      <Text 
        textAlign="center" 
        text="倍率仅作用于用户乡源果，村社乡源光不翻倍赐福到期后，倍率自动恢复为1倍"
        fontConfig="contentText"
      />

    </FlexCol>
  </CommonDialog>
</template>

<script setup lang="ts">
import type { BlessPackageItem } from '@/api/light/TreeApi';
import BoxMid from '@/common/components/box/BoxMid.vue';
import CommonDialog from '@/common/components/CommonDialog.vue';
import FrameButton from '@/common/components/FrameButton.vue';
import PrimaryButton from '@/common/components/PrimaryButton.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import { DateUtils } from '@imengyu/imengyu-utils';
import { computed, ref } from 'vue';

const show = ref(false);

const props = defineProps<{
  currentBless?: BlessPackageItem;
}>();
const emit = defineEmits(['buyBless']);

const infoGrids = computed(() => [
  {
    label: '村社加乡源光',
    image: 'https://xy.wenlvti.net/app_static/images/home/bless/IconLight.png',
    value: props.currentBless?.addLight || 0,
    unit: '光',
  },
  {
    label: '用户得乡源果',
    image: 'https://xy.wenlvti.net/app_static/images/home/bless/IconFruit.png',
    value: props.currentBless?.addFruit || 0,
    unit: '个',
  },
]);
const effectiveDate = computed(() => {
  return DateUtils.formatDate(DateUtils.dateAddDays(new Date(), props.currentBless?.days || 0), 'YYYY-MM-DD');
});

defineExpose({
  show: () => {
    show.value = true;
  },
});
</script>