<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="播放">
          <a>
            <img :src="PauseIcon" width="24" height="24" title="播放" />
          </a>
        </div>
        <div id="pause" class="ui-icon" style="display: none">
          <a>
            <img title="暂停" :src="PlayIcon" width="24" height="24" />
          </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 id="gui-modes-map" class="ui-icon double active">
          <div data-original-title="导览" id="pullTab" title="导览" />

          <div id="hotList" class="hidden" />
          <el-dropdown
            trigger="click"
            placement="top"
            popper-class="scene-title-popper"
            @visible-change="(v: boolean) => (hotspotActive = v)"
          >
            <div
              data-original-title="热点列表"
              class="hotList"
              title="热点列表"
              :class="{ active: hotspotActive }"
            ></div>

            <template #dropdown>
              <hot-spot-list />
            </template>
          </el-dropdown>
          <div
            data-original-title="迷你模型"
            id="gui-modes-dollhouse"
            title="迷你模型"
            class=""
          ></div>
          <div data-original-title="俯视图" id="gui-modes-floorplan" title="俯视图"></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 class="helper-btn" title="指引" @click="openHelper"></div>
        <div class="good-btn" title="点赞" :class="{ active: staring }" @click="handleStar">
          <div />
          <span v-if="staring">{{ staringString }}</span>
        </div>
        <div id="sharing" class="ui-icon wide" title="分享" @click="copyUrl"></div>
        <div id="volume" class="ui-icon wide" style="display: none"></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>
        <div
          id="gui-fullscreen"
          class="ui-icon wide"
          data-placement="top"
          title="{[{ VIEW_FULLSCREEN }]}"
          style="display: none"
        >
          <a>
            <i class="icon icon-fullscreen"></i>
          </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>
          </a>
        </div>
        <div class="pull-right terms terms2"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, onUnmounted, ref } from 'vue';
  import clipboard from 'clipboard';
  import PlayIcon from '@/assets/images/zgrs/play.png';
  import PauseIcon from '@/assets/images/zgrs/pause.png';
  import { homeApi } from '@/api';
  import HotSpotList from '../hot-spot-list';

  let helperVisible = false;
  const hotspotActive = ref(false);
  const starSum = ref(0);
  const staring = ref(false);
  const staringString = computed(() => {
    const value = starSum.value;
    if (value >= 10000) {
      return `${Math.floor(value / 10000)}w+`;
    } else if (value >= 1000) {
      return `${Math.floor(value / 1000)}k+`;
    } else {
      return value.toString();
    }
  });

  const copyUrl = () => {
    clipboard.copy(window.location.href);

    ElNotification({
      title: '提示',
      type: 'success',
      message: '链接已复制',
      position: 'bottom-right',
    });
  };

  const openHelper = () => {
    window
      .$('#interaction-modal')
      // @ts-ignore
      .addClass(`fadeIn ${window.browser.isMobile() ? 'mobile' : 'desktop'}`);
    helperVisible = true;
  };

  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;
  };

  const handleStar = async () => {
    if (staring.value) return;

    staring.value = true;
    starSum.value++;

    try {
      await homeApi.saveStar(window.number);

      setTimeout(() => {
        staring.value = false;
      }, 1000);
    } catch (err) {
      starSum.value--;
    }
  };

  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>
  @import './index.zgrs.scss';
</style>
