YangZhouDaYunHeDaDu/src/views/PanoView.vue

<template>
  <div :class="['pano-view', (msgVisible || isShowHotspotDetail2) && 'reduceZ']">
    <div
      class="pano-wrap"
      :class="{
        hide: !haveShownSceneEffect
      }"
    >
      <iframe
        ref="panoIframe"
        :src="iframeSrc"
        frameborder="0"
      />
      <button
        class="return-home"
        @click="router.push({
          name: 'HomeView',
        })"
      />
      <button
        v-if="sceneIdx === 1"
        class="ship-btn"
        @click="router.push({
          name: 'ShipGame',
        })"
      />
      <button
        v-if="sceneIdx === 0 && cameraIdx === 0"
        class="guide-btn"
        @click="showGuide = true"
      />
      <CameraDesc
        v-if="isShowCameraDesc"
        class="camera-desc"
        @close="isShowCameraDesc = false"
      />
      <CharacterDesc
        v-if="isShowCharacterDesc"
        class="character-desc"
        @close="isShowCharacterDesc = false"
      />
      <div
        class="character-wrap"
        draggable="false"
      >
        <button
          class="name"
          @click="isShowCharacterDesc = true"
        >
          <span>赵孟頫</span>
        </button>
        <div
          :class="['character-frames-wrapper']"
          @click="onClickCharacter()"
        >
          <img
            v-show="animationType === 1"
            class="default-frames"
            src="@/assets/images/pose1-min.png"
            alt=""
            draggable="false"
          >
          <img
            v-show="animationType === 2"
            class="frames frames-2"
            :class="{
              animating: isCharacterSpecialMoving,
              state1: isCharacterSpecialMoving === 0,
              state2: isCharacterSpecialMoving === 1,
            }"
            src="@/assets/images/pose2-min.png"
            alt=""
            draggable="false"
          >
          <img
            v-show="animationType === 3"
            class="frames frames-3"
            :class="{
              animating: isCharacterSpecialMoving,
              state1: isCharacterSpecialMoving === 0,
              state2: isCharacterSpecialMoving === 1,
            }"
            src="@/assets/images/pose3-min.png"
            alt=""
            draggable="false"
          >
          <!-- <img
            v-show="animationType === 4"
            class="frames frames-4"
            :class="{
              animating: isCharacterSpecialMoving,
              state1: isCharacterSpecialMoving === 0,
              state2: isCharacterSpecialMoving === 1,
            }"
            src="@/assets/images/bow-min.png"
            alt=""
            draggable="false"
          > -->
          <img
            v-show="animationType === 5"
            class="frames frames-5"
            :class="{
              animating: isCharacterSpecialMoving,
              state1: isCharacterSpecialMoving === 0,
              state2: isCharacterSpecialMoving === 1,
            }"
            src="@/assets/images/pose4-min.png"
            alt=""
            draggable="false"
          >
        </div>
        <img
          class="btn-track"
          :src="require(`@/assets/images/people-btn-track-${sceneIdx + 1}.png`)"
          alt=""
          draggable="false"
        >
        <button
          class="one btn-on-track"
          @click="showingContentIdx = 1"
        >
          <span>{{ btnOnTrack1Name }}</span>
        </button>
        <button
          class="two btn-on-track"
          @click="showingContentIdx = 2"
        >
          <span>{{ btnOnTrack2Name }}</span>
        </button>
        <button
          class="three btn-on-track"
          @click="showingContentIdx = 3"
        >
          <span>{{ btnOnTrack3Name }}</span>
        </button>
        <button
          class="four btn-on-track"
          @click="router.push({
            name: 'RelicList',
            query: {
              sceneIdx: route.query.sceneIdx,
              cameraIdx: route.query.cameraIdx,
            }
          })"
        >
          <span>文物长卷</span>
        </button>
      </div>
      <div
        class="camera-list"
      >
        <button
          v-for="(item, idx) in currentCameraList"
          :key="idx"
          class="camera-entry"
          :class="{
            active: idx === (mouseEnterCameraItemIdx === -1 ? cameraIdx : mouseEnterCameraItemIdx)
          }"
          @mouseenter="mouseEnterCameraItemIdx = idx"
          @mouseleave="mouseEnterCameraItemIdx = -1"
          @click="router.push({
            name: route.name,
            query:{
              sceneIdx: route.query.sceneIdx,
              cameraIdx: idx,
            }
          })"
        >
          <span>{{ item.name }}</span>
          <img
            class="bg-normal"
            :src="require(`@/assets/images/camera-list-item-bg-${sceneIdx + 1}.png`)"
            alt=""
            draggable="false"
          >
          <!-- <template v-if="sceneIdx === 0 && idx > 0">
            <img
              class="bg-active"
              :src="require(`@/assets/images/camera-list-item-bg-active-1-${idx}.png`)"
              alt=""
              draggable="false"
            >
          </template> -->
          <img
            class="bg-active"
            :src="require(`@/assets/images/camera-list-item-bg-active-${sceneIdx + 1}.png`)"
            alt=""
            draggable="false"
          >
        </button>
        <button
          class="next-scene"
          @click="onClickNextScene"
        />
      </div>
    </div>
    <CameraContent1
      v-if="showingContentIdx === 1"
      class="camera-content"
      @close="showingContentIdx = 0"
    />
    <CameraContent2
      v-if="showingContentIdx === 2"
      class="camera-content"
      @close="showingContentIdx = 0"
    />
    <CameraContent3
      v-if="showingContentIdx === 3"
      class="camera-content"
      @close="showingContentIdx = 0"
    />
    <RelicDetailForHotspot
      v-if="isShowHotspotDetail"
      :relic-info="hotspotRelicInfo"
      :relic-index="hotspotIndex"
      @close="isShowHotspotDetail = false"
    />
    <HotspotDialog1
      v-if="isShowHotspotDetail2"
      :relic-info="hotspotRelicInfo"
      @close="isShowHotspotDetail2 = false"
      @open-relic-detail="(e) => {
        hotspotIndex = e
        isShowHotspotDetail = true
      }"
    />

    <!-- <OpenState /> -->
    <!-- 镜头切换过渡 -->
    <transition name="fade-in-out-slow">
      <div
        v-if="isShowCameraIntro"
        class="text-wrap"
      >
        <div
          class="text text-indent"
          v-html="cameraIntroText"
        />
        <button
          class="skip"
          @click="skipCameraIntro"
        />
        <template v-if="showScene0Camera1To2Video || showScene0Camera2To3Video || showScene1Camera1To2Video || showScene1Camera2To3Video || showScene2Camera1To2Video">
          <video
            :src="require(
              showScene0Camera1To2Video ? '@/assets/videos/scene-1-camera-1.mp4' :
              showScene0Camera2To3Video ? '@/assets/videos/scene-1-camera-2.mp4' :
              showScene1Camera1To2Video ? '@/assets/videos/scene-2-camera-1.mp4' :
              showScene1Camera2To3Video ? '@/assets/videos/scene-2-camera-2.mp4' :
              '@/assets/videos/scene-3-camera-1.mp4'
            )"
            playsinline
            autoplay
            webkit-playsinline="true"
            x5-video-player-type="h5"
            style="position: relative; z-index: -2; width: 100vw; height: 100vh; object-fit: cover;"
          />
          <div
            style="position:absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5)"
          />
        </template>

        <!-- 人物 -->
        <div :class="['text-wrap__character', charactorSpeackPositionLeft && 'left']">
          <img
            draggable="false"
            :src="require(charactorSpeackPositionLeft ? '@/assets/images/talk2-min.png' : `@/assets/images/slow_talking.png`)"
          >
        </div>
      </div>
    </transition>

    <transition name="cloud-top">
      <img
        v-if="isShowCameraIntro"
        class="cloud cloud-top"
        src="@/assets/images/cloud-top.png"
        alt=""
        draggable="false"
      >
    </transition>
    <transition name="cloud-left-bottom">
      <img
        v-if="isShowCameraIntro"
        class="cloud-left-bottom"
        src="@/assets/images/cloud-left-bottom.png"
        alt=""
        draggable="false"
      >
    </transition>
    <transition name="cloud-right-bottom">
      <img
        v-if="isShowCameraIntro"
        class="cloud-right-bottom"
        src="@/assets/images/cloud-right-bottom.png"
        alt=""
        draggable="false"
      >
    </transition>
    <!-- end of 镜头切换过渡 -->
    <!-- 场景切换过渡 -->
    <video
      v-show="isShowSceneIntroVideoStart"
      ref="sceneIntrovideoStartEl"
      class="scene-intro-video scene-intro-video-start"
      :src="require(`@/assets/videos/scene-${sceneIdx + 1}-introduction.mp4`)"
      playsinline
      webkit-playsinline="true"
      x5-video-player-type="h5"
      @ended="onPlayedFirstSceneIntroVideoEnded"
    />
    <button
      v-show="isShowSceneIntroVideoStart"
      class="skip-scene-intro"
      :style="{
        left: skipBtnLeftTop.x + 'px',
        top: skipBtnLeftTop.y + 'px',
        width: skipBtnRightBottom.x - skipBtnLeftTop.x + 'px',
        height: skipBtnRightBottom.y - skipBtnLeftTop.y + 'px',
      }"
      @click="skipFirstSceneIntro"
    />
    <!-- end of 场景切换过渡 -->

    <MsgContent
      v-if="msgVisible"
      v-model:cur-index="curMsgIndex"
      :list="ZMFMsgList"
      @end="msgVisible = false"
    />
  </div>

  <UserGuide
    v-if="showGuide"
    @close="() => {
      showGuide = false
      // isShowCharacterDesc = true
    }"
  />

  <MutiRelicHotSpot
    v-if="isShowHotspotDetail3"
    :relic-info="hotspotRelicInfo"
    @close="isShowHotspotDetail3 = false"
    @open-relic-detail="(e) => {
      hotspotIndex = e
      isShowHotspotDetail = true
    }"
  />
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick, watchEffect, onUnmounted, inject } from "vue"
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router"
import { useStore } from "vuex"
import CameraDesc from '@/components/CameraDesc.vue'
import CharacterDesc from '@/components/CharacterDesc.vue'
import { defineAsyncComponent } from 'vue'
import sceneTree from '/public/sceneTree.js'
import RelicDetailForHotspot from '@/components/RelicDetailForHotspot.vue'
import HotspotDialog1 from '@/components/HotspotDialog-1.vue'
import { useWindowSize } from '@vueuse/core'
import MsgContent from '@/components/MsgContent.vue'
import UserGuide from "@/components/UserGuide.vue"
import OpenState from './OpenState.vue'
import MutiRelicHotSpot from "@/components/MutiRelicHotSpot.vue"

