<template>
  <CommonDialog v-model:show="show" title="升级村社">
    <FlexCol gap="gap.lg">
      <FlexCol gap="gap.md">
        <BackgroundBox
          v-for="(item, k) in upgradeList"
          :key="k"
          position="relative"
          backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
          :backgroundCutBorder="32"
          :backgroundCutBorderSize="36"
          :padding="32"
          direction="row"
          justify="space-between"
          align="center"
          gap="gap.md"
        >
          <FlexCol>
            <FlexRow align="center" gap="gap.md">
              <Text :text="item.name" fontConfig="lightImportantTitle" :fontSize="42" />
              <FlexRow 
                v-if="item.isRecommend"
                radius="radius.md"
                backgroundColor="danger"
                :padding="[4, 12]"
              >
                <Text text="推荐升级" fontConfig="contentText" color="white" />
              </FlexRow>
            </FlexRow>
            <Text :text="item.desc" fontConfig="lightGoldTitle" :fontSize="30" />
          </FlexCol>
          <FlexCol>
            <Text :text="item.vipLevel + '级'" fontConfig="contentText" />
            <FlexRow align="center">
              <Text fontConfig="lightGoldTitle">¥</Text>
              <Text :text="item.price" fontFamily="SongtiSCBlack" fontConfig="lightGoldTitle" fontSize="50" />
            </FlexRow>
          </FlexCol>
        </BackgroundBox>
      </FlexCol>
      <BackgroundBox 
        backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
        :backgroundCutBorder="32"
        :backgroundCutBorderSize="36"
        :padding="24"
        direction="column"
        center
      >
        <Text text="额外权益" fontConfig="lightImportantTitle" />
        <Text text="平台首页展厅/好图上传、村图券赠送、修改图片等功能；平台基础建设、乡源光、乡源果奖励等" fontConfig="contentText" />
      </BackgroundBox>
    </FlexCol>
  </CommonDialog>
</template>

<script setup lang="ts">
import CommonDialog from '@/common/components/CommonDialog.vue';
import FrameButton from '@/common/components/FrameButton.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 TreeApi, { type UpgradePackageItem } from '@/api/light/TreeApi';
import { computed, ref } from '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;
}

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