<template>
  <div class="mbcon">
    <audio ref="vbgm" class="noshow" loop :src="`${g_CDN}audio/bgm.mp3`"></audio>
    <v-pano :exhibition="exhibition" v-if="exhibition" />
    <template v-else>
      <transition name="fade">
        <welcome v-if="welcome"/>
      </transition>
      <v-fdkk :type="type" v-if="type=='fdkk'" />
      <v-pano :type="type" v-else/>
    </template>
  </div>
</template>

<script>
import vFdkk from "./fdkk";
import vPano from "./pano";

import welcome from "@/components/welcome";


export default {
  components: {
    vFdkk,
    vPano,
    welcome
  },
  data(){
    return{
      type:'fdkk',
      exhibition:'',
      isBgm: false,
      welcome: true
    }
  },
  watch:{
    isBgm(newVal){
      !newVal?this.$refs.vbgm.pause():this.$refs.vbgm.play()
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.welcome = true
    })

    this.$bus.$on('changeType',(data)=>{
      this.type = data
    })

    this.$bus.$on('toggleBgm',(data)=>{
      this.isBgm = data
    })

    this.$bus.$on('closeWel',()=>{
      this.welcome = false
      this.isBgm = true
      this.$bus.$emit('showM',true)
    })





    this.exhibition = this.getQueryVariable('exhibition')
  }
}
</script>

<style lang="less" scoped>
.mbcon{
  width: 100%;
  height: 100%;
}
</style>