<template>
  <FlexCol padding="space.md">
    <HomeTitle title="我的关注" />
    <RequireLogin unLoginMessage="登录后查看我的关注村社" @loginSuccess="villageStore.loadMyFollowVillages()">
      <FlexCol gap="gap.md">
        <ImageBlock3
          v-for="(item, i) in villageStore.myFollowVillages"
          :key="i"
          backgroundColor="transparent"
          :src="item.image"
          defaultImage="https://xy.wenlvti.net/app_static/images/village/PlaceholderVillage.jpg"
          :title="item.name"
          :desc="item.address"
          :imageRadius="15"
          :imageWidth="200"
          :imageHeight="140"
          @click="emit('goDetails', item as VillageListItem)"
        />
      </FlexCol>
    </RequireLogin>
  </FlexCol>
</template>

<script setup lang="ts">
import FlexCol from '@/components/layout/FlexCol.vue';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import ImageBlock3 from '@/components/display/block/ImageBlock3.vue';
import RequireLogin from '@/common/components/RequireLogin.vue';
import type { VillageListItem } from '@/api/light/LightVillageApi';
import { useVillageStore } from '@/store/village';

const emit = defineEmits<{
  (e: 'goDetails', item: VillageListItem): void;
}>();
const villageStore = useVillageStore();
</script>
