<template>
  <div class="mbcon">
    <audio ref="vbgm" class="noshow" loop :src="`${g_CDN}audio/bgm.mp3`"></audio>
    <!-- <v-fdkk :exhibition="exhibition" v-if="exhibition" />
    <template v-else> -->
    <transition name="fade">
      <welcome v-if="welcome && !exhibition && !area" />
    </transition>
    <v-fdkk :exhibition="exhibition" :type="type" v-if="type == 'fdkk'" />
    <v-pano :type="type" :area="area" 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: false,
      area: ''
    }
  },
  watch: {
    isBgm(newVal) {
      !newVal ? this.$refs.vbgm.pause() : this.$refs.vbgm.play()
    }
  },
  mounted() {

    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.exhibition = this.getQueryVariable('exhibition')

    this.area = this.getQueryVariable('type')


    this.$nextTick(() => {
      this.welcome = true
      if (this.exhibition) {
        this.type = 'fdkk'
      }
      if (this.area) {
        this.type = 'pano'
      }
    })

  }
}
</script>

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