<template>
  <ul class="menu" >
    <li @click="onIsShowList">
      <img :src="require(`@/assets/images/icon/${isShowScenesList ? 'function_off.svg' : 'function_on.svg'}`)" alt="" />
    </li>
   <template v-if="currentScene.type == '4dkk'">
    <li :class="{ disabled: isPlayTours || flying }"  @click="onModeChange('panorama')">
      <img :src="require(`@/assets/images/icon/${mode=='panorama'?'roaming_selected':'roaming_normal'}.svg`)" alt="" />
    </li>

    <li :class="{ disabled: isPlayTours || flying }"  @click="onModeChange('floorplan')">
      <img :src="require(`@/assets/images/icon/${mode=='floorplan'?'plane_selected':'plane_normal'}.svg`)" alt="" />
    </li>

    <li :class="{ disabled: isPlayTours || flying }"  @click="onModeChange('dollhouse')">
      <img :src="require(`@/assets/images/icon/${mode=='dollhouse'?'3d_selected':'3d_normal'}.svg`)" alt="" />
    </li>

    <li class="daolan" @click.stop="playTour" v-if="toursList.length>0">
      <img :src="require(`@/assets/images/icon/${isPlayTours?'pause01':'playing01'}.svg`)" 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="" />
    </li>

   </template>
  </ul>
</template>

<script setup>
import { ref, watch, computed, onMounted, nextTick } from "vue";
import { useStore } from "vuex";
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 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 openTours = () => {
  if (isShowScenesList.value) {
    store.commit("functions/setShowScenesList", false);
  }
  
  store.commit('fdkk/setShowToursList', !showTours.value)
}

const playTour = () => {
  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(() => {
})
</script>

<style lang="scss" scoped>
.menu {
  position: absolute;
  left: 20px;
  bottom: 8px;
  display: flex;
  z-index: 9;

  >li {
    width: 36px;
    height: 36px;
    margin: 0 10px;
    cursor: pointer;

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

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

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

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

      &.active {
        transform: none;
      }
    }

    >span {}
  }
}
</style>
