<template>
  <div class="controlcon" :class="{ showcon: isShowMenu }">
    <Pano :injectStyle="isShowMenu ? '' : 'opacity: 0'" v-if="currentScene.type == 'pano'" />
    <img class="showsss" @click="isShowMenu = !isShowMenu"
      :src="require(`@/assets/images/js_icon/${isShowMenu ? 'shouqi.png' : 'zhankai.png'}`)" alt="" />
  </div>
</template>

<script setup>
import Pano from "./control.pano_js";
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"]);


const isShowMenu = ref(true)


watch(isShowMenu,()=>{
  if (!isShowMenu.value) {
    store.commit("functions/setShowScenesList", false);
  }
})

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: 52px;
  border-radius: 18px;
  width: 30px;
  overflow: hidden;
  overflow-y: hidden;
  position: relative;
  transition: 0.3s ease width;

  .showsss {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
  }

  &.showcon {
    width: 100%;
    overflow-x: auto;

    .showsss {
      top: -10px;
    }
  }
}
</style>
