<template>
  <FlexCol :gap="20" :padding="30">
    <HomeLargeTitle title="发现" />
    <ImageSwiper
      :images="appConfiguration?.banners.discover"
      width="100%"
      :height="400"
      radius="radius.md"
      :innerStyle="{
        border: '1px solid #fff',
        overflow: 'hidden',
      }"
    />

    <HomeTitle title="乡村排名" showMore @moreClicked="navTo('/pages/home/village/rank/village')" />
    <FlexCol gap="gap.lg">
      <RankVillageItem
        v-for="item in villageRankListLoader.content.value"
        :key="item.id"
        :id="item.id"
        :image="item.image"
        :rank="item.rank"
        :title="item.title"
        :points="item.points"
        @click="handleGoVillageDetails(item as any)"
      />
    </FlexCol>

    <HomeTitle title="志愿者排名" showMore :lightCount="3" @moreClicked="navTo('/pages/home/village/rank/volunteer')" />
    <FlexCol gap="gap.lg">
      <RankVolunteerItem
        v-for="(item, index) in villageUserRankListLoader.content.value" :key="item.id"
        :id="item.id"
        :image="item.image"
        :rank="index + 1"
        :title="item.title"
        :score="item.score"
        :isAdmin="false"
        @click="navTo('/pages/home/village/volunteer/detail', { id: item.id })"
      />
    </FlexCol>

    <HomeTitle title="乡源好物" showMore @moreClicked="navTo('/pages/home/village/goods/index')" />
    <SimplePageListLoader :loader="goodsLoader">
      <FlexRow wrap justify="space-around" gap="gap.sm">
        <BoxMid
          v-for="good in goodsLoader.list.value" :key="good.id"
          :innerStyle="{
            width: 'calc(50% - 80rpx)',
          }"
        >
          <Touchable direction="column" gap="gap.lg" @click="handleGoodDetail(good)">
            <Image 
              :src="good.image"
              :radius="20"
              width="100%"
              height="300rpx"
              mode="aspectFill"
            />
            <Text :text="good.title" fontConfig="titleText" />
            <FlexRow align="center" gap="gap.md">
              <Avatar 
                :src="good.villageVolunteerAvatar"
                :size="40"
              />
              <Text :text="`发布人: ${good.villageVolunteerName}`" fontConfig="contentText" />
            </FlexRow>
          </Touchable>
        </BoxMid>
        <FlexCol v-if="goodsLoader.list.value.length % 2 !== 0" width="calc(50% - 40rpx)" />
      </FlexRow>
    </SimplePageListLoader>

    <HomeTitle title="最新推荐" />
    <SimplePageListLoader :loader="discoverLoader">
      <MasonryGrid>
        <MasonryGridItem
          v-for="(item, i) in discoverLoader.list.value"
          :key="i"
          :width="340"
        >
          <IndexCommonImageItem
            :image="item.image"
            :title="item.title"
            :desc="item.content ?? ''"
            :userName="item.villageVolunteerName ?? ''"
            :likes="0"
            :isLike="false"
            @click="handleGoRecommendDetails(item)"
          />
        </MasonryGridItem>
      </MasonryGrid>
    </SimplePageListLoader>
    
    <Loadmore status="nomore" />
    <Height :height="150" />
  </FlexCol>
</template>

<script setup lang="ts">
import { navTo } from '@/components/utils/PageAction';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useVillageStore } from '@/store/village';
import { injectAppConfiguration } from '@/api/system/useAppConfiguration';
import Loadmore from '@/components/display/loading/Loadmore.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import ImageSwiper from '@/common/components/parts/ImageSwiper.vue';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
import MasonryGridItem from '@/components/layout/masonry/MasonryGridItem.vue';
import VillageInfoApi, { type CommonInfoModel } from '@/api/inhert/VillageInfoApi';
import IndexCommonImageItem from '@/common/components/parts/IndexCommonImageItem.vue';
import LightVillageApi, { type VillageListItem } from '@/api/light/LightVillageApi';
import Avatar from '@/components/display/Avatar.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import Text from '@/components/basic/Text.vue';
import Image from '@/components/basic/Image.vue';
import { waitTimeOut } from '@imengyu/imengyu-utils';
import FlexRow from '@/components/layout/FlexRow.vue';
import BoxMid from '@/common/components/box/BoxMid.vue';
import RankVolunteerItem from '../village/rank/components/RankVolunteerItem.vue';
import RankVillageItem from '../village/rank/components/RankVillageItem.vue';

const emit = defineEmits([ 'goVillage' ]);

const villageStore = useVillageStore();
const appConfiguration = injectAppConfiguration();
const discoverLoader = useSimplePageListLoader(15, async (page, pageSize) => {
  return await VillageInfoApi.getListForDiscover(page, pageSize);
});
const villageRankListLoader = useSimpleDataLoader(async () => {
  const res = await LightVillageApi.getVillageRankList({ num: 10 });
  return res.map((item, i) => ({
    image: item.image ?? '',
    title: item.name,
    rank: i + 1,
    id: item.id,
    points: item.points,
  }));
});
const villageUserRankListLoader = useSimpleDataLoader(async () => {
  const res = (await LightVillageApi.getVolunteerRankList({ num: 6 }))
    .map((item, i) => ({
      id: item.id,
      image: item.image ?? '',
      title: item.name,
      rank: i + 1,
      score: item.points,
    }));
  return res
});
const goodsLoader = useSimplePageListLoader(20, async (page, pageSize, params) => {
  return await VillageInfoApi.getList({
    collectModuleId: 24,
    page, pageSize,
  });
});

function handleGoodDetail(good: { id: number }) {
  navTo('/pages/home/village/goods/detail', {
    id: good.id,
  });
};
function handleGoRecommendDetails(item: CommonInfoModel) {
  navTo(`/pages/home/discover/details`, { id: item.id });
}
async function handleGoVillageDetails(item: VillageListItem) {
  const details = await LightVillageApi.getVillageDetails(item.id);
  villageStore.setCurrentVillage(details);
  await waitTimeOut(100);
  emit('goVillage')
}
</script>