<template>
  <FlexCol>
    <HomeTitle title="周边村社" />
    <MasonryGrid>
      <MasonryGridItem
        v-for="(item, i) in recommendLoader.content.value"
        :key="i"
        :width="340"
      >
        <IndexCommonImageItem
          :image="item.image"
          :title="item.title"
          :desc="item.desc"
          :userName="item.userName"
          :likes="item.likes"
          :isLike="item.isLike"
        />
      </MasonryGridItem>
    </MasonryGrid>
  </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 { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useVillageStore } from '@/store/village';
import LightVillageApi from '@/api/light/LightVillageApi';
import CommonContent from '@/api/CommonContent';

const villageStore = useVillageStore();
const recommendLoader = useSimpleDataLoader(async () => {
  if (!villageStore.currentRegion)
    return [];
  const regionId = await CommonContent.getCategoryList(villageStore.currentRegion);
  const res = await LightVillageApi.getVillageList(1, villageStore.currentRegion, undefined, 1, 20);


  return [];
});
</script>