<template>
  <div class="pinBottom-container">
    <div class="pinBottom left">
      <div class="viewContainer">
        <div id="previous" class="previous desktop-only ui-icon" style="display: none">
          <a>
            <img :src="PauseIcon" width="24" height="24" data-original-title="播放" />
          </a>
        </div>
        <div id="play" class="ui-icon" data-original-title="播放">
          <img :src="PauseIcon" width="24" height="24" title="播放" />
          <span>开始漫游</span>
        </div>
        <div id="pause" class="ui-icon" style="display: none">
          <img title="暂停" :src="PlayIcon" width="24" height="24" />
          <span>暂停漫游</span>
        </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 id="gui-modes-map" class="ui-icon double active">
          <div data-original-title="导览" id="pullTab" title="导览">
            <div class="icon-slot" />
            <span>导览列表</span>
          </div>

          <div id="hotList" title="热点列表" data-original-title="热点列表" style="display: none">
            <div class="icon-slot" />
            <span>热点列表</span>
          </div>
          <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
            <div class="icon-slot" />
            <span>全景漫游</span>
          </div>
          <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="迷你模型" class="">
            <div class="icon-slot" />
            <span>迷你模型</span>
          </div>
          <div data-original-title="俯视图" id="gui-modes-floorplan" title="俯视图">
            <div class="icon-slot" />
            <span>顶部视图</span>
          </div>
          <div data-original-title="VR" id="vr" title="" style="display: none"></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>
      </div>
    </div>
    <div class="pinBottom right hideTarget">
      <div class="rightViewContainer clearfix">
        <div id="sharing" class="ui-icon wide" title="分享" @click="shareVisible = true">
          <div class="icon-slot" />
          <span>分享</span>
        </div>
        <div id="volume" class="ui-icon wide" style="display: none">
          <div class="icon-slot" />
          <span>音乐</span>
        </div>
        <div id="vr" class="ui-icon wide hidden" style="display: none">
          <a>
            <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
          </a>
        </div>
        <el-popover placement="top" :content="`${visitCount}`" effect="dark" trigger="click">
          <template #reference>
            <div id="viewer" class="ui-icon wide" title="浏览量">
              <div class="icon-slot" />
              <span>浏览量</span>
            </div>
          </template>
        </el-popover>
        <div
          id="gui-fullscreen"
          class="ui-icon wide"
          data-placement="top"
          title="{[{ VIEW_FULLSCREEN }]}"
        >
          <a>
            <div class="icon-slot" />
            <span>全屏</span>
          </a>
        </div>
        <div
          id="gui-fullscreen-exit"
          class="ui-icon wide"
          data-placement="top"
          title="{[{ EXIT_FULLSCREEN }]}"
          style="display: none"
        >
          <a>
            <div class="icon-slot" />
            <span>退出全屏</span>
          </a>
        </div>
        <div class="pull-right terms terms2"></div>
      </div>
    </div>
  </div>

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

<script setup lang="ts">
  import { onMounted, onUnmounted, ref } from 'vue';
  import PauseIcon from '@/assets/images/ylct/1-min.png';
  import PlayIcon from '@/assets/images/ylct/11-min.png';
  import { homeApi } from '@/api';
  import SharePopup from '../share-popup/index.vue';

  let helperVisible = false;
  const starSum = ref(0);
  const shareVisible = ref(false);
  const visitCount = localStorage.getItem('visitCount') ?? 0;

  const closeHelper = () => {
    window.$('#interaction-modal').removeClass('fadeIn');
    helperVisible = false;
  };

  const handleKeydown = () => {
    helperVisible && closeHelper();
  };
  const handleClick = (e: MouseEvent | TouchEvent) => {
    const clickedElement = e.target;
    // @ts-ignore
    const modalElement = clickedElement?.closest('#interaction-modal');
    // @ts-ignore
    const btnElement = clickedElement?.closest('.helper-btn');
    if (!modalElement && !btnElement && helperVisible) {
      closeHelper();
    }
  };

  const getDetail = async () => {
    const { data } = await homeApi.getSceneDetail(window.number);

    if (!data) return;
    starSum.value = data.starSum;
  };

  onMounted(() => {
    getDetail();

    window.addEventListener('keydown', handleKeydown);
    window.addEventListener('click', handleClick);
    window.addEventListener('touchmove', handleClick);
  });

  onUnmounted(() => {
    window.removeEventListener('keydown', handleKeydown);
    window.removeEventListener('click', handleClick);
    window.removeEventListener('touchmove', handleClick);
  });
</script>

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