<template>
  <div class="aside">
    <ul>
      <li :class="{ active: active == item.mapicon }" @click="gotoItem(item)" v-for="(item, i) in list" :key="i">
        <div class="img"
          :style="`background-image:url(${require(`@/assets/images/resource/menu/icon_${item.mapicon}.png`)})`"></div>
        <div class="aname">{{ item.name }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { onMounted, watch, computed, ref, inject } from "vue";
import emitter from "@/mitt/index";
import { scene } from "@/data";
import appStore from '@/store/index';
const store = appStore();

let iconList = scene.filter(item => !item.isNotIcon)


const router = useRouter();
const route = useRoute();

const active = computed(() => route.params.id);


watch(active, () => {
  if (active.value) {
    console.log(active.value,'datadatadata');

    let data = iconList.find((item) => item.id == active.value)
    console.log(data,'datadatadata');
    store.setCurrentCatalogRoot(store.metadata.catalogRoot.find(item => item.id == data.panoId));
    if (store.currentScene.type == '4dkk') {
      store.currentScene = store.currentScenesList[0]
    }
    // emitter.emit("closeIfr", true);
  }
})

let datacwh = scene.find((item) => item.id == 'cwh')


const list = ref(iconList.concat([

  {
    name: "主页",
    mapicon: "home",
  }

]));

const gohome = () => {
  router.push({
    path: `/`,
  });
  setTimeout(() => {
    window.location.reload()
  }, 0);
}

const gotoItem = (item) => {
  if (item.mapicon == 'home') {
    gohome()
  }
  else if (item.mapicon == 'cwh') {
    let data = scene.find((item) => item.id == 'cwh')
    router.push({
      name: `Scene`,
      params: {
        id: data.id
      },
      query: {
        active: data.subPano
      }
    });
  }
  else {
    router.push({
      name: `Scene`,
      params: {
        id: item.mapicon
      }
    });
    // store.currentScene = store.currentScenesList[0]
  }
};

store.$subscribe((mutation, state) => {
  // console.log(state.currentCatalogRoot);
  // if (state.currentCatalogRoot) {
  //   let data = scene.find((item) => item.panoId == state.currentCatalogRoot.id)
  //   console.log(data.id,'data');
  //   gotoItem(data)
  // }
})


</script>

<style lang="scss" scoped>
.aside {
  position: fixed;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 100;

  >ul {
    flex: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    >li {
      text-align: center;
      cursor: pointer;
      position: relative;

      .img {
        height: 100px;
        width: 100px;
        margin: 0;
        background-size: contain;
        background-position: center;
      }

      .aname {
        background-image: url(~@/assets/images/resource/scene/tanchu.png);
        background-size: 100% 100%;
        padding: 0 26px 6px 20px;
        line-height: 40px;
        height: 44px;
        position: absolute;
        right: 90%;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        white-space: nowrap;
        display: none;
      }

      &:hover {
        .aname {
          display: block;
        }
      }
    }

    .active {
      .img {
        position: relative;

        &::after {
          background-image: url(~@/assets/images/resource/scene/guanquan.png);
          background-size: cover;
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: -1;
        }
      }
    }
  }

  >div {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;

    >img {
      height: 48px;
      width: 48px;
      margin: 0 10px;
      cursor: pointer;
    }
  }
}



@media screen and (max-width: 1000px) {
  .aside {
    width: 100%;
    height: 90px;
    padding: 0 5%;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(200, 119, 113, 0.54) 0%, rgba(120, 27, 24, 0.54) 100%);

    &::before {
      content: "";
      display: inline-block;
      width: 100%;
      height: 2px;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.5;
      background: linear-gradient(270deg, rgba(183, 18, 15, 0) 0%, #ffffff 50%, rgba(183, 18, 15, 0) 100%);
    }

    .viewNum {
      position: absolute;
      top: unset;
      bottom: 110%;
      left: 20px;
      right: unset;
      align-items: center;
      width: calc(335px * 0.6);
      height: calc(52px * 0.6);
      font-size: 14px;
      padding-bottom: 0;
    }

    >ul {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;

      >li {
        >img {
          width: 40px;
          height: 40px;
          margin: 0;
        }

        >span {
          font-size: 12px;
          margin-top: 0;
        }
      }
    }

    >div {
      position: absolute;
      right: 20px;
      bottom: 110%;
      top: unset;
      display: flex;
      flex-direction: column;
      transform: none;

      >img {
        height: 30px;
        width: 30px;
        margin: 10px 0 0 0;
        cursor: pointer;
      }
    }
  }

  .introduction {
    position: fixed;
    width: 94%;
    height: auto;
    max-height: 65vh;
    color: #ffecde;
    padding: 20px;
    max-width: 98%;
    background-size: 100% 100%;
    transform: translateX(-50%);
    top: 94px;

    .title {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }

    >p {
      line-height: 2;
      margin-top: 10px;
      text-align: justify;
      text-indent: 32px;
      font-size: 14px;
      max-height: calc(100vh - 355px);
      overflow-y: auto;
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

@keyframes boom-open {
  0% {
    background-position: 0 0;
  }

  to {
    background-position: -4224px 0;
  }
}

@keyframes boom-close {
  0% {
    background-position: -4224px 0;
  }

  to {
    background-position: 0 0;
  }
}
</style>
