<template>
  <div
    class="parent-body"
    @click="musicPlay"
    @touchstart="musicPlay"
  >
    <!-- 热点弹出框 -->
    <popup />
    <!-- 加载初始页面——看来也没什么卵用 -->
    <div id="gui-thumb" />

    <!-- 场景canvs主容器 -->
    <div id="player" />

    <MiniMapDecorator class="mini-map-decorator" />

    <BigMap
      v-show="isShowBigMap"
      @close="isShowBigMap = false"
    />

    <!-- 底部菜单 -->
    <div id="gui-parent">
      <!-- 进度条加载 -->
      <gui-loading />
      <div id="hot" />
      <div
        id="gui"
        style="display: none"
      >
        <!-- 退出VR模式按钮 -->
        <div id="vrOff">
          <img
            id="vrOffImg"
            src="@/assets/images/vrOffImg.png"
            alt=""
          >
        </div>

        <!-- 热点列表 -->
        <hotspot-list />

        <!-- 通用样式的标题，代码里必须有，但其实没有显示 -->
        <v-title />
        <!-- 针对本项目需求的标题 -->
        <h1 v-if="!isMobile">
          安徽省纪录小康工程数据库云展馆
        </h1>

        <ModeSelectorMobile
          v-if="isMobile"
          class="mode-selector-mobile"
        />

        <!-- 底部菜单 -->
        <v-menu @showBigMap="isShowBigMap = true" />

        <!-- 导览 -->
        <v-guide />

        <!-- logo -->
        <div
          id="myCompany"
          style="
            width: 100%;
            position: absolute;
            bottom: 0px;
            text-align: center;
            font-size: 14px;
            font-family: '微软雅黑';
            font-weight: 580;
            color: rgba(255, 255, 255, 0.8);
          "
        >
          <!-- 四维时代提供技术支持 -->
        </div>
      </div>

      <!-- vr -->
      <web-vr />

      <!-- loading -->
      <!-- <div id="gui-spinner">
        <div class="gui-spinner-icon"></div>
      </div> -->

      <!-- guimsg -->
      <guimsg />

      <!-- 错误提示 -->
      <v-error />

      <vr-con />

      <v-other />
    </div>
  </div>
</template>

<script>
import popup from "@/views/popup"
import guiLoading from "@/views/gui/loading"
import hotspotList from "@/views/gui/hotspotlist"
import vTitle from "@/views/gui/title"
import vMenu from "@/views/gui/menu"
import vGuide from "@/views/gui/guide"
import webVr from "@/views/gui/webvr"
import guimsg from "@/views/gui/guimsg"
import vError from "@/views/gui/error"
import vrCon from "@/views/gui/vrcon"
import vOther from "@/views/gui/other"
import MiniMapDecorator from "@/views/gui/MiniMapDecorator.vue"
import ModeSelectorMobile from "@/views/gui/ModeSelectorMobile.vue"
import BigMap from "@/views/gui/BigMap.vue"

export default {
  name: "Home",
  components: {
    popup,
    guiLoading,
    hotspotList,
    vTitle,
    vMenu,
    vGuide,
    webVr,
    guimsg,
    vError,
    vrCon,
    vOther,
    MiniMapDecorator,
    ModeSelectorMobile,
    BigMap,
  },

  data() {
    return {
      hotspots: "",
      // 控制背景音乐
      isMusicInitiallyPlayed: false,
      isShowBigMap: false,
    }
  },

  mounted() {
  },
  created() {
    // 移动端和pc端的切换
    if (
      window.navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      // 移动端
      if (window.location.href.includes("web")) {
        window.location.href = window.location.href.replace("web", "webM")
        setTimeout(() => {
          location.reload(true)
        }, 1000)
      }
    }
  },

  methods: {
    // 控制背景音乐播放
    musicPlay() {
      if (!this.isMusicInitiallyPlayed) window.manage.switchBgmState(true)
      this.isMusicInitiallyPlayed = true
    },
  },
}
</script>

<style lang="less" scoped>
.mini-map-decorator {
}

.parent-body {
  position: relative;
  width: 100%;
  height: 100%;
  > #gui-parent {
    > #gui {
      > h1 {
        position: absolute;
        z-index: 1;
        top: 23px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.45);
        border-radius: 33px;
        font-size: 16px;
        color: #FFFFFF;
        padding: 9px 29px;
      }
      > .mode-selector-mobile {
        position: absolute;
        z-index: 1;
        top: 17px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}

/deep/#drawer {
  transition: all 0.3s;
}

.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'], .mobile[view-mode='transitioning'] {
  .mini-map-decorator {
    display: none;
  }
  .button.big-map {
    display: none;
  }
}
.mobile[view-mode='panorama'], .mobile[view-mode='outside'] {
  .mode-selector-mobile {
    display: none;
  }
  .button.big-map {
    display: none;
  }
}
</style>
