<template>
  <FlexCol v-if="showSwitch" position="absolute" :left="0" :top="0">
    <StatusBarSpace />
    <Button
      @click="showMyFollowPopup = true"
      icon="https://xy.wenlvti.net/app_static/images/home/IconSwitch.png"
      :text="villageStore.currentVillage?.name || '未选择村庄'"
      type="custom"
      color="transparent"
    />
  </FlexCol>
  <FlexCol v-if="villageStore.currentVillage" gap="gap.md">
    <FlexRow center :padding="[0,30]" gap="gap.md">
      <HomeLargeTitle title="村社名片" :active="tab === 'card'" @click="tab = 'card'" />
      <HomeLargeTitle title="乡源树" :active="tab === 'tree'" @click="tab = 'tree'">
        <template #icon>
          <Image src="https://xy.wenlvti.net/app_static/images/village/TreeIconAmin.gif" :width="45" :height="46" mode="heightFix" />
        </template>
      </HomeLargeTitle>
    </FlexRow>
    <Card v-if="tab === 'card'" />
    <Tree v-if="tab === 'tree'" />
    <Popup 
      v-model:show="showMyFollowPopup" 
      closeable
      position="bottom"
      round
      size="80vh"
    >
      <VillageMyFollow @goDetails="onSelectVillage" />
    </Popup>
    <Height :height="150" />
  </FlexCol>
  <Empty v-else description="请选择村庄" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useVillageStore } from '@/store/village';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import Image from '@/components/basic/Image.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Card from './introd/card.vue';
import Tree from './introd/tree.vue';
import StatusBarSpace from '@/components/layout/space/StatusBarSpace.vue';
import Button from '@/components/basic/Button.vue';
import Popup from '@/components/dialog/Popup.vue';
import VillageMyFollow from '../components/VillageMyFollow.vue';
import Empty from '@/components/feedback/Empty.vue';
import type { VillageListItem } from '@/api/light/LightVillageApi';

const tab = ref('card');
const villageStore = useVillageStore();
const showMyFollowPopup = ref(false);

const props = withDefaults(defineProps<{
  showSwitch?: boolean;
}>(), {
  showSwitch: false,
});

onMounted(() => {
  if (!props.showSwitch) {
    uni.setNavigationBarTitle({
      title: villageStore.currentVillage?.name || '未选择村庄',
    });
  }
});

function onSelectVillage(village: VillageListItem) {
  villageStore.setCurrentVillage(village);
  showMyFollowPopup.value = false;
}
</script>