xiangyuan-app/src/pages/home/village/introd/card.vue

<template>
  <SimplePageContentLoader :loader="pageThemeLoader">
    <ProvideVar 
      v-if="pageThemeLoader.content.value" 
      :vars="pageThemeLoader.content.value.props?.varOvrride"
      :colors="pageThemeLoader.content.value.props?.colorOvrride"
    >
  
      <FlexRow center :padding="[0,30]">
        <HomeLargeTitle title="村社名片" :active="true" />
        <Width :width="30" />
        <HomeLargeTitle title="乡源树" titleColorAnim @click="emit('goTree')">
          <template #icon>
            <Image src="https://xy.wenlvti.net/app_static/images/village/TreeIconAmin2.gif" :width="34" :height="50" mode="heightFix" />
          </template>
        </HomeLargeTitle>
        <Width :width="30" />
      </FlexRow>

      <DynamicX 
        :page="pageThemeLoader.content.value"
        :injectScriptGlobal="pageScriptGlobal"
      >
        <template #default="{ page, context }">
          
          <DynamicXNodeChild :node="page">
            <template #nodeRender="{ node }">

              <FlexCol v-if="node.type === 'Card:Basic'" gap="gap.md">
                <!-- 标题 -->
                <FlexRow justify="space-between" gap="gap.lg" wrap align="center" width="100%">
                  <FlexRow gap="gap.md">
                    <Text 
                      :text="title" 
                      :lines="1" 
                      :fontSize="40"
                      wordBreak="break-all"
                      fontConfig="primaryTitle"
                    />
                  </FlexRow>
                  <FlexRow flex="1" justify="space-between" align="center" gap="gap.lg">
                    <IconButton icon="cascades" :size="40" @click="shareQRDialog?.show()" />
                    <FlexRow align="center" gap="gap.lg">
                      <BubbleTip
                        v-model:show="showFollowTip"
                        content="关注我，方便下次进入"
                        @contentClick="isFollowed ? undefined : onFollow()"
                        @close="handleCloseFollowTip"
                      >
                        <Button 
                          :icon="isFollowed ? 'success' : 'https://xy.wenlvti.net/app_static/images/village/IconJoin.png'" 
                          radius="radius.lgr"
                          :text="isFollowed ? (title.length < 5 ? '已关注' : '') : '关注'"
                          :padding="[15, 10]"
                          :iconProps="{ size: 38 }"
                          @click="isFollowed ? onUnFollow() : onFollow()"
                        />
                      </BubbleTip>
                      <FlexRow 
                        v-if="isJoined"
                        gap="gap.md"
                        radius="radius.lgr"
                        backgroundColor="background.tertiary"
                      >
                        <Avatar 
                          :src="authStore.userInfo?.avatar" 
                          :size="65"
                          defaultAvatar="https://xy.wenlvti.net/app_static/images/mine/DefaultAvatar.png"
                        />
                        <FlexCol position="relative" gap="gap.sm" :padding="[0,30,0,0]">
                          <FlexRow align="center" :gap="10">
                            <Text :text="displayMyName" fontSize="23" :lines="1" :maxWidth="150" fontConfig="lightImportantTitle" />
                            <Button 
                              v-if="isStaff" 
                              :innerStyle="{ position: 'absolute', right: 0, top: 0, transform: 'translate(5%,-50%)' }"
                              text="管理" size="mini" radius="radius.md" type="danger" 
                              @click="staffInfoRef?.show()" 
                            />
                          </FlexRow>
                          <IconButton icon="edit-filling" size="26" @click="changeNickRef?.show()">
                            <Text text="改昵称" :wrap="false" fontSize="22" fontConfig="subText" />
                          </IconButton>
                        </FlexCol>
                      </FlexRow>
                      <Button 
                        v-else
                        icon="https://xy.wenlvti.net/app_static/images/village/IconFollow.png"
                        radius="radius.lgr"
                        text="加入"
                        @click="handleGoJoin()"
                      />
                    </FlexRow>
                  </FlexRow>
                </FlexRow>

                <!-- 简介 -->
                <TextEllipsis 
                  fontConfig="secondText"
                  :outerProps="{ direction: 'row', width: '490rpx' }"
                  :lines="1" 
                  :expandable="(villageInfoLoader.content.value?.desc as string || '').length > 20"
                  :text="(villageInfoLoader.content.value?.desc as string) || '暂无简介，欢迎您来编写完善！'"
                  wordBreak="break-all"
                  @expand="descOpen = true;"
                  @collapse="descOpen = false;"
                />

              </FlexCol>
              <template v-else-if="node.type === 'Card:Level'">

                <!-- 状态与申请 -->
                <FlexRow 
                  backgroundColor="background.tertiary" 
                  radius="radius.md" 
                  padding="space.md" 
                  justify="space-between" 
                >
                  <FlexRow align="center">
                    <FlexCol gap="gap.md"> 
                      <FlexRow gap="gap.lg" align="center">
                        <Icon v-if="villageInfoLoader.content.value?.vipLevel === 4" name="https://xy.wenlvti.net/app_static/images/village/IconGov.png" :size="70" />
                        <Text :text="`${villageInfoLoader.content.value?.vipLevelText || '默认级别'}`" fontConfig="secondText" />  
                      </FlexRow>
                      <Text v-if="villageInfoLoader.content.value?.sizeLimit" :text="`存储空间：${villageInfoLoader.content.value?.sizeText || ''}`" :fontSize="22" fontConfig="secondText" />
                      <Text v-else text="无限存储空间" :fontSize="22" fontConfig="secondText" />
                    </FlexCol>
                  </FlexRow>
                  <FlexRow align="center" gap="gap.md">
                    <IconButton icon="help-filling" @click="navTo('/pages/article/details', { id: 7021, modelId: 18, showRecommend: false })" />
                    <Button 
                      v-if="(villageInfoLoader.content.value?.vipLevel || 0) < 4" 
                      icon="https://xy.wenlvti.net/app_static/images/village/IconUser.png" 
                      radius="radius.lgr" 
                      :padding="[10, 30]" 
                      backgroundColor="white" 
                      text="升级村社"
                      @click="upgradeRef?.show()"
                    />
                  </FlexRow>
                </FlexRow>

              </template>
              <template v-else-if="node.type === 'Card:Gallery'">
                
                <!-- 图片 -->
                <VillageGallery
                  v-if="villageInfoLoader.content.value"
                  ref="villageGalleryRef"
                  :villageId="villageStore.currentVillage?.id ?? 0" 
                  @goGallery="handleGoGallery"
                />

              </template>
              <template v-else-if="node.type === 'Card:AddressAndMap'">
                
                <!-- 地图 -->
                <VillageMiniMap 
                  v-if="villageInfoLoader.content.value"
                  :lonlat="{ 
                    longitude: villageInfoLoader.content.value.longitude, 
                    latitude: villageInfoLoader.content.value.latitude 
                  }" 
                  :currentNoticeContent="currentNoticeContent"
                >
                  <FlexRow position="absolute" :inset="{ l: 13, r: 13, b: 13 }" center :zIndex="100">
                    <FlexRow align="center" gap="gap.sm" backgroundColor="background.tertiary" radius="radius.lg" padding="padding.sm">
                      <Icon name="https://xy.wenlvti.net/app_static/images/village/IconMap.png" size="fontSize.md" />
                      <Text :text="villageInfoLoader.content.value?.address" :maxWidth="550" fontConfig="contentText" fontSize="fontSize.sm" />
                    </FlexRow>
                  </FlexRow>
                </VillageMiniMap>

              </template>
              <template v-else-if="node.type === 'Card:Static'">
                
                <!-- 村社状态信息 -->
                <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?.level}级`" fontConfig="primaryTitle" />
                  </FlexRow>
                </FlexRow>
                
                <Height height="gap.md" />

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

              </template>
              <template v-else-if="node.type === 'Block:Rank'">

                <!-- 排行榜 -->
                <HomeTitle 
                  :title="node.props?.title" 
                  showMore 
                  @moreClicked="navTo('/pages/home/village/rank/volunteer', {
                    villageId: villageStore.currentVillage?.id ?? undefined,
                  })" 
                />
                <Height height="gap.md" />
                <VillageUserRankList 
                  :list="villageUserRankListLoader.content.value ?? []" 
                  scoreSuffix="文化积分"
                  @goDetails="navTo('/pages/home/village/volunteer/detail', { id: $event.id })"
                />

              </template>
              <template v-else-if="node.type === 'Block:Collect'">

                <!-- 魅力乡源 -->
                <HomeTitle 
                  :title="node.props?.title" 
                  showMore 
                  @moreClicked="handleGoCollect()"
                >
                  <template #right>
                    <FlexRow align="center" gap="gap.md">
                      <FrameButton
                        text="管理" 
                        size="small" 
                        primary
                        @click="handleGoDigManage()"
                      />
                      <FrameButton
                        text="共编村史" 
                        icon="https://xy.wenlvti.net/app_static/images/village/IconHistory.png"
                        size="small"
                        @click="handleGoCollect()"
                      />
                      <Width :size="15" />
                    </FlexRow>
                  </template>
                </HomeTitle>
                <Height height="gap.md" />
                <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>

              </template>
              <template v-else-if="node.type === 'Block:Games'">

                <!-- 活力乡源 -->
                <HomeTitle :title="node.props?.title" />
                <Height height="gap.md" />
                <ProvideVar :vars="{
                  GridItemIconSize: 90,
                  GridItemBackgroundColor: 'transparent',
                  GridItemPaddingHorizontal: 0,
                  GridItemPaddingVertical: 8,
                }">
                  <Grid :borderGrid="false" :mainAxisCount="4">
                    <GridItem 
                      v-for="item in node.props?.items" 
                      :key="item.title"
                      :title="item.title"
                      :icon="item.icon"
                      touchable 
                      @click="() => context.getScriptEngine().execute(item.handler, node.getNodeScriptContext?.())" 
                    />
                  </Grid>
                </ProvideVar>

              </template>
              <template v-else-if="node.type === 'Block:Official'">

                <!-- 文脉乡源 -->
                <HomeTitle :title="node.props?.title">
                  <template #right>
                    <FlexRow align="center" gap="gap.md">
                      <BubbleTip
                        v-model:show="showManageTip"
                        position="bottom"
                        crossPosition="right"
                        arrowOffsetX="180rpx"
                        content="村社贴图太乱？点这里整理"
                        @contentClick="handleCloseManageTip(true)"
                        @close="handleCloseManageTip(false)"
                      >
                        <FrameButton
                          text="管理" 
                          size="small" 
                          primary
                          @click="handleGoOfficalManage()"
                        />
                      </BubbleTip>
                      <FrameButton 
                        text="乡源AI帮你写" 
                        size="small" 
                        icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHistory.png"
                        @click="handleGoPublish()" 
                      />
                    </FlexRow>
                  </template>
                </HomeTitle>
                <Height height="gap.md" />
                <RoundTags 
                  v-model:active="listActiveTag" 
                  :tags="tagsLoader.content.value || []" 
                />
                <Height height="gap.md" />
                <OfficialAccountPublishWrap
                  :topic="recommendTagName" 
                  :path="recommendPath"
                  @publishsuccess="onPublishSuccess"
                  @empty="isOfficialEmpty=true"
                />

              </template>
            </template>
          </DynamicXNodeChild>
        </template>
      </DynamicX>
    </ProvideVar>
  </SimplePageContentLoader>

  <UpgradeDialog 
    ref="upgradeRef"
    v-if="villageStore.currentVillage"
    :villageId="villageStore.currentVillage.id"
  />
  <ChangeNickDialog 
    v-if="villageStore.currentVillage"
    :villageId="villageStore.currentVillage.id"
    :currentNick="displayMyName"
    ref="changeNickRef"
  />  
  <StaffInfoDialog 
    v-if="villageStore.currentVillage && staffInfo"
    :villageId="villageStore.currentVillage.id"
    :staffEndTime="staffInfo.staffEndTime"
    :staffSource="staffInfo.staffSource"
    :staffTimeType="staffInfo.staffTimeType"
    ref="staffInfoRef"
  />  
  <ShareQRDialog 
    v-if="villageStore.currentVillage"
    :villageId="villageStore.currentVillage.id"
    ref="shareQRDialog"
  /> 
  <Popup 
    :show="showUnLight"
    :zIndex="100"
    size="45%"
    position="bottom"
    backgroundColor="transparent"
  >
    <FlexCol center>
      <BackgroundBox 
        backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxDialog.png"
        :backgroundCutBorder="48"
        :backgroundCutBorderSize="48"
        :padding="40"
        direction="column"
        center
        width="600rpx"
        gap="gap.md"
      >
        <Image src="https://xy.wenlvti.net/app_static/images/home/BadgeNew.png" :width="320" mode="widthFix" />
        <Text :text="`${villageStore.currentVillage?.name}暂未点亮`" fontConfig="primaryTitle" />
        <Text text="等你的加入，快来为家乡建设做贡献吧" fontConfig="contentText" />
        <Height :height="20" />
        <FlexRow gap="gap.lg">
          <FrameButton :text="isFollowed ? '已关注' : '先关注村社'" @click="isFollowed ? onUnFollow() : onFollow()" />
          <FrameButton text="去申请点亮" @click="handleGoJoin" primary />
        </FlexRow>
      </BackgroundBox>
      <Height :size="300" />
    </FlexCol>
  </Popup>
</template>

<script setup lang="ts">
import { computed, inject, reactive, ref, watch, type Ref } 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 { useGetNotice } from '../composeabe/GetNotice';
import { assertNotNull, FormatUtils, waitTimeOut } from '@imengyu/imengyu-utils';
import { navTo } from '@/components/utils/PageAction';
import { alert, confirm } from '@/components/dialog/CommonRoot';
import { isDevEnv } from '@/common/config/AppCofig';
import { defaultTags } from './data/DefaultTag';
import DefaultCard from './data/DefaultCard.json';
import HomeTitle from '@/common/components/parts/HomeTitle.vue';
import Icon from '@/components/basic/Icon.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 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 OfficialAccountPublishWrap from '@/common/components/OfficialAccountPublishWrap.vue';
import UpgradeDialog from '../dialogs/UpgradeDialog.vue';
import VillageGallery from '../components/VillageGallery.vue';
import WxButton from '@/components/basic/WxButton.vue';
import Height from '@/components/layout/space/Height.vue';
import IconButton from '@/components/basic/IconButton.vue';
import Button from '@/components/basic/Button.vue';
import BubbleTip from '@/components/feedback/BubbleTip.vue';
import MemoryTimeOut from '@/components/composeabe/MemoryTimeOut';
import TextEllipsis from '@/components/display/TextEllipsis.vue';
import OfficialApi from '@/api/light/OfficialApi';
import FrameButton from '@/common/components/FrameButton.vue';
import Width from '@/components/layout/space/Width.vue';
import Popup from '@/components/dialog/Popup.vue';
import Image from '@/components/basic/Image.vue';
import Avatar from '@/components/display/Avatar.vue';
import ChangeNickDialog from '../dialogs/ChangeNickDialog.vue';
import StaffInfoDialog from '../dialogs/StaffInfoDialog.vue';
import ShareQRDialog from '../dialogs/ShareQRDialog.vue';
import DynamicX from '@/components/dynamic/DynamicX.vue';
import type { DynamicXPage } from '@/components/dynamic/DynamicX';
import DynamicXNodeChild from '@/components/dynamic/x/DynamicXNodeChild.vue';
import SimplePageContentLoader from '@/components/loader/SimplePageContentLoader.vue';
import HomeLargeTitle from '@/common/components/parts/HomeLargeTitle.vue';

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

const authStore = useAuthStore();
const { getIsVolunteer } = useUserTools();
const { requireLogin } = useRequireLogin();
const { onPublishSuccess, makeOfficialPublishLinkPathAndParams } = useOfficialAccount(() => {
  return {
    villageId: villageStore.currentVillage?.id ?? 0,
    userId: authStore.userId,
    tag: recommendTagName.value,
  };
});
const villageStore = useVillageStore();
const { isFollowed, onFollow, onUnFollow } = useFollow();
const { getIsJoinedVillage } = useUserTools();
const isOfficialEmpty = ref(false);
const isJoined = ref(false);
const villageInfoLoader = useSimpleDataLoader(async () => {
  const village = villageStore.currentVillage;  
  try {
    if (village) 
      isJoined.value = await getIsJoinedVillage(village.id);
  } catch (e) {
    console.error(e);
    isJoined.value = false;
  }
  handleShowFollowTip();
  isOfficialEmpty.value = false;
  showUnLight.value = !villageStore.currentVillage?.isLight;
  setTimeout(() => {
    handleManageFollowTip();
  }, 3000);
  return {
    title: village?.name || '',
    desc: village?.desc || '',
    address: village?.address,
    sizeText: `${FormatUtils.formatSize(village?.storageUsed || 0)}/${FormatUtils.formatSize(village?.storageLimit || 0)}`,
    sizeLimit: (village?.storageLimit || 0) >= 0,
    level: village?.level || 1,
    vipLevel: village?.vipLevel || 0,
    vipLevelText: village?.vipName ? `已升级 · ${village?.vipName}` : '',
    rankText: village?.rank.toString() || '',
    light: village?.light || 0,
    memberCount: village?.volunteerCount || 0,
    followerCount: village?.followCount || 0,
    images: village?.images || [],
    longitude: village?.longitude || 0,
    latitude: village?.latitude || 0,
  };
});
const isLight = computed(() => villageStore.currentVillage?.isLight ?? false);
const title = computed(() => villageInfoLoader.content.value?.title || '');
const extraInfoInList = computed(() => villageStore.myJoinedVillages.find(v => v.id === villageStore.currentVillage?.id));
const displayMyName = computed(() => extraInfoInList.value?.villageNickname || authStore.userInfo?.nickname || authStore.userInfo?.username || '暂无昵称');
const staffInfo = computed(() => extraInfoInList.value ? {
  type: extraInfoInList.value.type as string,
  staffEndTime: extraInfoInList.value.staffEndTime as Date,
  staffSource: extraInfoInList.value.staffSource as number,
  staffTimeType: extraInfoInList.value.staffTimeType as number,
} : null);
const isStaff = computed(() => staffInfo.value?.type === 'staff');

const shareQRDialog = ref<InstanceType<typeof ShareQRDialog>>();

const descOpen = ref(false);
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.avatar ?? '',
      title: item.name,
      rank: i + 1,
      score: item.points,
    }));
  return res
});

const showFollowTipTimeout = new MemoryTimeOut('FollowTip', 1000 * 3600);//1h
const showFollowTip = ref(false);

function handleShowFollowTip() {
  if (!isFollowed.value && isLight.value && showFollowTipTimeout.isTimeout()) {
    showFollowTip.value = true;
  }
}
function handleCloseFollowTip() {
  showFollowTipTimeout.recordTime();
}

const showUnLight = ref(false);
const showManageTipTimeout = new MemoryTimeOut('VillageManageTip', 1000 * 3600 * 20);//30h
const showManageTip = ref(false);

function handleManageFollowTip() {
  if (showManageTipTimeout.isTimeout() && !isOfficialEmpty.value)
    showManageTip.value = true;
}
function handleCloseManageTip(goComp: boolean) {
  showManageTipTimeout.recordTime();
}

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

function handleGoJoin() {
  if (isJoined.value)
    return;
  requireLogin(async () => emit('goJoin'), '登录后就可以加入村社啦');
}
function handleGoNew() {
  navTo('/pages/article/common/list', {
    modelId: 18,
    mainBodyColumnId: 356,
    title: '新手上路',
  });
}
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/home/chat/dependent/post/publish', {
      tag: recommendTagName.value,
      villageId: villageStore.currentVillage?.id ?? undefined,
    });
  }, '登录后以便发布文章使用更多功能哦！');
}
function handleGoGallery() {
  navTo('/pages/home/village/gallery/index', { 
    villageId: villageStore.currentVillage?.id ?? 0 ,
    maxCount: villageStore.currentVillage?.imageLimit || 3,
  });
}
function handleGoSkin() {
  navTo('/pages/home/village/introd/config', { 
    villageId: villageStore.currentVillage?.id ?? 0 ,
  });
}

const staffInfoRef = ref<InstanceType<typeof StaffInfoDialog>>();

async function checkIsStaff(needTopic?: boolean) {
  assertNotNull(villageStore.currentVillage?.id)
  if (isDevEnv)
    return true;
  const isAdmin = needTopic ? 
    await OfficialApi.checkTopicRule(villageStore.currentVillage.id)
    : (authStore.isAdmin || isStaff.value);
  if (!isAdmin) {
    if (needTopic && (isStaff.value || authStore.isAdmin)) {
      alert({
        title: '提示',
        content: '您暂无管理贴图权限，无法管理贴图哦。可联系客服询问原因。',
      });
    } else {
      const goUpgrade = await confirm({
        title: '提示',
        content: '您还不是管理员，无法管理'
          + (needTopic ? '贴图' : '内容') 
          + '。您可以联系村社管理员将你添加为管理员，若当前村社暂无管理员，您可以点击“去升级”将您升级为管理员。',
        confirmText: '去升级',
        cancelText: '取消',
      });
      if (goUpgrade) {
        navTo('/pages/home/village/upgrade/my-upgrade-management', {
          villageId: villageStore.currentVillage.id,
        });
      }
    }
    return false;
  }
  return true;
}

async function handleGoOfficalManage() {
  assertNotNull(villageStore.currentVillage?.id)
  if (!await checkIsStaff(true)) 
    return;
  navTo('/pages/home/village/post/management-list', {
    villageId: villageStore.currentVillage.id,
    topic: recommendTagName.value,
  });
}
async function handleGoEdit() {
  assertNotNull(villageStore.currentVillage?.id)
  if (!await checkIsStaff())
    return;
  navTo('/pages/home/village/introd/edit', {
    villageId: villageStore.currentVillage.id,
  });
}
async function handleGoDigManage() {
  assertNotNull(villageStore.currentVillage?.id)
  if (!await checkIsStaff())
    return;
  navTo('/pages/dig/details', {
    name: villageStore.currentVillage.title,
    villageId: villageStore.currentVillage.id,
  });
}

const { currentNoticeContent, noticeListLoader } = useGetNotice(() => villageStore.currentVillage?.id || 0);

const upgradeRef = ref<InstanceType<typeof UpgradeDialog>>();
const villageGalleryRef = ref<InstanceType<typeof VillageGallery>>();
const changeNickRef = ref<InstanceType<typeof ChangeNickDialog>>();

const pageScriptGlobal = reactive({
  handleGoGallery,
  handleGoSkin,
  handleGoEdit,
  handleGoDigManage,
  handleGoCollect,
  getVillageId: () => villageStore.currentVillage?.id ?? 0,
  getDefaultTags: () => defaultTags,
  navTo,
  emit,

});

const topBanner = inject('topBanner') as Ref<string>;

const pageThemeLoader = useSimpleDataLoader(async () => {
  //TODO: 加载村社主题
  const page = DefaultCard as DynamicXPage;
  topBanner.value = page.props?.topBanner || 'https://xy.wenlvti.net/app_static/images/home/BannerHome.png';
  return page;
});
const tagsLoader = useSimpleDataLoader(async () => {
  //TODO: 加载村社话题
  return defaultTags;
});

watch(() => villageStore.currentVillage, async () => {
  await waitTimeOut(100);
  await villageInfoLoader.reload();
  await waitTimeOut(100);
  await villageUserRankListLoader.reload();
  await waitTimeOut(100);
  await noticeListLoader.reload();
}, { immediate: true });

defineExpose({
  onPageBack: (name: string, data: Record<string, unknown>) => {
    if (name === 'refreshVillageGrallery') {
      villageGalleryRef.value?.refresh();
    } else if (name === 'refreshOfficialAccount') {
      const tag = listActiveTag.value;
      listActiveTag.value = '';
      setTimeout(() => listActiveTag.value = tag, 100);
    } else if (name === 'showVillageUpgrade') {
      upgradeRef.value?.show();
    } else if (name === 'backShowVillageJoin') {
      handleGoJoin();
    } 
  },
});
</script>