<template>
  <ul class="control-pano" >

    <!-- 自定义链接 -->
    <li @click="onLink" v-if="customLink && customLink.isShow">
      <img :src="require(`@/assets/images/icon/link@2x.png`)" alt="" />
    </li>

    <!-- 联系电话 -->
    <li  v-if="customTelephone &&customTelephone.isShow">
      <a :href="`tel:${customTelephone.value}`">
        <img :src="require(`@/assets/images/icon/telephone@2x.png`)" alt="" />
      </a>
    </li>

    <!-- 简介 -->
    <li @click="onIntroduce" v-if="metadata.description">
      <img :src="require(`@/assets/images/icon/text@2x.png`)" alt="" />
    </li>

    <!-- 背景音乐 -->
    <li @click="onIsBGM" v-if="metadata.backgroundMusic && metadata.backgroundMusic.id">
      <img :src="require(`@/assets/images/icon/${showMusicPlaying ? 'music@2x.png' : 'music_disabled@2x.png'}`)" alt="" />
    </li>

    <!-- 解说音频 -->
    <li @click="onIsCommentary" v-if="currentScene.explanation&&currentScene.explanation.audioUrl">
      <img :src="require(`@/assets/images/icon/${showCommentaryPlaying ? 'commentary@2x.png' : 'commentary_disabled@2x.png'}`)"
        alt="" />
    </li>

    <li @click="onIsAutoRotate">
      <img :src="require(`@/assets/images/icon/${isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'}`)"
        alt="" />
    </li>

  </ul>

  <teleport to='body'>
    <introduce v-if="showIntroduce" />
    <telephone v-if="showTelephone" />
    <clink v-if="showLink" />
  </teleport>
</template>

<script setup>
import { ref, watch, computed, onMounted, watchEffect, nextTick } from "vue";
import { useStore } from "vuex";
import { useApp } from "@/app";

import introduce from "./control/text";
import telephone from "./control/telephone";
import clink from "./control/link";
import { useMusicPlayer,useSoundPlayer } from '@/utils/sound'


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

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

const store = useStore();

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


const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);

const showMusicPlaying = ref(musicPlayer.isPlay)

const showCommentaryPlaying = ref(soundPlayer.isPlay)

// const isCommentary = computed(() => store.getters["functions/isCommentary"]);

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

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

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

const showIntroduce = computed(() => store.getters["functions/showIntroduce"]);
const showTelephone = computed(() => store.getters["functions/showTelephone"]);
const showLink = computed(() => store.getters["functions/showLink"]);

const isFullscreen = ref(false)

const onIntroduce = () => {
  store.commit("functions/setShowIntroduce", true);
}


const onLink = () => {
  store.commit("functions/setShowLink", true);
}

const onIsBGM = () => {
  showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
}

const onIsAutoRotate = (data) => {
  store.commit("functions/setAutoRotate", !isAutoRotate.value);
};


const onIsCommentary = (data) => {
  showCommentaryPlaying.value ? soundPlayer.pause() : soundPlayer.play()
};

const onVR = (data) => {
  useApp().then((app) => {
    console.log(app.krpanoDom.get('webvr'));
    app.krpanoDom.call("webvr.enterVR()")
  });
};

const onShare = () => {
  store.commit("functions/setShareUrl", true);
};

const staticList = ref([
  {
    id: "cruise",
    name: "巡游开关",
    icon: "rotation@2x.png",
    icondisabled: "rotation_disabled@2x.png",
  },
  {
    id: "vr",
    name: "VR",
    icon: "vr@2x.png",
  },
  {
    id: "share",
    name: "分享",
    icon: "share@2x.png",
  },
  {
    id: "full",
    name: "全屏",
    icon: "fullscreen@2x.png",
    icondisabled: "rotation_disabled@2x.png",
  },
]);


onMounted(() => {
  let events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
  events.forEach((item, index) => {
    window.addEventListener(item, () => {
      isFullscreen.value = !isFullscreen.value
    })
  })
})

musicPlayer.on('play', () => {
  showMusicPlaying.value = true
  soundPlayer.pause()
})
musicPlayer.on('pause', () => (showMusicPlaying.value = false))

soundPlayer.on('play', () => {
  showCommentaryPlaying.value = true
  musicPlayer.pause()
})
soundPlayer.on('pause', () => (showCommentaryPlaying.value = false))
</script>

<style lang="scss" scoped>
.control-pano {
  display: flex;
  align-items: center;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  >li {
    width: 32px;
    height: 32px;
    margin: 0 2px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    img {
      width: 26px;
      height: 26px;
    }
    
    &:last-of-type{
      margin-right: 10px;
    }
    &:first-of-type{
      margin-left: 10px;
    }
  }
}
</style>
