<template>
  <FlexCol>
    <FlexCol :margin="[10,0,0,0]">
      <Text textAlign="center" text="一人添果，全村增光；乡源树茂，故土名扬" fontConfig="primaryTitle" fontSize="35rpx"  />
    </FlexCol>
    <VillageTree />
    <FlexCol :padding="30">
      <FlexCol>
        <FlexRow center>
          <Progress 
            :value="60" 
            :backgroundStyle="{
              background: 'linear-gradient(to bottom, #280502, #a44e17)',
            }"
            :progressStyle="{
              borderImageSource: 'url(https://xy.wenlvti.net/app_static/images/village/ImageProgress.png)',
              borderImageSlice: `5 25 5 25 fill`,
              borderImageWidth: `0px 15px`,
              borderImageRepeat: 'stretch',
              borderRadius: '10px',
              overflow: 'hidden',
            }"
            :width="300" 
            :height="30" 

          />
        </FlexRow>
        <Height height="space.lg" />
        <FlexRow center gap="gap.md">
          <Icon icon="https://xy.wenlvti.net/app_static/images/village/IconLight.png" :size="50" />
          <Text text="乡源光 30%" fontConfig="contentText" fontSize="30rpx" color="#E79412" />
        </FlexRow>
        <Height height="space.md" />
        <Text textAlign="center" text="再浇水5次 可升级" fontConfig="secondText" />
      </FlexCol>

      <Height height="space.xl" />
      <FlexRow justify="space-around" :padding="[0, 30]">
        <Touchable center direction="column" flexBasis="22%">
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconCollect.png" :width="130" mode="widthFix" />
          <Text text="拾果" fontConfig="contentText" />
        </Touchable>
        <Touchable center direction="column" flexBasis="22%">
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconFertilization.png" :width="130" mode="widthFix" />
          <Text text="施肥" fontConfig="contentText" />
        </Touchable>
        <Touchable center direction="column" flexBasis="22%">
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconWatering.png" :width="130" mode="widthFix" />
          <Text text="浇水" fontConfig="contentText" textAlign="center" />
        </Touchable>
        <Touchable center direction="column" flexBasis="22%">
          <Image src="https://xy.wenlvti.net/app_static/images/village/IconBlessing.png" :width="130" mode="widthFix" />
          <Text text="赐福" fontConfig="contentText" textAlign="center" />
        </Touchable>
      </FlexRow>

      <HomeTitle title="最新动态" />
      <FlexCol gap="gap.lg">
        <FlexRow 
          v-for="item in infoLoader.content.value" :key="item.id"
          backgroundColor="background.tertiary"
          radius="radius.md"
          :padding="[20, 30]"
          gap="gap.lg"
          align="center"
        > 
          <Avatar  
            :url="item.head"
            :size="80"
            radius="50%"
          />
          <Text :text="item.content" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
          <BackgroundBox
            backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagNormal.png"
            :backgroundCutBorder="[10, 10, 10, 10]"
            :backgroundCutBorderSize="[10, 10, 10, 10]"
            :padding="[15, 30]"
          >
            <Text :text="item.levelText" fontConfig="contentText" />
          </BackgroundBox>
        </FlexRow>
      </FlexCol>

      <HomeTitle title="乡源赐福" />
      <FlexRow wrap>
        <FlexCol 
          v-for="(item, index) in blessingInfoLoader.content.value"
          :key="item.id" 
          center 
          flexBasis="30%"
          gap="gap.sm"
          :margin="[10,0,0,0]"
        >
          <BackgroundBox
            backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingCount.png"
            backgroundPosition="center"
            :padding="[10, 20]"
          >
            <Text :text="index + 1" color="white" />
          </BackgroundBox>
          <Image :src="item.image" :width="210" :height="250" radius="radius.md" mode="aspectFill" />
          <BackgroundBox
            backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingBar.png"
            :padding="10"
            :width="210"
          >
            <Text textAlign="center" :text="item.content" fontConfig="contentText" fontFamily="SongtiSCBlack" color="white" />
          </BackgroundBox>
        </FlexCol>
      </FlexRow>
    </FlexCol>
  </FlexCol>

</template>

<script setup lang="ts">
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import VillageTree from '../components/VillageTree.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Icon from '@/components/basic/Icon.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Image from '@/components/basic/Image.vue';
import Height from '@/components/layout/space/Height.vue';
import Avatar from '@/components/display/Avatar.vue';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Progress from '@/components/display/Progress.vue';

const infoLoader = useSimpleDataLoader(async () => {
  return [
    {
      id: 1,
      head: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest1.png',
      content: '福泽乡里 为全村加成+10%乡源果，可持续24小时',
      levelText: '一级',
    },
    {
      id: 2,
      head: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest2.png',
      content: '福泽乡里 为全村加成+10%乡源果，可持续24小时',
      levelText: '五级',
    },
    {
      id: 3,
      head: 'https://mn.wenlvti.net/app_static/minnan/images/test/ImageTest3.png',
      content: '福泽乡里 为全村加成+10%乡源果，可持续24小时',
      levelText: '十级',
    },

  ];
});
const blessingInfoLoader = useSimpleDataLoader(async () => {
  return [
    {
      id: 1,
      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing1.png',
      content: '福泽乡里'
    },
    {
      id: 2,
      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing2.png',
      content: '德润乡邻'
    },
    {
      id: 3,
      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing3.png',
      content: '光耀故土'
    },
    {
      id: 4,
      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing4.png',
      content: '恩沐全村'
    },
    {
      id: 5,
      image: 'https://xy.wenlvti.net/app_static/images/village/ImageBlessing5.png',
      content: '圣赐千秋'
    },
  ];
});

</script>