<template>
  <ul class="control-fdkk"
    v-if="(fdkkmetadata && (fdkkCurrentVersion != 'v3' && (fdkkmetadata && !fdkkmetadata.controls.showMap)) && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse))
    || toursList.length > 0
    || (customLink && customLink.isShow)
    || (customTelephone && customTelephone.isShow)
    || (metadata.description)
    || ((metadata.backgroundMusic && metadata.backgroundMusic.id) || fdkkBGM || v3IsBgm)">

    <li class="daolan" :class="{ v3daolan: fdkkCurrentVersion == 'v3' }" @click.stop="playTour"
      v-if="toursList.length > 0">
      <img
        :src="require(`@/assets/images/icon/${(fdkkCurrentVersion == 'v3' ? v3toursStatus : isPlayTours) ? 'pause01@2x' : 'playing01@2x'}.png`)"
        alt="" />
      <span>{{$t('menu.tour')}}</span>
      <img @click.stop="openTours" :class="{ active: showTours }" class="jiantou"
        :src="require(`@/assets/images/icon/expand_arrows@2x.png`)" alt="" />
      <div class="vlink"></div>
    </li>

    <template v-if="fdkkCurrentVersion != 'v3' && (fdkkmetadata && !fdkkmetadata.controls.showMap)">
      <li v-if="fdkkmetadata && fdkkmetadata.controls.showPanorama" :class="{ disabled: isPlayTours || flying }"
        @click="onModeChange('panorama')">
        <img
          :src="require(`@/assets/images/icon/${mode == 'panorama' ? 'roaming_selected@2x' : 'roaming_normal@2x'}.png`)"
          alt="" />
      </li>

      <li v-if="fdkkmetadata && fdkkmetadata.controls.showFloorplan" :class="{ disabled: isPlayTours || flying }"
        @click="onModeChange('floorplan')">
        <img :src="require(`@/assets/images/icon/${mode == 'floorplan' ? 'plane_selected@2x' : 'plane_normal@2x'}.png`)"
          alt="" />
      </li>

      <li v-if="fdkkmetadata && fdkkmetadata.controls.showDollhouse" :class="{ disabled: isPlayTours || flying }"
        @click="onModeChange('dollhouse')">
        <img :src="require(`@/assets/images/icon/${mode == 'dollhouse' ? '3d_selected@2x' : '3d_normal@2x'}.png`)"
          alt="" />
      </li>

      <li class="vlink"
        v-if="
        (customLink && customLink.isShow) ||
        (customTelephone && customTelephone.isShow) ||
        (metadata.description) ||
        ((metadata.backgroundMusic && metadata.backgroundMusic.id) || fdkkBGM || v3IsBgm) &&
        (fdkkmetadata && (fdkkmetadata.controls.showPanorama || fdkkmetadata.controls.showFloorplan || fdkkmetadata.controls.showDollhouse))">
      </li>

    </template>



    <!-- 自定义链接 -->
    <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)
    || fdkkBGM
    || v3IsBgm">
      <img v-if="v3IsBgm"
        :src="require(`@/assets/images/icon/${v3BGMStatus ? 'music@2x.png' : 'music_disabled@2x.png'}`)" alt="" />
      <img v-else :src="require(`@/assets/images/icon/${showMusicPlaying ? 'music@2x.png' : 'music_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, nextTick } from "vue";
import introduce from "./control/text";
import telephone from "./control/telephone";
import clink from "./control/link";
import { useStore } from "vuex";
import { useMusicPlayer } from '@/utils/sound'

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


const showMusicPlaying = ref(musicPlayer.isPlay)

// alert(showMusicPlaying.value)

const store = useStore();
const toursList = computed(() => store.getters["fdkk/toursList"]);

const isShowScenesList = computed(() => store.getters["functions/isShowScenesList"]);
const toursStatus = computed(() => store.getters["fdkk/toursStatus"]);

const v3toursStatus = computed(() => store.getters["fdkk/v3toursStatus"]);

const isPlayTours = computed(() => store.getters["fdkk/isPlayTours"]);
const flying = computed(() => store.getters["fdkk/isFlying"]);
const mode = computed(() => store.getters["fdkk/mode"]);


const showTours = computed(() => store.getters["fdkk/isShowToursList"]);


const currentScene = computed(() => store.getters["scene/currentScene"]);
const metadata = computed(() => store.getters["scene/metadata"]);
const scenes = computed(() => store.getters["scene/list"]);
const secondaryList = computed(() => store.getters["scene/secondaryList"]);
const fdkkmetadata = computed(() => store.getters["fdkk/metadata"]);

const fdkkCurrentVersion = computed(() => store.getters["scene/fdkkCurrentVersion"]);
const fdkkBGM = computed(() => store.getters["fdkk/fdkkBGM"]);

const v3IsBgm = computed(() => store.getters["fdkk/v3IsBgm"]);
const v3BGMStatus = computed(() => store.getters["fdkk/v3BGMStatus"]);


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 onIntroduce = () => {
  store.commit("functions/setShowIntroduce", true);
}


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

const onIsBGM = () => {
  if (v3IsBgm.value) {
    document.querySelector('#showifr') && document.querySelector('#showifr').contentWindow.postMessage(
      {
        source: "mingyuan",
        event: "settings",
        params: {
          playMusic: !v3BGMStatus.value,
        },
      },
      "*"
    );
  } else {
    showMusicPlaying.value ? musicPlayer.pause() : musicPlayer.play()
  }
}

const openTours = () => {
  if (isShowScenesList.value) {
    store.commit("functions/setShowScenesList", false);
  }

  store.commit('fdkk/setShowToursList', !showTours.value)
}

const playTour = () => {
  if (fdkkCurrentVersion.value == 'v3') {
    store.commit('fdkk/setV3ToursStatus', !v3toursStatus.value)
    let ele = document.getElementById('showifr');
    ele && ele.contentWindow.postMessage({
      source: "mingyuan",
      event: v3toursStatus.value ? 'guide-start' : 'guide-pause',
    }, "*")
    return
  }
  store.commit('fdkk/setToursStatus', !toursStatus.value)

}

const onIsShowList = (data) => {
  if (showTours.value) {
    store.commit('fdkk/setShowToursList', false)
  }
  store.commit("functions/setShowScenesList", !isShowScenesList.value);
};

const onModeChange = name => {
  document.querySelector('#fdkkifr') && document.querySelector('#fdkkifr').contentWindow.postMessage(
    {
      source: "qjkankan",
      event: "setMode",
      params: {
        name: name
      }
    },
    "*"
  );
}


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




</script>

<style lang="scss" scoped>
.control-fdkk {
  display: flex;
  align-items: center;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }

  >li {
    width: 26px;
    height: 26px;
    margin: 0 2px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
    }


    &:last-of-type {
      margin-right: 10px;

      &::after {
        width: 10px;
        height: 1px;
        background: none;
        content: '';
        display: inline-block;
      }
    }

    &:first-of-type {
      margin-left: 10px;
    }
  }

  .daolan {
    display: flex;
    width: auto;
    align-items: center;

    >img {
      width: 26px;
      height: 26px;
    }

    .jiantou {
      margin-left: -2px;
      transform: rotate(180deg);
      transition: .3s ease transform;

      &.active {
        transform: none;
      }
    }

    >span {
      font-size: 12px;
      margin-top: 2px;
    }


  }

  .v3daolan {
    >img {
      &:last-of-type {
        display: none;
      }
    }

    >span {
      margin-left: 0;
    }

    .vlink {
      margin-left: 10px;
    }
  }

  .vlink {
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 49%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.5;
  }
}
</style>
