<template>
  <div class="navigation" v-if="orgin != 'fashilong' && !hideToolBar" :style="{ zIndex: showEnvTips ? 99999 : 99,left: !showMore?-iconListWidth+'px':''}">

    <!-- 带看导航栏 -->
    <div class="tabBar" v-if="tabBarShow">
      <div class="iconList" id="iconList">
        <!-- <div class="iconfont " :class="i.icon" v-for="i,index in tabbarList" :key="index" @click="tabBarClick(i.type)">
          <div v-if="tabBarType==3 && showTabbarTip &&i.type==3" class="iconTip">热点</div>
        </div> -->

        <div v-if="plays.length>0" class="iconfont " :class="[this.status.isPlaying ? 'iconscene_stop' : 'iconguided']" :style="status.isPlaying ? 'color:#ED5D18;' : ''" @click="tabBarClick(1)">
          <div v-if="tabBarType==1 && showTabbarTip && status.isPlaying  " class="iconTip">{{$t('rtcLive.openGuided')}}</div>
          <div v-if="tabBarType==1 && showTabbarTip &&!status.isPlaying  " class="iconTip">{{$t('rtcLive.closeGuided')}}</div>
        </div>
        <div class="iconfont iconshow" @click="tabBarClick(2)">
          <!-- <div v-if="tabBarType==2 && showTabbarTip  " class="iconTip">{{$t('rtcLive.create_VR')}}</div> -->
        </div>
        <div class="iconfont iconhot_spot" :style="hotSpot ? 'color:#ED5D18;' : ''" @click="tabBarClick(3)">
          <div v-if="tabBarType==3 && showTabbarTip && hotSpot " class="iconTip">{{$t('rtcLive.openHotSpot')}}</div>
          <div v-if="tabBarType==3 && showTabbarTip &&!hotSpot " class="iconTip">{{$t('rtcLive.closeHotSpot')}}</div>
          <!-- <div class="iconTip">热点</div> -->
        </div>
        <div class="iconfont iconvr" @click="tabBarClick(4)">
        </div>

      </div>
      <div @click="onShowMore" :class="{'hide':!showMore}" class="tabBtn iconfont iconarrows"></div>
    </div>
  </div>
</template>
<script>
import config from "@/config";
import XWindow from "../shared/XWindow";
import { mapGetters } from "vuex";
import { play } from "@/core";
import {
  backgroundMusicPlayer,
  guideSoundPlayer,
  checkReadyToPlay,
} from "@/utils/sounds";
import { sendToApp, userId } from "../../socket";
import browser from "@/utils/browser";
import { objects } from "@/core/base";

