<template>
  <FlexCol padding="space.sm">
    <HomeTitle title="周边优秀村社" />
    <SimplePageListLoader :loader="recommendLoader">
      <MasonryGrid>
        <MasonryGridItem
          v-for="(item, i) in recommendLoader.list.value"
          :key="i"
          :width="340"
        >
          <IndexCommonImageItem 
            :title="item.title"
            :desc="item.desc"
            :image="item.image"
            defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
            @click="emit('selectVillage', item)"
          />
        </MasonryGridItem>
      </MasonryGrid>
    </SimplePageListLoader>
  </FlexCol>
</template>

<script setup lang="ts">  
import FlexCol from '@/components/layout/FlexCol.vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import MasonryGrid from '@/components/layout/masonry/MasonryGrid.vue';
import MasonryGridItem from '@/components/layout/masonry/MasonryGridItem.vue';
import IndexCommonImageItem from '@/common/components/parts/IndexCommonImageItem.vue';
import LightVillageApi from '@/api/light/LightVillageApi';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';

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

const recommendLoader = useSimplePageListLoader(15, async (page, pageSize, params) => {
  const result = await LightVillageApi.getVillageList(undefined, undefined, undefined, page, pageSize);
  return {
    total: result.total,
    list: result.list.map((item) => ({
      id: item.id,
      title: item.title,
      image: item.image,
      desc: item.address,
    }))
  }
});
</script>