const GUIDE_KEY = 'is-open-guide'
const msgVisible = ref(false)
const curMsgIndex = ref(0)
const showGuide = ref(false)

const charactorSpeackPositionLeft = ref(false)

const btnReturnHomeImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-return-home-${sceneIdx.value + 1}.png`) + ')'
})
const btnReturnHomeActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-return-home-active-${sceneIdx.value + 1}.png`) + ')'
})

const btnOnTrack1ImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'
})
const btnOnTrack1ActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1-active.png`) + ')'
})
const btnOnTrack2ImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2.png`) + ')'
})
const btnOnTrack2ActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-2-active.png`) + ')'
})
const btnOnTrack3ImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3.png`) + ')'
})
const btnOnTrack3ActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-3-active.png`) + ')'
})
const btnOnTrack4ImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-1-4.png`) + ')'
})
const btnOnTrack4ActiveImgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-1-4-active.png`) + ')'
})

const cameraListBgUrl = computed(() => {
  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-list-bg-${sceneIdx.value + 1}.png`) + ')'
})

const btnOnTrack1Name = computed(() => {
  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[0]
})
const btnOnTrack2Name = computed(() => {
  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[1]
})
const btnOnTrack3Name = computed(() => {
  return currentCameraList.value[cameraIdx.value].contentPageBtnNameList[2]
})

