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

<template>
  <DynamicX 
    :page="page"
    :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="node.props?.tags" 
            />
            <Height height="gap.md" />
            <OfficialAccountPublishWrap
              :topic="recommendTagName" 
              :path="recommendPath"
              @publishsuccess="onPublishSuccess"
              @empty="isOfficialEmpty=true"
            />

          </template>
        </template>
      </DynamicXNodeChild>
    </template>
  </DynamicX>

  <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, reactive, 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 { 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 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 Badge from '@/components/display/Badge.vue';
import { isDevEnv } from '@/common/config/AppCofig';

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,
  });
}

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,
  handleGoEdit,
  handleGoDigManage,
  handleGoCollect,
  getVillageId: () => villageStore.currentVillage?.id ?? 0,
  navTo,
  emit,
});
const page : DynamicXPage = {
  name: 'VILLAGE',
  type: 'page',
  nodes: [
    {
      name: 'VILLAGE:CONTENT',
      type: 'flex',
      props: {
        direction: 'column',
        padding: [30,30,0,30],
        gap: "gap.lg"
      },
      nodes: [
        {
          name: 'VILLAGE:CONTENT:Basic',
          type: 'BackgroundBox',
          props: {
            color1: "#eecaa0",
            color2: "white",
            color2Position: "85%",
            color3: "white",
            radius: "radius.lg",
            direction: "column",
            padding: [35,30],
            gap: "gap.lg",
          },
          nodes: [
            {
              type: 'Card:Basic',
            },
            {
              type: 'Card:Level',
            },
            {
              type: 'Card:Gallery',
            },
            {
              type: 'Card:AddressAndMap',
            },
            {
              type: 'flex',
              props: {
                direction: 'row',
                justify: "center" ,
                align: "center",
                gap:"gap.md",
              },
              nodes: [
                {
                  type: 'button',
                  props: {
                    size: "mini",
                    icon: "picture",
                    text: "村社相册",
                  },
                  events: {
                    click: 'globalContext.handleGoGallery()',
                  },
                },
                {
                  type: 'button',
                  props: {
                    size: "mini",
                    icon: "edit-filling",
                    text: "编辑简介",
                  },
                  events: {
                    click: 'globalContext.handleGoEdit()',
                  },
                },
                {
                  type: 'button',
                  props: {
                    size: "mini",
                    icon: "fabulous",
                    text: "主页换肤",
                  },
                  events: {
                    click: 'globalContext.handleGoDigManage()',
                  },
                },
              ],
            },
            {
              type: 'Card:Static',
            },
          ],
        },
        {
          name: 'VILLAGE:CONTENT:Rank',
          type: 'Block:Rank',
          props: {
            title: '排行榜',
          },
        },
        {
          name: 'VILLAGE:CONTENT:Collect',
          type: 'Block:Collect',
          props: {
            title: '魅力乡源',
          },
        },
        {
          name: 'VILLAGE:CONTENT:Games',
          type: 'Block:Games',
          props: {
            title: '活力乡源',
            items: [
              {
                title: '乡源荣光',
                icon: 'https://xy.wenlvti.net/app_static/images/village/IconLargeHornor.png',
                handler: 'globalContext.handleGoCollect(23, \'乡源荣光\')',
              },
              {
                title: '乡源好物',
                icon: 'https://xy.wenlvti.net/app_static/images/village/IconLargeGoods.png',
                handler: 'globalContext.navTo("/pages/home/village/goods/index", { villageId: globalContext.getVillageId() })',
              },
              {
                title: '乡源树',
                icon: 'https://xy.wenlvti.net/app_static/images/village/IconLargeTree.png',
                handler: 'globalContext.emit("goTree")',
              },
              {
                title: '互动游戏',
                icon: 'https://xy.wenlvti.net/app_static/images/village/IconLargeGame.png',
                handler: 'globalContext.navTo("/pages/home/village/games/index")',
              },
            ]
          },
        },
        {
          name: 'VILLAGE:CONTENT:Official',
          type: 'Block:Official',
          props: {
            title: '文脉乡源',
            tags: [
              '广场', '美食', '美景', 
              '故事', 
              '老手艺', '老物件'
            ]
          },
        },
      ],
    },
  ],
};

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>