<template>
  <CommonRoot>
    <FlexCol v-if="showSwitch" position="absolute" :left="0" :top="0" :right="0" backgroundColor="rgba(255,255,255,0.5)">
      <StatusBarSpace />
      <FlexRow gap="gap.md">
        <Button
          icon="https://xy.wenlvti.net/app_static/images/home/IconSwitch.png"
          :text="villageStore.currentVillage?.name || '未选择村庄'"
          :textColor="topTab === 'village' ? 'text.titleLight' : 'text.content'"
          color="transparent"
          type="custom" 
          @click="showMyFollowPopup = true"
        />
        <Button 
          type="custom" 
          color="transparent" 
          :textColor="topTab === 'around' ? 'text.titleLight' : 'text.content'"
          text="周边村社" 
          @click="topTab = 'around'" 
        />
      </FlexRow>
    </FlexCol>
    <FlexCol v-if="topTab === 'village' && villageStore.currentVillage" gap="gap.md">
      <FlexCol v-if="!isLight" center :padding="[60,0]" gap="gap.md">
        <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="320" mode="widthFix" />
        <Text text="本村暂未点亮" fontConfig="primaryTitle" />
        <Text text="您可以申请成为志愿者，点亮村庄" fontConfig="contentText" />
        <Height :height="20" />
        <FlexRow gap="gap.lg">
          <FrameButton :text="isFollowed ? '已关注' : '先关注村庄'" @click="isFollowed ? onUnFollow() : onFollow()" />
          <FrameButton text="去申请点亮" @click="handleGoApply()" primary />
        </FlexRow>
      </FlexCol>
      <template v-else>
        <FlexRow center :padding="[0,30]">
          <HomeLargeTitle title="村社名片" :active="tab === 'card'" @click="tab = 'card'" />
          <Width :width="30" />
          <HomeLargeTitle title="乡源树" titleColorAnim :active="tab === 'tree'" @click="tab = 'tree'">
            <template #icon>
              <Image src="https://xy.wenlvti.net/app_static/images/village/TreeIconAmin1.gif" :width="34" :height="50" mode="heightFix" />
            </template>
          </HomeLargeTitle>
        </FlexRow>
        <Card v-if="tab === 'card'" @goTree="tab = 'tree'" />
        <Tree v-if="tab === 'tree'" />
      </template>
      <Height :height="150" />
    </FlexCol>
    <Around 
      v-else 
      @selectVillage="onSelectVillage" 
    />
    <Height :height="200" />
    <Popup 
      v-model:show="showMyFollowPopup" 
      closeable
      position="bottom"
      round
      size="80vh"
    >
      <VillageMyFollow @goDetails="onSelectVillage" />
    </Popup>

  </CommonRoot>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useVillageStore } from '@/store/village';
import { useFollow } from './composeabe/Follow';
import { navTo } from '@/components/utils/PageAction';
import type { VillageListItem } from '@/api/light/LightVillageApi';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import Image from '@/components/basic/Image.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 Text from '@/components/basic/Text.vue';
import CommonRoot from '@/components/dialog/CommonRoot.vue';
import Width from '@/components/layout/space/Width.vue';
import VillageMyFollow from '../components/VillageMyFollow.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';
import Around from './recommed/around.vue';
import FrameButton from '@/common/components/FrameButton.vue';
import { isDevEnv } from '@/common/config/AppCofig';
import { waitTimeOut } from '@imengyu/imengyu-utils';

const topTab = ref<'village' | 'around'>('village');
const tab = ref('card');
const villageStore = useVillageStore();
const showMyFollowPopup = ref(false);
const { isFollowed, onFollow, onUnFollow } = useFollow();

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

const isLight = computed(() => {
  return villageStore.currentVillage?.isLight ?? false;
});

function handleGoApply() {
  navTo('/pages/home/light/submit', {
    villageId: villageStore.currentVillage?.id ?? undefined,
    unit: (villageStore.currentVillage?.city as string) + (villageStore.currentVillage?.district as string) + (villageStore.currentVillage?.township as string),
    regionId: villageStore.currentVillage?.region ?? undefined,
  });
}

function onSelectVillage(village: VillageListItem) {
  topTab.value = 'village';
  villageStore.setCurrentVillage(village);
  showMyFollowPopup.value = false;
}

watch(() => villageStore.currentVillage, (newVal) => {
  if (!newVal) {
    if (topTab.value === 'village')
     topTab.value = 'around';
  } else {
    if (topTab.value === 'around')
      topTab.value = 'village';
  }
});

onMounted(async () => {
  if (!props.showSwitch) {
    uni.setNavigationBarTitle({
      title: villageStore.currentVillage?.name || '未选择村庄',
    });
  }
  if (isDevEnv) {
    //tab.value = 'tree';
  }
  await waitTimeOut(1000);
  if (villageStore.currentVillage) {
    topTab.value = 'village';
  } else {
    topTab.value = 'around';
  }
});
</script>