<template>
    <div
      class="zhanlan"
      :class="{
        mobile: isMobile,
      }"
    >
      <iframe v-if="currentScene && currentScene.filePath && currentScene.fileName" :src="`https://gdbwg.4dage.com${currentScene.filePath}/wwwroot/spg.html?m=${currentScene.fileName.replace('.zip','')}`" frameborder="0"></iframe>
      <div class="empty-tip" v-else>
        <img src="@/assets/images/resource/searchNone.svg" alt="no result" draggable="false">
        <span>暂无展览场景</span>
        <img
          class="close"
          @click="onClickClose"
          :src="require(`@/assets/images/icon/close.png`)"
        />
      </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed, nextTick } from "vue";
import { getExhibitionDetail } from "@/config/api";
import { useRouter, useRoute } from "vue-router";
import { throttle } from "@/utils/index.js";

const route = useRoute();
const router = useRouter()

const currentScene = ref(null)

getExhibitionDetail({id:route.params.id},data=>{
  currentScene.value = data.data
})

const onClickClose = throttle(() => {
  router.go(-1)
}, 1000)

import browser from '@/utils/browser'
const isMobile = ref(false)
onMounted(() => {
  if (browser.isMobile()) {
    isMobile.value = true
  } else {
    isMobile.value = false
  }
})
</script>

<style lang="scss" scoped>
.zhanlan {
  width: 100%;
  > iframe {
    width: 100%;
    height: 100%;
  }
  > .empty-tip {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    img {
      width: 240px;
      height: 216px;
    }
    span {
      margin-top: 24px;
      font-size: 24px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      color: #333333;
      line-height: 36px;
    }
    .close {
      position: absolute;
      top: 40px;
      right: 60px;
      width: 70px;
      height: 70px;
      cursor: pointer;
    }
  }
}

.zhanlan.mobile {
  > .empty-tip {
    img {
      width: 50%;
      height: auto;
    }
    span {
      margin-top: 20px;
      font-size: 20px;
      line-height: 30px;
    }
    .close {
      display: none;
    }
  }
}
</style>