let CameraContent1 = defineAsyncComponent(() =>
  import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.vue`)
)
let CameraContent2 = defineAsyncComponent(() =>
  import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2.vue`)
)
let CameraContent3 = defineAsyncComponent(() =>
  import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.vue`)
)
onBeforeRouteUpdate((to, from) => {
  console.log('to: ', to)
  if (to.name === route.name) {
    CameraContent1 = defineAsyncComponent(() =>
      import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-1.vue`)
    )
    CameraContent2 = defineAsyncComponent(() =>
      import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-2.vue`)
    )
    CameraContent3 = defineAsyncComponent(() =>
      import(`@/components/CameraContent-${Number(route.query.sceneIdx) + 1}-${Number(route.query.cameraIdx) + 1}-3.vue`)
    )
  }
})

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt()

const route = useRoute()
const router = useRouter()
const store = useStore()

const sceneIdx = computed(() => {
  return Number(route.query.sceneIdx)
})
const cameraIdx = computed(() => {
  return Number(route.query.cameraIdx)
})

const ZMFMsgList = computed(() => {
  switch (sceneIdx.value) {
  case 0:
    switch (cameraIdx.value) {
    case 0:
      return [
        {
          inner: '<p>平地而起的元大都，是“大汗之城”，也是“天下大都”。</p><p>元世祖至元四年（1267）正月丁未，元大都城破土动工。刘秉忠以太保兼领中书省而总负新都城兴造之责。至元十一年（1274），元大都宫城建成，世祖皇帝忽必烈御正殿，在此接受皇太子和诸王百官的朝贺。两年之后的至元十三年（1276），元大都城建成。</p>',
          audio: 'scene-1-msg-1.mp3'
        },
        {
          inner: '请大家跟随我的脚步，一起游览这座13世纪世界上最伟大的都城建筑——元大都。',
          audio: 'follow-me.mp3'
        },
        {
          inner: '请进入场景开始游览。',
          audio: 'gogogo.mp3'
        }
      ]
    case 1:
      return [
        {
          inner: '<p>宫城在皇城的东部，成长方形，“周回九里三十步，东西四百八十步，南北六百十五步，高三十五尺”。</p><p>宫城南墙有三门，中央为宫城正门崇天门，约当今故宫太和殿址。宫城四角有角楼，上下三层，用琉璃瓦覆盖。宫城内主要建筑分为南北两部分，南面以大明殿为主体，北面以延春阁为主体，大明殿、延春阁平面皆采用“工”字殿（或阁）形制。</p>',
          audio: 'scene-1-msg-2.mp3'
        },
      ]
    default:
      return [
        {
          inner: '<p>元大都采用了自北宋以来的开放式街巷布局，衙署和民居就分布在这样的街道系统。</p><p>元大都内佛教寺院林立，大圣寿万安寺（白塔寺）、大庆寿寺（双塔寺）等都是元大都城的历史见证。</p>',
          audio: 'scene-1-msg-3.mp3'
        },
      ]
    }
  case 1:
    switch (cameraIdx.value) {
    case 0:
      return [
        {
          inner: '元代著名水利学家郭守敬向元世祖忽必烈面陈的水利六事，第一项就是修通惠河，以使运至通州的物资可以通过水路直通大都城内。至元三十年（1293）通惠河工程完成，总长 164 里，沿河设坝闸10 处。至此，从钱塘江边的杭州，沿着大运河北上，可以一直通行至大都城内的海子（积水潭）。',
          audio: 'scene-2-msg-1.mp3'
        },
        {
          inner: '请大家跟随我的脚步，一起游览流动的文化，滋养元大都的通惠河。',
          audio: 'follow-me2.mp3'
        },
        {
          inner: '请进入场景开始游览。',
          audio: 'gogogo.mp3'
        }
      ]
    case 1:
      return [
        {
          inner: '元大都的规划、建设，以及城市内从皇帝百官到寻常百姓所需的物资供给，也都与运河这条交通经济命脉紧密相连。充满活力的运河，不仅给元大都带来了便利的交通和山水交映的景观，更使全国的物资汇聚于元大都。',
          audio: 'scene-2-msg-2.mp3'
        }
      ]
    default:
      return [
        {
          inner: '四方宝货，齐集大都。水路的畅通，使得元代景德镇等地的瓷器可以比较便利地通过水路运至大都。积水潭中舳舻蔽水，大都城内繁华富庶，形成众多非常繁华的商业区。',
          audio: 'scene-2-msg-3.mp3'
        }
      ]
    }
  default:
    switch (cameraIdx.value) {
    case 0:
      return [
        {
          inner: '元大都汇聚了不少文人雅士，更萃集了历代的书画与珍宝。众多文人与艺术家和他们的收藏与创作集粹于元大都，不仅开启了元代文化新的篇章，更影响了此后艺术的发展。笔墨之间、舞台之上，是精神的寄托，是心灵的归宿。',
          audio: 'scene-3-msg-1.mp3'
        },
        {
          inner: '请大家跟随我的脚步，一起游览笔墨之间，舞台之上的文化魅力。',
          audio: 'follow-me3.mp3'
        },
        {
          inner: '请进入场景开始游览。',
          audio: 'gogogo.mp3'
        }
      ]
    default:
      return [
        {
          inner: '元代戏剧艺术走向成熟，特别是剧本创作的成就代表了当时文学的最高水平。散曲也大盛于元，登坛树帜，独领风骚。元大都更是集聚了关汉卿、马致远、王实甫等一批具有很高成就的杂剧创作作家。',
          audio: 'scene-3-msg-2.mp3'
        }
      ]
    }
  }
})

/**
 * 左下角人物相关
 */
const isCharacterSpecialMoving = ref(0)
const animationType = ref(1)
const isShowCameraDesc = ref(false)
const isShowCharacterDesc = ref(false)
const showingContentIdx = ref(0)

function onClickCharacter(anType) {
  // isShowCameraDesc.value = true
  if (!isCharacterSpecialMoving.value) {
    if (!msgVisible.value && !anType) {
      // 打开弹窗指定伸手动画
      animationType.value = 3
    } else {
      animationType.value = anType ? anType : Math.floor(Math.random() * 2) + 2
    }
    let duration = 0
    switch (animationType.value) {
    case 2:
      duration = 4000
      break
    case 3:
      duration = 5000
      break
    case 4:
      duration = 5000
      break
    case 5:
      duration = 3120
      break
    default:
      break
    }
    setTimeout(() => {
      isCharacterSpecialMoving.value = 1
      setTimeout(() => {
        isCharacterSpecialMoving.value = 0
        animationType.value = 1
      }, duration)
    }, 200)
  }
  if (!anType && !isShowHotspotDetail2.value) {
    msgVisible.value = true
  }
}
/**
 * end of 左下角人物相关
 */

/**
 * 右下角镜头列表
 */
const currentCameraList = computed(() => {
  return sceneTree[sceneIdx.value].cameraList
})

const mouseEnterCameraItemIdx = ref(-1)
/**
 * end of 右下角镜头列表
 */

/**
 * 镜头切换过渡
 */
const isShowCameraIntro = ref(false)
const cameraIntroText = computed(() => {
  return sceneTree[sceneIdx.value].cameraList[cameraIdx.value].desc
})
let cameraIntroAudioTimeoutId = null
let cameraIntroAudio = null

const showScene0Camera1To2Video = ref(false)
const showScene0Camera2To3Video = ref(false)
const showScene1Camera1To2Video = ref(false)
const showScene1Camera2To3Video = ref(false)
const showScene2Camera1To2Video = ref(false)

const clearCameraIntroMedia = (showAction = true) => {
  isShowCameraIntro.value = false
  showScene0Camera1To2Video.value = false
  showScene0Camera2To3Video.value = false
  showScene1Camera1To2Video.value = false
  showScene1Camera2To3Video.value = false
  showScene2Camera1To2Video.value = false

  if (sceneIdx.value === 2 && cameraIdx.value === 1 && showAction) {
    setTimeout(() => {
      onClickCharacter(5)
    }, 2000)
  }
}

watch(cameraIdx, (vNew, pVal) => {
  if (haveShownSceneEffect.value) {
    console.log(vNew, pVal)
    if (sceneIdx.value === 0) {
      if (vNew === 1 && pVal === 0) {
        showScene0Camera1To2Video.value = true
      } else if (vNew === 2 && pVal === 1) {
        showScene0Camera2To3Video.value = true
      }
    } else if (sceneIdx.value === 1) {
      if (vNew === 1 && pVal === 0) {
        showScene1Camera1To2Video.value = true
      } else if (vNew === 2 && pVal === 1) {
        showScene1Camera2To3Video.value = true
      }
    } else if (sceneIdx.value === 2) {
      if (vNew === 1 && pVal === 0) {
        showScene2Camera1To2Video.value = true
      }
    }
    isShowCameraIntro.value = true
    charactorSpeackPositionLeft.value = !charactorSpeackPositionLeft.value
    cameraIntroAudioTimeoutId = setTimeout(() => {
      cameraIntroAudio?.pause()
      cameraIntroAudio = new Audio(require(`@/assets/audios/camera-intro-${sceneIdx.value + 1}-${cameraIdx.value + 1}.mp3`))
      cameraIntroAudio.play()
      cameraIntroAudio.addEventListener('ended', clearCameraIntroMedia)
    }, 1000)
  }
})

// 跳过按钮 功能
function skipCameraIntro(showAction) {
  clearTimeout(cameraIntroAudioTimeoutId)
  cameraIntroAudio?.pause()
  clearCameraIntroMedia(showAction)
}
onUnmounted(() => {
  skipCameraIntro()
})
onBeforeRouteUpdate(() => {
  skipCameraIntro(false)
})
/**
  * end of 镜头切换过渡
  */

const isShowSceneIntroVideoStart = ref(false)
const isShowSceneIntroVideoEnd = ref(false)
const sceneIntrovideoStartEl = ref(null)
const sceneIntrovideoEndEl = ref(null)

/**
 * 第一次进入某个场景时展示动效
 */
const haveShownSceneEffect = computed(() => {
  return store.state.haveShownSceneEffect[sceneIdx.value]
})

watch(sceneIdx, (vNew) => {
  if (!haveShownSceneEffect.value) {
    isShowSceneIntroVideoStart.value = true
    nextTick(() => {
      sceneIntrovideoStartEl.value.play()
    })
  }
}, {
  immediate: true
})
let sceneIntroAudioTimeoutId = null
let audio = null

/**
 * 禁用讲解视频跳过按钮
 */
let jumpIntroduceDisable = false
function onPlayedFirstSceneIntroVideoEnded() {
  store.commit('setHaveShownSceneEffect', {
    idx: sceneIdx.value,
    value: true,
  })
  isShowSceneIntroVideoStart.value = false

  if (sceneIdx.value === 0 && cameraIdx.value === 0) {
    showGuide.value = !localStorage.getItem(GUIDE_KEY)
  }

  handleBgAudio({
    sceneIdx: sceneIdx.value,
    cameraIdx: cameraIdx.value,
    canPlay: !isShowSceneIntroVideoStart.value
  })

  jumpIntroduceDisable = false
}

// 跳过按钮 位置
const { width: windowWidth, height: windowHeight } = useWindowSize()
const skipBtnLeftTop = ref({
  x: 0,
  y: 0,
})
const skipBtnRightBottom = ref({
  x: 0,
  y: 0,
})
watchEffect(() => {
  skipBtnLeftTop.value = utils.mapPosFromDraftToWindow({
    x: 850,
    y: 660,
  }, 'cover', 1920, 970, windowWidth.value, windowHeight.value)
  skipBtnRightBottom.value = utils.mapPosFromDraftToWindow({
    x: 1070,
    y: 720,
  }, 'cover', 1920, 970, windowWidth.value, windowHeight.value)
})

// 跳过按钮 功能
function skipSceneIntro() {
  clearTimeout(sceneIntroAudioTimeoutId)
  audio?.pause()
  store.commit('setHaveShownSceneEffect', {
    idx: sceneIdx.value,
    value: true,
  })
  isShowSceneIntroVideoStart.value = false
  isShowSceneIntroVideoEnd.value = false
  sceneIntrovideoStartEl.value?.pause()
  sceneIntrovideoEndEl.value?.pause()
}
function skipFirstSceneIntro() {
  if (jumpIntroduceDisable) return

  jumpIntroduceDisable = true
  const video = sceneIntrovideoStartEl.value
  switch (sceneIdx.value) {
  case 0:
    video.currentTime = 34
    break
  case 1:
    video.currentTime = 42
    break
  default:
    video.currentTime = 32
  }
}
onUnmounted(() => {
  skipSceneIntro()
})
onBeforeRouteUpdate(() => {
  skipSceneIntro()
})
/**
 * end of 第一次进入某个场景时展示动效
 */

const handleBgAudio = inject('handleBgAudio')
watch(sceneIdx, () => {
  handleBgAudio({
    sceneIdx: sceneIdx.value,
    cameraIdx: cameraIdx.value,
    canPlay: !isShowSceneIntroVideoStart.value && !isShowCameraIntro.value
  })
}, {
  immediate: true,
})
watch([cameraIdx, isShowCameraIntro], (vNew) => {
  if (sceneIdx.value > 0 && typeof vNew[0] === 'number') {
    handleBgAudio({
      sceneIdx: sceneIdx.value,
      cameraIdx: vNew[0],
      canPlay: !isShowSceneIntroVideoStart.value && !vNew[1]
    })
  }
}, {
  immediate: true
})

/**
 * end of 背景音乐
 */

/**
 * 点击“下一个场景”按钮的逻辑
 */
function onClickNextScene() {
  if (sceneIdx.value === 0) {
    router.push({
      name: route.name,
      query: {
        sceneIdx: Number(route.query.sceneIdx) + 1,
        cameraIdx: 0,
      }
    })
  } else if (sceneIdx.value === 1) {
    router.push({
      name: route.name,
      query: {
        sceneIdx: Number(route.query.sceneIdx) + 1,
        cameraIdx: 0,
      }
    })
  } else if (sceneIdx.value === 2) {
    router.push({
      name: 'EpilogueView',
    })
  }
}
/**
 * end of 点击“下一个场景”按钮的逻辑
 */

const currentVr = computed(() => {
  switch (Number(route.query.sceneIdx)) {
  case 0:
    switch (Number(route.query.cameraIdx)) {
    case 0:
      return 'fd720_kdDO8sPe6'
    case 1:
      return 'fd720_CKI5Ly4eo'
    default:
      return 'fd720_Ti8chaWqT'
    }
  case 1:
    switch (Number(route.query.cameraIdx)) {
    case 0:
      return 'fd720_f4R2wpbQC'
    case 1:
      return 'fd720_I2StypBk9'
    default:
      return 'fd720_tnhWSM7pp'
    }
  default:
    switch (Number(route.query.cameraIdx)) {
    case 0:
      return 'fd720_PC5bdcJnU'
    default:
      return 'fd720_0vzJY3UBA'
    }
  }
})


/**
 * iframe的逻辑
 */
const iframeSrc = `${process.env.VUE_APP_CLI_MODE === 'dev' ? 'https://houseoss.4dkankan.com/project/yzdyh-dadu/pano/' : 'https://houseoss.4dkankan.com/project/yzdyh-dadu/pano/'}show.html?id=WK1730428603763576832&lang=zh&vr=${currentVr.value}`
const panoIframe = ref(null)

watch(cameraIdx, (vNew) => {
  console.log('parent window: post message!')
  panoIframe.value.contentWindow.postMessage({
    msgName: 'change-scene',
    sceneId: store.getters.catalogTopology[sceneIdx.value].children[0].children[cameraIdx.value].id
  }, '*')
}, {
  deep: true,
})

const isShowHotspotDetail = ref(false)
const isShowHotspotDetail2 = ref(!!route.query.hotspot)
const isShowHotspotDetail3 = ref(false)
const hotspotRelicInfo = ref(route.query.hotspot ? {
  name: route.query.hotspot
} : {})
const hotspotIndex = ref(null)

// window.addEventListener('message', (e) => {
//   console.log('parent window: received message!', e)
// })
window.showHotspotDetail2 = function(hotspotInfo) {
  console.log('parent window: 展示热点高亮')
  console.log(hotspotInfo)
  console.log(hotspotInfo.hotspotTitle)
  hotspotRelicInfo.value = hotspotInfo
  msgVisible.value = false
  isShowHotspotDetail2.value = true
}
window.showHotspotDetail = function(hotspotInfo) {
  console.log('parent window: 展示热点详情')
  console.log(hotspotInfo)
  console.log(hotspotInfo.hotspotTitle)
  // 约定 hotspotTitle 为场景中宝盒索引
  hotspotRelicInfo.value = hotspotInfo

  if (hotspotInfo.hotspotTitle.split(',').length > 1) {
    // 多文物
    isShowHotspotDetail3.value = true
    console.log('====')
  } else {
    isShowHotspotDetail.value = true
  }
}
/**
 * end of iframe的逻辑
 */

/**
 * 获取全景图somedata.json并处理 todo:改为从本地获取
 */
function fixPanoData(panoData) {
  // 丢弃没有包含场景的二级分组
  let tmp = []
  panoData.scenes.forEach((item) => {
    panoData.catalogs.forEach((sub) => {
      if (item.category == sub.id) {
        if (tmp.indexOf(sub) < 0) {
          tmp.push(sub)
        }
      }
    })
  })
  tmp = utils.unique(tmp)
  panoData.catalogs = tmp

  // 丢弃没有包含二级分组的一级分组
  let rootmp = []
  tmp.forEach((item) => {
    panoData.catalogRoot.forEach((sub) => {
      sub.children = utils.unique(sub.children)

      if (sub.children.indexOf(item.id) > -1) {
        rootmp.push(sub)
      }
    })
  })
  rootmp = utils.unique(rootmp)

  // 一级分组按名称排序
  let sortArr = panoData.catalogRoot.map((item) => item.name)
  rootmp.sort((a, b) => {
    return sortArr.indexOf(a.name) - sortArr.indexOf(b.name)
  })

  // 各个一级分组的children去重，只留下有实际的二级分组相对应的那些children item。
  panoData.catalogRoot = rootmp.map((item) => {
    let temp = []
    item.children = utils.unique(item.children)
    item.children.forEach((sub) => {
      tmp.forEach((jj) => {
        if (jj.id == sub) {
          temp.push(sub)
        }
      })
    })
    return {
      ...item,
      children: temp,
    }
  })

  // 多余
  panoData.catalogs = tmp

  // 如果没有一级分组（一定也就没有二级分组）就创建一级分组和二级分组 有必要吗？
  let cid = "c_" + utils.randomWord(true, 8, 8)
  if (panoData.catalogRoot.length <= 0) {
    panoData.catalogRoot.push({
      id: "r_" + utils.randomWord(true, 8, 8),
      name: "全部场景",
      children: [cid],
    })
  }
  if (panoData.catalogs.length <= 0) {
    panoData.catalogs.push({
      id: cid,
      name: "默认二级分组",
    })
  }

  // 如果有初始场景，改为引用场景列表中对应的那个场景的js对象
  if (panoData.firstScene) {
    panoData.firstScene = panoData.scenes.find(
      (item) => item.sceneCode == panoData.firstScene.sceneCode
    )
  }
}

onMounted(() => {
  api.fetchPanoData('WK1730428603763576832').then((res) => {
    fixPanoData(res)
    store.commit('setPanoData', res)
    console.log('catalogTopology', store.getters.catalogTopology)
  })
})
/**
 * end of 获取全景图somedata.json并处理
 */
</script>

<style lang="less" scoped>
*{
  user-select: none;
}
.pano-view{
  position: relative;
  height: 100%;
  &.reduceZ {
    .btn-on-track {
      z-index: 2 !important;
    }
  }
  .pano-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    &.hide{
      opacity: 0;
    }
    >iframe{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    >button.guide-btn{
      position: absolute;
      width: 77px;
      height: 77px;
      top: 128px;
      right: 51px;
      background-image: url('@/assets/images/guide/tbn_help-min.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      z-index: 5;
    }
    >button.ship-btn{
      position: absolute;
      width: 77px;
      height: 77px;
      top: 128px;
      right: 51px;
      background-image: url('@/assets/images/ship-game/tbn_game_boat-min.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      z-index: 5;
      &:hover{
        background-image: url('@/assets/images/ship-game/btn_game boat_hover_green-min.png');
      }
    }
    >button.return-home{
      position: absolute;
      width: 77px;
      height: 77px;
      top: 43px;
      right: 51px;
      background-image: v-bind(btnReturnHomeImgUrl);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      z-index: 5;
      &:hover{
        background-image: v-bind(btnReturnHomeActiveImgUrl);
      }
    }
    >.camera-desc{
      z-index: 7;
    }
    >.character-desc{
      z-index: 7;
    }
    >.character-wrap{
      position: absolute;
      left: 40px;
      bottom: 0;
      width: 300px;
      height: 452px;
      >button.name{
        position: absolute;
        top: 50px;
        left: 0;
        transform: translateX(-50%);
        width: 36px;
        height: 178px;
        z-index: 6;
        font-size: 23px;
        font-family: Source Han Serif SC, Source Han Serif SC;
        font-weight: 400;
        color: #43310E;
        background-image: url(@/assets/images/people-name-bg.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        >span{
          position: absolute;
          left: 45%;
          top: 50%;
          transform: translate(-50%, -50%);
          line-height: 27px;
          letter-spacing: 7px;
          writing-mode: vertical-lr;
        }
      }
      @frame-width: 640px;
      @frame-height: 480px;
      @duration-1: 2.5s;
      @frame-num-1: 60;
      @duration-2: 4s;
      @frame-num-2: 96;
      @duration-3: 5s;
      @frame-num-3: 121;
      // @duration-4: 3s;
      // @frame-num-4: 72;
      @duration-5: 3.12s;
      @frame-num-5: 161;
      >.character-frames-wrapper {
        position: absolute;
        left: -200px;
        top: -10px;
        height: @frame-height;
        width: @frame-width;
        overflow: hidden;
        z-index: 5;
        cursor: pointer;
        >.default-frames{
          position: absolute;
          left: 0;
          height: 100%;
          animation-name: character-default-animation;
          animation-timing-function: steps(60, end);
          animation-duration: 2.5s;
          animation-iteration-count: infinite;
        }
        >.frames {
          position: absolute;
          height: 100%;
          transition-property: none;
          &.animating{
            transition-property: left;
          }
          &.state1 {
            left: 0;
          }
        }
        >.frames-2{
          transition-duration: @duration-2;
          transition-timing-function: steps(@frame-num-2, jump-end);
          &.state2 {
            left: calc(-100% * (@frame-num-2));
          }
        }
        >.frames-3{
          transition-duration: @duration-3;
          transition-timing-function: steps(@frame-num-3, jump-end);
          &.state2 {
            left: calc(-100% * (@frame-num-3));
          }
        }
        // >.frames-4{
        //   transition-duration: @duration-4;
        //   transition-timing-function: steps(@frame-num-4 - 1, jump-end);
        //   &.state2 {
        //     left: calc(-100% * (@frame-num-4 - 1));
        //   }
        // }
        >.frames-5{
          transition-duration: @duration-5;
          transition-timing-function: steps(@frame-num-5, jump-end);
          &.state2 {
            left: calc(-100% * (@frame-num-5));
          }
        }
      }
      >img.btn-track{
        position: absolute;
        width: 598px;
        height: 598px;
        left: -150px;
        bottom: -101px;
      }
      >button.btn-on-track{
        position: absolute;
        width: 78px;
        height: 78px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        text-align: left;
        z-index: 6;
        >span{
          margin-left: 120px;
          display: none;
          font-size: 23px;
          font-family: Source Han Serif SC, Source Han Serif SC;
          font-weight: 600;
          color: #FFF1BE;
          line-height: 27px;
          letter-spacing: 5px;
        }
        &:hover{
          width: 390px;
          height: 104px;
          transform: translate(-13px, -5px);
          >span{
            display: initial;
          }
        }
      }
      >button.one{
        left: 210px;
        top: -42px;
        background-image: v-bind(btnOnTrack1ImgUrl);
        &:hover{
          top: -49px;
          left: 217px;
          background-image: v-bind(btnOnTrack1ActiveImgUrl);
        }
      }
      >button.two{
        left: 336px;
        top: 62px;
        background-image: v-bind(btnOnTrack2ImgUrl);
        &:hover{
          top: 54px;
          background-image: v-bind(btnOnTrack2ActiveImgUrl);
        }
      }
      >button.three{
        left: 385px;
        top: 205px;
        background-image: v-bind(btnOnTrack3ImgUrl);
        &:hover{
          top: 196px;
          left: 391px;
          background-image: v-bind(btnOnTrack3ActiveImgUrl);
        }
      }
      >button.four{
        left: 352px;
        top: 353px;
        background-image: v-bind(btnOnTrack4ImgUrl);
        &:hover{
          top: 344px;
          left: 359px;
          background-image: v-bind(btnOnTrack4ActiveImgUrl);
        }
      }
    }
    >div.camera-list{
      position: absolute;
      bottom: 0;
      right: 0;
      width: calc(1346 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      height: calc(161 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      background-image: v-bind(cameraListBgUrl);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-right: calc(204 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >button.camera-entry{
        width: calc(198 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-size: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Serif SC, Source Han Serif SC;
        font-weight: 600;
        color: #FFED87;
        line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        letter-spacing: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        position: relative;
        z-index: 0;
        >img.bg-normal{
          display: initial;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: calc(198/ v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          z-index: -1;
        }
        >img.bg-active{
          display: none;
          position: absolute;
          left: 50%;
          top: 0%;
          transform: translate(-50%, -50%);
          width: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: auto;
          z-index: -1;
        }
      }
      >button.camera-entry.active{
        font-size: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Serif SC, Source Han Serif SC;
        font-weight: 600;
        color: #794A00;
        line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        letter-spacing: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >img.bg-normal{
          display: none;
        }
        >img.bg-active{
          display: initial;
        }
      }
      >button.next-scene{
        position: absolute;
        top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        right: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
  }
  >.camera-content{
    z-index: 10;
  }
  /**
  镜头切换过渡
   */
  .text-wrap__character {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 512px;
    height: 512px;
    overflow: hidden;

    &.left {
      right: unset;
      left: 0;

      img {
        animation-duration: 3;
        animation-timing-function: steps(72);
      }
    }
    img {
      height: 100%;
      animation-name: character-default-animation;
      animation-timing-function: steps(121);
      animation-duration: 8s;
      animation-iteration-count: infinite;
    }
  }
   >.text-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 11;
    background-color: rgba(0, 0, 0, 0.3);
    >.text{
      position: absolute;
      left: 50%;
      top: 50%;
      max-width: 80%;
      max-height: 80%;
      overflow: auto;
      transform: translate(-50%, -50%);
      font-size: 23px;
      font-family: SimSun;
      // font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
      // line-height: 39px;
      line-height: 1.5;
      letter-spacing: 7px;
      text-shadow: 0px 15px 25px rgba(0,0,0,0.59);
      padding-right: 10px;
    }
    >button.skip{
      position: absolute;
      width: 220px;
      height: 58px;
      right: 50px;
      bottom: 50px;
      background-image: url(@/assets/images/startup-video-skip.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      z-index: 1;
    }
   }
  .cloud-top{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 12;
    pointer-events: none;
  }
  .cloud-top-enter-active {
    transition: all 1.5s;
  }
  .cloud-top-leave-active {
    transition: all 1.5s;
    pointer-events: none;
  }
  .cloud-top-enter-from {
    opacity: 0;
    translate: 0 -100%;
  }
  .cloud-top-leave-to {
    opacity: 0;
    top: -50%;
    translate: 0 -100%;
  }

  .cloud-left-bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 70%;
    z-index: 12;
    pointer-events: none;
  }
  .cloud-left-bottom-enter-active {
    transition: all 1.5s;
  }
  .cloud-left-bottom-leave-active {
    transition: all 1.5s;
    pointer-events: none;
  }
  .cloud-left-bottom-enter-from {
    opacity: 0;
    translate: -100% 100%;
  }
  .cloud-left-bottom-leave-to {
    opacity: 0;
    pointer-events: none;
    translate: -100% 100%;
  }

  .cloud-right-bottom{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 95%;
    z-index: 12;
    pointer-events: none;
  }
  .cloud-right-bottom-enter-active {
    transition: all 1.5s;
  }
  .cloud-right-bottom-leave-active {
    transition: all 1.5s;
    pointer-events: none;
  }
  .cloud-right-bottom-enter-from {
    opacity: 0;
    translate: 100% 100%;
  }
  .cloud-right-bottom-leave-to {
    opacity: 0;
    pointer-events: none;
    translate: 100% 100%;
  }
  /**
  end of 镜头切换过渡
   */
  /**
   * 场景切换过渡
   */
  >video.scene-intro-video{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 20;
  }
  >button.skip-scene-intro{
    position: absolute;
    z-index: 21;
    // background-color: red;
    // opacity: 0.5;
  }
  /**
   * end of 场景切换过渡
   */
}
@keyframes character-default-animation {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -100% 0;
  }
}
</style>