<template>
  <DetailTabPage
    ref="pageRef"
    :load="load"
    :extraTabs="[
      {
        id: 5,
        name: 'VR参观',
        visible: true,
      },
      {
        id: 6,
        name: '保护范围',
        visible: true,
      },
      {
        id: 7,
        name: '建筑环境',
        visible: true,
      },
      {
        id: 8,
        name: '价值评估',
        visible: true,
      },
    ]"
  >
    <template #extraTabs="{ content, tabCurrentId }">
      <template v-if="tabCurrentId==5">
        <!-- VR参观 -->
        <view class="d-flex flex-row justify-center p-5">
          <u-button @click="handleGoToVr(content.vr as string)">
            <text class="iconfont icon-go"></text>
            点击参观
          </u-button>
        </view>
      </template>
      <template v-if="tabCurrentId==6">
        <!-- 保护范围 -->
        <u-parse :content="content.protectedArea" :tagStyle="commonParserStyle" />
      </template>
      <template v-if="tabCurrentId==7">
        <!-- 建筑环境 -->
        <u-parse :content="content.environment" :tagStyle="commonParserStyle" />
      </template>
      <template v-if="tabCurrentId==8">
        <!-- 价值评估 -->
        <u-parse :content="content.value" :tagStyle="commonParserStyle" />
      </template>
    </template>
    <template #titleEnd="{ content }">
      <u-tag 
        v-if="content.levelText"
        :text="content.levelText"
        size="mini" plain color="#d9492e"
        class="flex-shrink-0"
      />
    </template>
    <template #titleExtra="{ content }">
      <IntroBlock 
        small
        :address="(content.address as string)"
        :descItems="[
          {
            label: '开放时间',
            value: content.openStatusText
          },
          {
            label: '年代',
            value: content.age 
          },
          {
            label: '级别',
            value: content.levelText 
          },
          {
            label: '所属区域',
            value: content.regionText ,
          },
          {
            label: '文物类型',
            value: content.crTypeText, 
          }
        ]"
        @navTo="handleNavTo(content)"
      />
    </template>
  </DetailTabPage>
</template>
<script setup lang="ts">
import type { TabControlItem } from "@/common/composeabe/TabControl";
import { ref, type Ref } from "vue";
import { navTo } from "@/common/utils/PageAction";
import UnmoveableContent from "@/api/inheritor/UnmoveableContent";
import commonParserStyle from "@/common/style/commonParserStyle";
import IntroBlock from "@/pages/article/common/IntroBlock.vue";
import DetailTabPage from "@/pages/article/common/DetailTabPage.vue";
import { onShareTimeline, onShareAppMessage } from "@dcloudio/uni-app";

async function load(id: number, tabsArray: Ref<TabControlItem[]>) {
  const d = await UnmoveableContent.getContentDetail(id);
  tabsArray.value[4].visible = Boolean(d.vr);
  tabsArray.value[5].visible = Boolean(d.protectedArea);
  tabsArray.value[6].visible = Boolean(d.environment);
  tabsArray.value[7].visible = Boolean(d.value);
  return d;
}

function handleGoToVr(vr: string) {
  navTo('/pages/article/web/ewebview', { url: vr })
}
function handleNavTo(content: any) {
  navTo('../../travel/nav/navto', {
    latitude: content?.latitude,  
    longitude: content?.longitude,  
  }) 
}

const pageRef = ref();

onShareTimeline(() => {
  return pageRef.value?.getPageShareData() || {}; 
})
onShareAppMessage(() => {
  return pageRef.value?.getPageShareData() || {};
})
</script>
