<template>
  <FlexCol :padding="[30,30,0,30]" gap="gap.lg">

    <!-- 卡片背景 -->
    <BackgroundBox 
      color1="#eecaa0"
      color2="white"
      color2Position="85%"
      color3="white"
      radius="radius.lg"
      direction="column"
      :padding="[35,30]"
      gap="gap.lg"
    >

      <!-- 标题 -->
      <FlexRow justify="space-between" width="100%">
        <FlexCol gap="gap.md">
          <Text :text="villageInfoLoader.content.value?.title" fontConfig="primaryTitle" />
          <Text :text="villageInfoLoader.content.value?.address" fontConfig="contentText" />
        </FlexCol>
        <FlexRow center gap="gap.lg">
          <Button 
            icon="https://xy.wenlvti.net/app_static/images/village/IconJoin.png" 
            radius="radius.lgr"
            @click="isFollowed ? onUnFollow() : onFollow()"
          >
            {{ isFollowed ? '已关注' : '关注' }}
          </Button>
          <Button 
            icon="https://xy.wenlvti.net/app_static/images/village/IconFollow.png"
            radius="radius.lgr"
            @click="handleGoJoin()"
          >
            {{ isJoined ? '已加入' : '加入' }}
          </Button>
        </FlexRow>
      </FlexRow>

      <!-- 状态与申请 -->
      <FlexRow 
        backgroundColor="background.tertiary" 
        radius="radius.md" 
        padding="space.md" 
        justify="space-between" 
      >
        <FlexCol gap="gap.md"> 
          <Text :text="`${villageInfoLoader.content.value?.applyCount || 0} 个乡源果可申请`" fontConfig="secondText" />  
          <Text :text="`存储空间内存：${villageInfoLoader.content.value?.sizeText || 0}`" fontConfig="secondText" />
        </FlexCol>
        <FlexCol gap="gap.md">
          <Button 
            icon="https://xy.wenlvti.net/app_static/images/village/IconUser.png" 
            radius="radius.lgr" 
            :padding="[10, 30]" 
            backgroundColor="white" 
            @click="($refs.applyGoodsDialog as any).show()"
          >
            升级村社
          </Button>
        </FlexCol>
      </FlexRow>
      
      <!-- 图片 -->
      <VillageGallery
        v-if="villageInfoLoader.content.value"
        :villageId="villageStore.currentVillage?.id ?? 0" 
        :images="villageInfoLoader.content.value.images" 
        @update:images="villageInfoLoader.reload()"
      />

      <!-- 地址 -->
      <FlexRow align="center" gap="gap.sm">
        <Icon name="https://xy.wenlvti.net/app_static/images/village/IconMap.png" size="fontSize.md" />
        <Text :text="villageInfoLoader.content.value?.address" fontConfig="contentText" />
      </FlexRow>
      <VillageMiniMap 
        v-if="villageInfoLoader.content.value"
        :lonlat="{ 
          longitude: villageInfoLoader.content.value.longitude, 
          latitude: villageInfoLoader.content.value.latitude 
        }" 
      />

      <FlexRow justify="space-between" align="center">
        <FlexRow center gap="gap.lg" flexBasis="50%">
          <Text text="村社排名" fontConfig="contentText" />
          <Text text="No." fontConfig="lightTitle" />
          <Text :text="villageInfoLoader.content.value?.rankText" fontConfig="primaryTitle" />
        </FlexRow>
        <FlexRow center gap="gap.lg" flexBasis="50%">
          <Text text="村社等级" fontConfig="contentText" />
          <Text :text="villageInfoLoader.content.value?.levelText" fontConfig="primaryTitle" />
        </FlexRow>
      </FlexRow>

      <FlexRow backgroundColor="background.tertiary" radius="radius.md" :padding="[30, 20]">
        <FlexCol center gap="gap.sm" flexBasis="25%">
          <Text text="乡源光" fontConfig="secondText" />
          <Text :text="villageInfoLoader.content.value?.light" fontConfig="importantTitle" />
          <Button type="text" size="mini" text="做任务" @click="navTo('/pages/home/village/task/index')" />
        </FlexCol>
        <Divider type="vertical" />
        <FlexCol center gap="gap.sm" flexBasis="25%">
          <Text text="乡源人数" fontConfig="contentText" />
          <Text :text="villageInfoLoader.content.value?.memberCount" fontConfig="importantTitle" />
          <WxButton openType="share">
            <Button type="text" size="mini" text="邀请加入" @click="navTo('/pages/home/village/task/index')" />
          </WxButton>
        </FlexCol>
        <Divider type="vertical" />
        <Touchable direction="column" center gap="gap.sm" flexBasis="25%" @click="navTo('/pages/home/village/volunteer/list', {
          villageId: villageStore.currentVillage?.id ?? undefined,
        })">
          <Text text="关注人数" fontConfig="contentText" />
          <Text :text="villageInfoLoader.content.value?.followerCount" fontConfig="importantTitle" />
          <Height :size="36" />
        </Touchable>
        <Divider type="vertical" />
        <Button 
          :padding="0" 
          type="text" 
          size="small" 
          textColor="text.title"
          text="新手上路" 
          rightIcon="arrow-right" 
          @click="handleGoNew()"
        />
      </FlexRow>
    </BackgroundBox>

    <!-- 排行榜 -->
    <HomeTitle 
      title="排行榜" 
      showMore 
      @moreClicked="navTo('/pages/home/village/rank/volunteer', {
        villageId: villageStore.currentVillage?.id ?? undefined,
      })" 
    />
    <RoundTags v-model:active="rankActiveTag" :tags="['乡源果', '志愿者', '乡源光']" />
    <VillageUserRankList 
      :list="villageUserRankListLoader.content.value ?? []" 
      @goDetails="navTo('/pages/home/village/volunteer/detail', { id: $event.id })"
    />

    <!-- 魅力乡源 -->
    <HomeTitle title="魅力乡源" showMore @moreClicked="handleGoCollect()">
      <template #right>
        <Touchable 
          :padding="[15, 20]"
          :innerStyle="{ 
            marginRight: '20rpx'
          }"
          borderStyle="solid"
          borderColor="border.secondary"
          borderWidth="1px"
          backgroundColor="background.quaternary"
          radius="radius.md"
          direction="row"
          center
          gap="gap.sm"
          @click="handleGoCollect()"
        >
          <Icon name="https://xy.wenlvti.net/app_static/images/village/IconHistory.png" :size="30" />
          <Text text="共编村史" fontConfig="contentText" />
        </Touchable>
      </template>
    </HomeTitle>
    <ProvideVar :vars="{
      GridItemIconSize: 90,
      GridItemBackgroundColor: 'transparent',
      GridItemPaddingHorizontal: 0,
      GridItemPaddingVertical: 8,
    }">
      <Grid :borderGrid="false" :mainAxisCount="4">
        <GridItem title="村社概况" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeIntrod.png" touchable @click="handleGoCollect(11, '村社概况')" />
        <GridItem title="自然风光" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeEnvirounment.png" touchable @click="handleGoCollect(13, '自然风光')" />
        <GridItem title="历史沿革" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHistory.png" touchable @click="handleGoCollect(2, '历史沿革')" />
        <GridItem title="特色产业" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeIndustry.png" touchable @click="handleGoCollect(9, '特色产业'  )"    />
        <GridItem title="文艺活动" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeActivity.png" touchable @click="handleGoCollect(12, '文艺活动')" />
        <GridItem title="非遗展示" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeShow.png" touchable @click="handleGoCollect(10, '非遗展示')" />
        <GridItem title="民俗风采" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeFolkloreVibe.png" touchable @click="handleGoCollect(8, '民俗风采')" />
        <GridItem title="历史人物" icon="https://xy.wenlvti.net/app_static/images/village/IconGoods.png" touchable @click="handleGoCollect(7, '历史人物')" />
      </Grid>
    </ProvideVar>

    <!-- 活力乡源 -->
    <HomeTitle title="活力乡源" />
    <ProvideVar :vars="{
      GridItemIconSize: 90,
      GridItemBackgroundColor: 'transparent',
      GridItemPaddingHorizontal: 0,
      GridItemPaddingVertical: 8,
    }">
      <Grid :borderGrid="false" :mainAxisCount="4">
        <GridItem title="乡源荣光" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHornor.png" touchable @click="handleGoCollect(23, '乡源荣光')" />
        <GridItem title="乡源好物" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGoods.png" touchable @click="navTo('/pages/home/village/goods/index')" />
        <GridItem title="乡源树" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeTree.png" touchable @click="emit('goTree')" />
        <!-- <GridItem title="政贤连心" icon="https://xy.wenlvti.net/app_static/images/village/IconGovAffairs.png" touchable @click="navTo('/pages/home/village/gov/index')" /> -->
        <GridItem title="互动游戏" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGame.png" touchable @click="navTo('/pages/home/village/games/index')" />
      </Grid>
    </ProvideVar>

    <!-- 文脉乡源 -->
    <HomeTitle title="文脉乡源">
      <template #right>
        <Touchable
          :padding="[15, 20]"
          :innerStyle="{ marginRight: '20rpx' }"
          direction="row"
          center
          gap="gap.md"
          @click="handleGoPublish()"
        >
          <Icon name="https://xy.wenlvti.net/app_static/images/village/IconLargeHistory.png" :size="30" />
          <Text text="AI帮你写" fontConfig="contentText" />
        </Touchable>
      </template>
    </HomeTitle>
    <RoundTags v-model:active="listActiveTag" :tags="['广场', '老味道', '老手艺', '老物件', '老故事']" />
  </FlexCol>
  <OfficialAccountPublishWrap
    :topic="recommendTagName" 
    @publishsuccess="onPublishSuccess"
  />

  <JoinDialog
    ref="joinDialog" 
    v-if="villageStore.currentVillage"
    :villageId="villageStore.currentVillage.id" 
  />
  <UpgradeDialog 
    ref="applyGoodsDialog" 
    v-if="villageStore.currentVillage"
    :villageId="villageStore.currentVillage.id"
  />
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useUserTools } from '@/common/composeabe/UserTools';
import { useOfficialAccount } from '../../composeabe/OfficialAccount';
import { useAuthStore } from '@/store/auth';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useVillageStore } from '@/store/village';
import { useRequireLogin } from '@/common/composeabe/RequireLogin';
import { useFollow } from '../composeabe/Follow';
import { confirm, toast } from '@/components/utils/DialogAction';
import { ArrayUtils } from '@imengyu/imengyu-utils';
import { navTo } from '@/components/utils/PageAction';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import Button from '@/components/basic/Button.vue';
import Icon from '@/components/basic/Icon.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import VillageMiniMap from '../../components/VillageMiniMap.vue';
import Divider from '@/components/display/Divider.vue';
import RoundTags from '@/common/components/parts/RoundTags.vue';
import VillageUserRankList from '../../components/VillageUserRankList.vue';
import BackgroundImageButton from '@/components/basic/BackgroundImageButton.vue';
import ProvideVar from '@/components/theme/ProvideVar.vue';
import Grid from '@/components/layout/grid/Grid.vue';
import GridItem from '@/components/layout/grid/GridItem.vue';
import LightVillageApi from '@/api/light/LightVillageApi';
import Construction from '@/common/components/Construction.vue';
import OfficialAccountPublishWrap from '@/common/components/OfficialAccountPublishWrap.vue';
import UpgradeDialog from '../dialogs/UpgradeDialog.vue';
import JoinDialog from '../dialogs/JoinDialog.vue';
import VillageGallery from '../components/VillageGallery.vue';
import WxButton from '@/components/basic/WxButton.vue';
import Height from '@/components/layout/space/Height.vue';

