<template>
  <CommonDialog v-model:show="show" title="升级村社">
    <template #titleHeader>    
      <Image src="https://xy.wenlvti.net/app_static/images/village/IconBlessing.png" :width="100" :height="100" />
    </template>
    <FlexCol gap="gap.lg">
      
      <FlexCol padding="padding.md">
        <Text 
          text="感谢您选择升级村社，升级后您将获得更多权益，包括管理功能，更多的相册、乡源光、乡源果奖励等。请选择您要升级的套餐" 
          fontConfig="contentText" :fontSize="30" textAlign="center" 
        />
      </FlexCol>

      <FlexCol gap="gap.md">
        <BoxMid
          v-for="(item, k) in upgradeList"
          :key="k"
          position="relative"
          :padding="32"
          direction="row"
          justify="space-between"
          align="center"
          gap="gap.md"
        >
          <FlexCol>
            <Text :text="item.name" fontConfig="lightImportantTitle" :fontSize="42" />
            <Text :text="item.desc" fontConfig="lightGoldTitle" :fontSize="30" />
          </FlexCol>

          <FlexRow gap="gap.lg">
            <FlexCol align="flex-end">
              <Text :text="item.vipLevel + '级'" fontConfig="contentText" />
              <FlexRow align="center" gap="gap.sm">
                <Text text="¥" color="text.gold" />
                <Text :text="item.price" fontFamily="SongtiSCBlack" fontConfig="lightGoldTitle" fontSize="50" />
              </FlexRow>
            </FlexCol>
            <Badge :show="item.isRecommend" content="推荐">
              <FrameButton primary text="选择" @click="handleSelect(item as UpgradePackageItem)" />
            </Badge>
          </FlexRow>
        </BoxMid>
      </FlexCol>

      <BoxMid :padding="24" direction="column" center>
        <WxButton openType="contact">
          <Text text="不知道怎么选择？问问客服" fontConfig="lightImportantTitle" />
        </WxButton>
      </BoxMid>
    </FlexCol>
  </CommonDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { navTo } from '@/components/utils/PageAction';
import CommonDialog from '@/common/components/CommonDialog.vue';
import FrameButton from '@/common/components/FrameButton.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import TreeApi, { type UpgradePackageItem } from '@/api/light/TreeApi';
import Image from '@/components/basic/Image.vue';
import WxButton from '@/components/basic/WxButton.vue';
import Badge from '@/components/display/Badge.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';

const show = ref(false);
const props = defineProps({
  villageId: {
    type: Number,
    required: true,
  },
});

const upgradeList = ref<UpgradePackageItem[]>([]);

async function loadUpgradeList() {
  const res = await TreeApi.getUpgradeList();
  upgradeList.value = res.list;
}
function handleSelect(item: UpgradePackageItem) {
  show.value = false;
  navTo('/pages/home/village/upgrade/select', {
    villageId: props.villageId,
    upgradePackageId: item.id,
  });
}

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