<template>
  <div class="asidecon">
    <img class="back" @click="emit('close')" :src="require(`@/assets/images/resource/map/ico_back2.png`)" alt="" />
    <ul>
      <li v-for="(item, i) in list" :key="i">
        <p>
          <img :src="require(`@/assets/images/resource/map/${item.color}.png`)" alt="">
          {{ item.name }}
        </p>
        <ul>
          <li @click="handleItem(sub)" :class="{ active: paramsId == sub.sceneCode?.toLowerCase() }" v-for="(sub, idx) in item.children" :key="idx">
            <span>{{ sub.sceneTitle }}</span>
          </li>
        </ul>
      </li>
    </ul>
</div>
</template>

<script setup>


import { onMounted, computed, inject, ref, defineEmits, nextTick } from "vue";
import appStore from '@/store/index';
import { scene,tag_position } from '@/data';
import { useRouter, useRoute } from "vue-router";

const store = appStore();
const emit = defineEmits(["close"]);
const router = useRouter();
const route = useRoute();

console.log('result:route.params.id', route.params.id);
const paramsId = computed(() => route.params.id.toLowerCase())

let number = 'WK1597972789485113344'

let list = ref([])

const COLORMAP = ['ico_blue', 'ico_green', 'ico_yellow']

const handleItem = (item)=>{
  router.replace({name:'scene',params:{
    id:item.sceneCode
  }})
}

onMounted(() => {
  $.ajax({
    method: 'get',
    url: `${process.env.VUE_APP_CDN}/720yun_fd_manage/${number}/someData.json?_=${Math.random()}`,
    dataType: 'json',
    success(data) {
      store.metadata = data
      data.scenes = scene.concat(data.scenes).map(item=>{
        return {
          ...item,
          tag_position: tag_position[item.sceneCode]
        }
      })

      // 过滤空分组
      let ttt = data.catalogRoot.filter((item) => {
        let flag = ''

        if (item.children) {
          item.children.some((sub) => {
            flag = data.scenes.some(son => {
              // console.log(String(son.category).toLowerCase(), String(sub).toLowerCase());
              return String(son.category).toLowerCase() == String(sub).toLowerCase()
            })
            return flag
          });
        }
        return flag
      });

      console.log('result:', ttt);


      list.value = ttt.map((item, idx) => {
        let cc = item.children.map((sub, i) => {
          let arr = data.scenes.filter((son) => {
            return sub == son.category;
          });
          return arr
        })
        return {
          ...item,
          children: cc[0],
          color: COLORMAP[idx]
        }
      })

      console.log('result:', list.value);
      // 查询初始场景的所在2级分组
      // store.setCurrentSecondary(catalog);

    },
    error() {

    }   //请求失败后的回调函数
  })

})

</script>

<style lang="scss" scoped>
.asidecon {
  width: 100%;
  padding: 20px 26px;
  height: 100%;

  .back {
    cursor: pointer;
    width: 28px;
    margin-bottom: 20px;
  }

  >ul {
    height: calc(100% - 40px);
    overflow-y: auto;

    >li {
      margin-bottom: 40px;

      >p {
        font-size: 26px;
        font-weight: bold;
        color: #484641;
        padding-left: 48px;
        position: relative;

        >img {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 36px;
          height: 36px;
        }
      }

      >ul {
        >li {
          margin: 10px 0;
          cursor: pointer;
          height: 46px;
          font-size: 20px;
          color: #484641;
          line-height: 46px;

          >span {
            display: inline-block;
          }

          // &:hover,
          &.active {
            width: 80%;
            height: 100%;
            background: linear-gradient(270deg, #8D7F64 0%, rgba(141, 127, 100, 0) 100%);
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
          }
        }
      }
    }
  }
}
</style>