<template>
  <div
    class="pinBottom-container"
    :class="{
      mobile: isMobile,
    }"
  >
    <div class="pinBottom center">
      <div id="view-controllers" />
    </div>

    <div class="pinBottom left">
      <div>
        <div class="viewContainer">
          <div
            id="play"
            class="ui-icon"
            rel="tooltip"
            data-original-title="播放"
          >
            <a>
              <img
                :src="require('@/assets/images/play.png')"
              >
            </a>
          </div>
          <div
            id="pause"
            class="ui-icon"
            style="display: none"
          >
            <a>
              <img
                rel="tooltip"
                title=""
                :src="require('@/assets/images/pause.png')"
                data-original-title="暂停"
                :style="{opacity: '1',}"
              >
            </a>
          </div>
          <div
            id="gui-modes-map"
            class="ui-icon double active"
          >
            <div
              id="pullTab"
              data-original-title="导览"
              rel="tooltip"
              title="场景导览"
              @click="isGuide = !isGuide"
            >
              <img
                title=""
                class="icon icon-inside"
                src="@/assets/images/auto.png"
                :style="{
                  opacity: isGuide ? '1' : '',
                }"
              >
            </div>

            <div
              v-show="!isMobile"
              id="gui-modes-inside"
              data-original-title="全景漫游"
              rel="tooltip"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/inside.png')"
              >
            </div>
            <div
              v-show="!isMobile"
              id="gui-modes-dollhouse"
              title="迷你模型"
              data-original-title="迷你模型"
              rel="tooltip"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/dollhouse.png')"
              >
            </div>
            <div
              v-show="!isMobile"
              id="gui-modes-floorplan"
              data-original-title="俯视图"
              rel="tooltip"
              title="顶部俯视"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/floor.png')"
              >
            </div>
            <!-- 没有这个元素会导致报错 -->
            <div
              id="hotList"
              style="display: none;"
              data-original-title="热点列表"
              rel="tooltip"
              title=""
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/hotlist.png')"
              >
            </div>
            <div
              class="big-map"
              @click="$emit('showBigMap')"
            >
              <img
                class="icon icon-big-map"
                src="@/assets/images/icon-big-map.png"
                alt=""
                draggable="false"
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="pinBottom right hideTarget">
      <div class="rightViewContainer clearfix">
        <!-- 音乐 -->
        <div
          id="volume"
          class="ui-icon wide"
          title="音乐"
        >
          <a>
            <img
              id="openMusic"
              style="display: block"
              src="../../assets/images/music-muted.png"
              alt=""
              title="打开音乐"
              @click="switchBGM(true)"
            >
            <img
              id="closeMusic"
              style="display: none"
              :style="{
                opacity: '1',
              }"
              src="../../assets/images/music.png"
              alt=""
              title="关闭音乐"
              @click="switchBGM(false)"
            >
          </a>
        </div>

        <!-- 全屏 -->
        <div
          id="gui-fullscreen"
          class="ui-icon wide"
          data-placement="top"
          rel="tooltip"
          title="全屏"
        >
          <a>
            <img
              title="全屏"
              :src="require('@/assets/images/full.png')"
            >
          </a>
        </div>

        <!-- 取消全屏 -->
        <div
          id="gui-fullscreen-exit"
          class="ui-icon wide"
          data-placement="top"
          rel="tooltip"
          title="关闭全屏"
          style="display: none"
        >
          <a>
            <img
              title="关闭全屏"
              :src="require('@/assets/images/fullAc.png')"
            >
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      isGuide: false,
    }
  },
  computed: {},
  watch: {
  },
  mounted() {
  },
  methods: {
    switchBGM(flag) {
      if (flag) {
        window.manage.switchBgmState(true)
        document.querySelector("#openMusic").style.display = "none"
        document.querySelector("#closeMusic").style.display = "block"
      } else {
        window.manage.switchBgmState(false)
        document.querySelector("#openMusic").style.display = "block"
        document.querySelector("#closeMusic").style.display = "none"
      }
    },
  },
}
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
}
::-webkit-scrollbar-thumb {
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #edd3b0;
  border-color: #edd3b0;
  color: #edd3b0;
  outline: none;
}

@wh: 50px;
// ----------左下方菜单--------------
.pinBottom.left {
  bottom: 30px;
  > div {
    > .viewContainer {
      display: flex;
      flex-direction: row;
      margin-left: 30px;
      padding: 0;
      #play,
      #pause {
        margin-right: 30px;
        width: @wh;
        height: @wh;
        padding: 0;
        img {
          height: 100%;
          width: 100%;
          opacity: 0.7;
        }
      }
      #gui-modes-map {
        > div {
          display: inline-block;
          margin-right: 30px;
          width: @wh;
          height: @wh;
          padding: 0;
          cursor: pointer;
          > img {
            height: 100%;
            width: 100%;
            opacity: 0.7;
            display: block !important;
          }
          &.active {
            > img {
              opacity: 1;
            }
          }
        }
      }
    }
  }
}
// ----------end of 左下方菜单--------------

// ----------右下方菜单---------------
.pinBottom.right {
  bottom: 30px;
  .rightViewContainer {
    display: flex !important;
    align-items: center !important;
    margin-right: 30px;
    .ui-icon {
      width: @wh;
      height: @wh;
      margin-left: 30px;
      margin-right: initial;
      background: none;
      border: none;
      padding: 0 !important;
      > a {
        width: 100% !important;
        height: 100% !important;
        > img {
          width: 100%;
          height: 100%;
          opacity: 0.7;
        }
      }
    }
  }
}
// ----------end of 右下方菜单---------------

// -------------移动端特殊样式---------------
@button-margin: calc((100vw - 50px * 5) / 6);
.mobile {
  .pinBottom.left {
    > div {
      > .viewContainer {
        margin-left: @button-margin;
        #play,
        #pause {
          margin-right: @button-margin;
          img {
          }
        }
        #gui-modes-map {
          > div {
            margin-right: @button-margin;
            > img {
            }
            &.active {
              > img {
              }
            }
          }
        }
      }
    }
  }

  .pinBottom.right {
    .rightViewContainer {
      margin-right: @button-margin;
      .ui-icon {
        margin-left: @button-margin;
        > a {
          > img {
          }
        }
      }
    }
  }
}
// -------------end of 移动端特殊样式---------------

</style>