const authStore = useAuthStore();
const { getIsVolunteer } = useUserTools();
const { requireLogin } = useRequireLogin();
const { onPublishSuccess } = useOfficialAccount();
const { isFollowed, onFollow, onUnFollow } = useFollow();
const villageStore = useVillageStore();
const { getIsJoinedVillage } = useUserTools();
const isJoined = ref(false);
const villageInfoLoader = useSimpleDataLoader(async () => {
  const village = villageStore.currentVillage;  
  if (village) 
    isJoined.value = await getIsJoinedVillage(village.id);
  return {
    title: village?.name || '',
    desc: village?.desc || '',
    address: village?.address,
    applyCount: village?.applyCount || 0,
    sizeText: village?.sizeText || 0,
    levelText: village?.level.toString() || '',
    rankText: village?.rank.toString() || '',
    light: village?.light as number || 0,
    memberCount: village?.volunteerCount as number || 0,
    followerCount: village?.followCount as number || 0,
    images: village?.images || [],
    longitude: village?.longitude as number || 0,
    latitude: village?.latitude as number || 0,
  };
});

const emit = defineEmits<{
  (e: 'goTree'): void;
}>();

const joinDialog = ref();

const rankActiveTag = ref('乡源果');
const listActiveTag = ref('广场');

const villageUserRankListLoader = useSimpleDataLoader(async () => {
  const res = (await LightVillageApi.getVolunteerRankList({ 
    num: 3,
    village_id: villageStore.currentVillage?.id ?? undefined,
  }))
    .map((item, i) => ({
      id: item.id,
      image: item.image ?? '',
      title: item.name,
      rank: i + 1,
      score: item.points,
    }));
  if (res.length >= 3) {
    //移动第一名到中间
    const first = res[0];
    ArrayUtils.removeAt(res, 0);
    ArrayUtils.insert(res, 1, first);
  }
  return res
});

