<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" />
      <Text 
        textAlign="center" 
        :text="`恭喜，乡源树已经升级为${props.treeLevel}`"
        fontConfig="lightGoldTitle"
      />
    </FlexCol>
  </CommonDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CommonDialog from '@/common/components/CommonDialog.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';

const show = ref(false);

const props = defineProps<{
  treeLevel: string
}>();

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