<template>
  <div class="layer" v-if="showPanel">
    <div class="layer-content animated" :class="animateActive ? 'fadeInUpBig' : 'fadeOutDownBig'">
      <div class="layer-title">
        <span>{{ title }}</span>
        <i
          @click.stop="handleClose"
          class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close close-btn"
        ></i>
      </div>
      <div class="main">
        <tabs>
          <tab name="简介">
            <IntroText :data="roomInfo" :video="roomVideo" />
          </tab>
          <tab name="相册">
            <ImageGrid :data="imageList" @click-image="handleViewer" />
          </tab>
          <!-- <tab name="地图">
            <Map />
          </tab> -->
        </tabs>
      </div>
    </div>
    <ImageViewer
      :current="currentImage"
      :data="imageList"
      v-if="showViewer"
      @close="showViewer = false"
    />
  </div>
</template>

<script setup lang="ts">
  import { Tabs, Tab } from 'vue3-tabs-component';
  import { useAppStore } from '/@/store/modules/app';
  import { computed, ref, watchEffect, unref, onMounted } from 'vue';
  import ImageGrid from './image-grid.vue';
  import IntroText from './intro-text.vue';
  import ImageViewer from './image-view.vue';
  // import Map from './map.vue';
  import { useSceneStore } from '/@/store/modules/scene';
  import { useRoom } from '/@/hooks/useRoom';

  const appStore = useAppStore();
  const sceneStore = useSceneStore();
  (window as any).appStore = appStore;
  const showPanel = computed(() => appStore.isShowIntroPanel);
  const { room } = useRoom();

  const title = computed(() => sceneStore.metadata.title);
  const animateActive = ref(false);
  const showViewer = ref(false);
  const currentImage = ref(0);
  const imageList = ref<string[]>([]);
  const roomInfo = ref('');
  const roomVideo = ref('');
  watchEffect(() => {
    if (unref(showPanel)) {
      animateActive.value = true;
    } else {
      animateActive.value = false;
    }
    if (room.value?.image) {
      imageList.value = room.value.image;
    }

    if (room.value?.roomInfo) {
      // console.log('roomInfo', room.value.roomInfo);
      roomInfo.value = room.value.roomInfo;
    }
    if (room.value?.video?.length) {
      // console.log('video', room.value.video);
      roomVideo.value = room.value.video[0];
    }
  });

  const handleViewer = (index: number) => {
    showViewer.value = true;
    currentImage.value = index;
  };

  const handleClose = () => {
    appStore.setShowIntroPanel(false);
  };
  onMounted(() => {});
</script>

<style lang="scss" scoped>
  .close-btn {
    position: absolute;
    right: 20px;
    // top: 36px;
    font-size: 18px;
    cursor: pointer;
    z-index: 100;
  }
  .layer {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    // display: none;
    .layer-content {
      position: relative;
      width: 600px;
      font-size: 14px;
      height: calc(var(--vh) * 60);
      color: white;
      display: flex;
      flex-direction: column;
      z-index: 0;
      margin: 0 auto;
      top: 40%;
      &::before {
        content: ' ';
        background: rgba(0, 0, 0, 0.9);
        border-radius: 0.14rem 0.14rem 0px 0px;
        filter: blur(1px);
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: -1;
      }
    }
    .layer-title {
      min-height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 18px;
      position: relative;
      //   color: white;
    }
    .main {
      flex: 1;
      display: flex;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      pointer-events: all;
    }
  }
</style>
<style lang="scss">
  [is-mobile] {
    .layer .layer-content {
      width: 100%;
      left: 0;
      transform: none;
    }
  }
  .tabs-component {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .tabs-component-tabs {
    display: flex;
    flex-direction: row;
    .tabs-component-tab {
      padding: 15px 20px;
      font-size: 16px;
      > a {
        color: rgba(255, 255, 255, 0.5);
      }
      &.is-active {
        > a {
          color: rgba(255, 255, 255, 1);
          position: relative;
          &::before {
            content: '';
            width: 50%;
            height: 2px;
            background-color: #ed5d18;
            position: absolute;
            bottom: -8px;
            border-radius: 2px;
            transform: translate(50%, 50%);
          }
        }
      }
    }
  }
  .tabs-component-panels {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    .tabs-component-panel {
      flex: 1;
      height: 100%;
      width: 100%;
      overflow-y: scroll;
      padding-bottom: 80px;
    }
  }
</style>