watch(rankActiveTag, () => {
  villageUserRankListLoader.reload();
});



const recommendTagName = computed(() => {
  return '亮乡源·' + villageInfoLoader.content.value?.title + '·' + listActiveTag.value;
});

function handleGoJoin() {
  if (isJoined.value)
    return;
  joinDialog.value.show();
}
function handleGoNew() {
  navTo('/pages/home/light/help/new');
}
function handleGoCollect(collectModuleId?: number, title?: string) {
  if (!collectModuleId) {
    navTo('/pages/dig/details', {
      villageId: villageStore.currentVillage?.id ?? undefined,
      name: villageInfoLoader.content.value?.title,
    });
    return;
  }
  navTo('/pages/dig/forms/list-ordinary', {
    villageId: villageStore.currentVillage?.id ?? undefined,
    collectModuleId: collectModuleId,
    title: title,
  });
}
function handleGoPublish() {
  requireLogin(async () => {
    navTo('/pages/chat/dependent/post/publish', {
      tag: recommendTagName.value,
      villageId: villageStore.currentVillage?.id ?? undefined,
    });
  }, '欢迎使用AI助手，登录后以便使用更多功能哦！');
}

watch(() => villageStore.currentVillage, () => {
  villageInfoLoader.reload();
  villageUserRankListLoader.reload();
}, { immediate: true });
</script>