<template>
  <div class="pinBottom-container">
    <div class="pinBottom left">
      <div id="previous" class="previous desktop-only ui-icon" style="display: none">
        <a>
          <img src="/images/wsyd/play.png" width="24" height="24" data-original-title="播放" />
        </a>
      </div>
      <div id="play" class="ui-icon" data-original-title="自动漫游">
        <a>
          <img src="/images/wsyd/play.png" width="24" height="24" />
          <p>自动漫游</p>
        </a>
      </div>
      <div id="pause" class="ui-icon" style="display: none">
        <a>
          <img title="暂停" src="/images/wsyd/pause.png" width="24" height="24" />
          <p>自动漫游</p>
        </a>
      </div>
      <div id="next" class="next desktop-only ui-icon wide" style="display: none">
        <a>
          <i title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
        </a>
      </div>
      <div data-original-title="导览" id="pullTab" title="">
        <i class="icon icon-inside" title="场景导览" />
        <p>场景导览</p>
      </div>
      <div data-original-title="热点列表" id="hotList" title="" style="display: none">
        <img class="icon icon-inside" src="/images/wsyd/hotlist.png" title="热点列表" />
        <p>热点列表</p>
      </div>
      <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="hidden">
        <img class="icon icon-inside" src="/images/wsyd/inside.png" title="全景漫游" />
        <p>全景漫游</p>
      </div>
      <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
        <img class="icon icon-inside" src="/images/wsyd/dollhouse.png" title="迷你模型" />
        <p>迷你模型</p>
      </div>
      <div data-original-title="俯视图" id="gui-modes-floorplan" title="">
        <img class="icon icon-inside" src="/images/wsyd/floor.png" title="俯视图" />
        <p>俯视图</p>
      </div>
      <div
        data-original-title="消除外壳"
        id="gui-remove-face"
        title=""
        style="display: none; float: left"
      >
        <img class="icon icon-inside" src="/images/face.jpg" />
      </div>
    </div>

    <img class="pinBottom-border" src="/images/wsyd/menu-img.png" />

    <div class="pinBottom right hideTarget">
      <div id="thumb" class="ui-icon wide" :class="{ active: animationThumb }" @click="handleThumb">
        <a>
          <div class="icon icon-slot" />
          <p>{{ thumbNum }}</p>
        </a>
      </div>
      <div id="sharing" class="ui-icon wide" title="分享" @click="shareVisible = true">
        <a>
          <i class="icon icon-share" />
          <p>分享</p>
        </a>
      </div>
      <div id="volume" class="ui-icon wide" style="display: none">
        <a>
          <img
            class="icon icon-inside"
            src="/images/wsyd/Volume btn_on.png"
            data-default-url="/images/wsyd/Volume btn_on.png"
            data-active-url="/images/wsyd/Volume btn_off.png"
          />
          <p>音乐</p>
        </a>
      </div>
      <el-popover placement="top" :content="`${visitCount}`" effect="dark" trigger="click">
        <template #reference>
          <div id="viewer" class="ui-icon wide" title="浏览量">
            <a>
              <i class="icon icon-viewer" />
              <p>浏览量</p>
            </a>
          </div>
        </template>
      </el-popover>
      <div id="vr" class="ui-icon wide hidden">
        <a>
          <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
        </a>
      </div>
      <div
        id="gui-fullscreen"
        class="ui-icon wide"
        data-placement="top"
        title="{[{ VIEW_FULLSCREEN }]}"
      >
        <a>
          <i class="icon icon-fullscreen"></i>
          <p>全屏</p>
        </a>
      </div>
      <div
        id="gui-fullscreen-exit"
        class="ui-icon wide"
        data-placement="top"
        title="{[{ EXIT_FULLSCREEN }]}"
        style="display: none"
      >
        <a>
          <i class="icon icon-fullscreen-exit"></i>
          <p>全屏</p>
        </a>
      </div>
    </div>
  </div>

  <share-popup v-model:visible="shareVisible" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import SharePopup from '../share-popup/index.vue';

  const THUMB_KEY = 'thumbs';
  const shareVisible = ref(false);
  const thumbNum = ref(Number(localStorage.getItem(THUMB_KEY) ?? 0));
  const animationThumb = ref(false);
  const visitCount = localStorage.getItem('visitCount') ?? 0;

  const handleThumb = () => {
    if (animationThumb.value) return;

    animationThumb.value = true;
    thumbNum.value += 1;
    localStorage.setItem(THUMB_KEY, `${thumbNum.value}`);

    setTimeout(() => {
      animationThumb.value = false;
    }, 200);
  };
</script>

<style lang="scss" scoped>
  @use './index.wsyd.scss';
</style>