export default {
  components: {
    XWindow,
  },
  data() {
    return {
      tabBarShow: true,
      orgin: browser.urlQueryValue("origin").toLowerCase(),
      showMore: true,
      hideToolBar: browser.urlHasValue("hideToolBar"),
      showCoupon: false,
      showEnvTips: false,
      iconListWidth: 0,
      hotSpot: false,
      tabbarList: [
        {
          title: "导览",
          icon: "iconguided",
          type: 1,
        },
        {
          title: "一起逛",
          icon: "iconshowing",
          type: 2,
        },
        {
          title: "热点",
          icon: "iconhot_spot",
          type: 3,
        },
        {
          title: "VR模式",
          icon: "iconvr",
          type: 4,
        },
      ],
      tabBarType: 0,
      showTabbarTip: false,
      timer: null,
    };
  },
  watch: {
    plays: {
      handler: function (newVal, oldVal) {
        sendToApp("guide", { length: this.plays.length });
      },
      immediate: true,
    },
    "status.isPlaying": function () {
      sendToApp("guide", { playing: this.status.isPlaying });
    },
  },
  computed: {
    ...mapGetters({
      plays: "guide/plays",
      status: "guide/status",
      medias: "guide/medias",
    }),
  },
  created() {
    this.$once("hook:beforeDestroy", () => {
      this.$bus.off("vrhouse/back", this.vrBack);
    });
    this.$bus.on("vrhouse/back", this.vrBack);
    play.on("guide/play/start", (index) => {
      this.$store.commit("guide/SetStatus", {
        isPlaying: true,
      });
    });

    play.on("guide/play/pause", (index) => {
      this.$store.commit("guide/SetStatus", {
        isPlaying: false,
      });
    });

    play.on("guide/play/stop", () => {
      this.$store.commit("guide/SetStatus", {
        isPlaying: false,
      });
    });

    play.on("guide/play/playing", (index) => {
      this.$store.commit("guide/SetIndex", index);
    });

    play.on("guide/play/flyToStart", (index) => {
      this.$store.commit("guide/SetIndex", index);
    });

    // this.$bus.on("shop/app/action", (data) => {
    //   if (data.type == "showCoupon") {
    //     this.showCoupon = data.data;
    //   } else if (data.type == "guide") {
    //     if (this.status.isPlaying) {
    //       play.pause();
    //     } else {
    //       play.start();
    //     }
    //   }
    // });
  },
  mounted() {
    this.$bus.on("ready", () => {
      if (this.plays.length) {
        let type =
          this.status.audio === "soundsync" ? "sync" : this.status.audio;

        if (this.medias.links[type]) {
          guideSoundPlayer.setSRC(
            this.$config.getPublishResource(this.medias.links[type])
          );
        }
      }
    });
    this.$nextTick(() => {
      $("#player").on("touchstart", () => {
        if (this.status.isPlaying) {
          play.pause();
        }
      });
    });
    // if (this.$config.appenv != "discover") {
    //   sendToApp("cart", true);
    // }
    // sendToApp("ready", this.$config.projectNum);
  },
  methods: {
    vrBack() {
      this.tabBarShow = true;
      this.$store.commit("SetVR", false);
      this.$nextTick(() => {
        if (this.hotSpot) {
          objects.tagManager.showAllTags();
        } else {
          objects.tagManager.hideAllTags();
        }
      });
    },
    tabBarClick(type) {
      this.tabBarType = type;
      switch (type) {
        case 1:
          this.onPlayGuide();
          break;
        case 2:
          //发起带看
          play.pause();
          this.$parent.showCreated = true;
          this.$config.isTyping = true;
          break;

        case 3:
          //热点
          // play.pause();

          this.hotSpot = !this.hotSpot;
          if (this.hotSpot) {
            objects.tagManager.showAllTags();
          } else {
            objects.tagManager.hideAllTags();
          }
          break;

        case 4:
          //VR模式
          play.pause();
          this.tabBarShow = false;
          this.$bus.emit("vrhouse/enterVR");
          this.$store.commit("SetVR", true);
          this.$bus.emit("shop/header/showHeader", false);
          break;

        default:
          break;
      }
      this.showTabbarTip = true;
      this.timer = setTimeout(() => {
        this.showTabbarTip = false;
        clearTimeout(this.timer);
        this.timer = null;
      }, 3000);
    },
    onShowMore() {
      this.iconListWidth = document.getElementById("iconList").clientWidth;
      this.showMore = !this.showMore;
    },
    onPlayGuide() {
      if (this.status.isPlaying) {
        play.pause();
      } else {
        play.start();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.navigation {
  pointer-events: none;
  position: absolute;
  //   left: 0.5rem;
  //   right: 0.5rem;
  //   bottom: 0.8rem;
  left: 0;
  bottom: 1.2rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  > div {
    pointer-events: all;
    height: 100%;
  }
  transition: all 0.3s;

  &.hide {
    left: -50%;
  }
}
.tabBar {
  //   min-width: 5.53rem;
  height: 1.22rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0px 0.67rem 0.67rem 0px;
  padding: 0 0.69rem 0 0.28rem;
  .iconList {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .iconfont {
      //   width: 0.56rem;
      //   height: 0.56rem;
      // font-size: 0.56rem;
      font-size: 0.65rem;
      //   background: #fc6970;
      margin: 0 0.35rem;
      position: relative;
      .iconTip {
        height: 0.83rem;
        background: rgba(0, 0, 0, 0.7);
        padding: 0 0.17rem;
        font-size: 0.28rem;
        position: absolute;
        top: -1.6rem;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 2px 2px 0 0;
        &::after {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          border-right: 0.28rem solid transparent;
          border-left: 0.28rem solid transparent;
          border-top: 0.28rem solid rgba(0, 0, 0, 0.7);
          bottom: -0.28rem;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }
  .tabBtn {
    // width: 0.42rem;
    // height: 0.42rem;
    font-size: 0.31rem;
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s;
    &.hide {
      position: absolute;
      right: 0.27rem;
      top: 50%;
      transform: translateY(-50%) rotate(180deg);
    }
  }
}
</style>
