<template>
  <div class="controlcon">
    <Pano v-if="currentScene.type == 'pano'" />
    <Fdkk v-else />
  </div>
</template>

<script setup>
import Pano from "./control.pano";
import Fdkk from "./control.fdkk";
import { ref, watch, computed, onMounted, watchEffect, nextTick } from "vue";
import { useStore } from "vuex";
import { useMusicPlayer,useSoundPlayer } from '@/utils/sound'


//背景音乐
const musicPlayer = useMusicPlayer()

//解说音乐
const soundPlayer = useSoundPlayer()

const store = useStore();
const currentScene = computed(() => store.getters["scene/currentScene"]);



watchEffect(() => {
  if (currentScene.value.explanation) {
    let { audioUrl, openByDefault, repeat } = currentScene.value.explanation
    if (audioUrl) {
      store.commit("functions/setCommentaryUrl", {
        src: audioUrl,
        loop: repeat,
        openByDefault: openByDefault
      });


      useSoundPlayer.player.isLock = false
      useSoundPlayer.player.watchPlay()
    } else {
      store.commit("functions/setCommentaryUrl", '');
      useSoundPlayer.player.isLock = true
      soundPlayer.pause()
    }
  } else {
    store.commit("functions/setCommentaryUrl", '');
    useSoundPlayer.player.isLock = true
    soundPlayer.pause()
  }


})

</script>

<style lang="scss" scoped>
.controlcon {
  height: 36px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 18px;
  backdrop-filter: blur(1px);
  max-width: calc(90vw - 100px);
  overflow-x: auto;
  overflow-y: hidden;
}
</style>
