<template>
  <CommonTopBanner title="搜索">
    <SimplePageListLoader>
      <FlexCol gap="gap.md">
        <Empty v-if="listLoader.list.value.length === 0" description="暂无搜索结果，换个关键词试试吧" />
        <FlexRow 
          v-for="(item, i) in listLoader.list.value"
          :key="i"
          justify="space-between" align="center" gap="gap.md"
        >
          <ImageBlock3
            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="onGoDetails(item as VillageListItem)"
          />
          <FlexRow justify="flex-end" align="center" gap="gap.md" width="200rpx">
            <Tag v-if="item.isFollow" text="已关注" size="small" />
            <Tag v-if="item.isJoined" text="已加入" size="small" type="primary" />
          </FlexRow>
        </FlexRow>
      </FlexCol>
    </SimplePageListLoader>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import FlexCol from '@/components/layout/FlexCol.vue';
import ImageBlock3 from '@/components/display/block/ImageBlock3.vue';
import LightVillageApi, { type VillageListItem } from '@/api/light/LightVillageApi';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import Empty from '@/components/feedback/Empty.vue';
import Tag from '@/components/display/Tag.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
import { backAndCallOnPageBack } from '@/components/utils/PageAction';

const { querys } = useLoadQuerys({
  searchValue: '',
  region: 0,
}, () => {
  listLoader.load();
});

const listLoader = useSimplePageListLoader(16, async (page, pageSize) => {
  return await LightVillageApi.getVillageList({
    keyword: querys.value.searchValue,
    region: querys.value.region,
    page,
    pageSize,
  });
}, false);

function onGoDetails(item: VillageListItem) {
  backAndCallOnPageBack('goVillage', { id: item.id });
}


</script>