<template>
  <div class="asidecon">
    <img class="back" :class="{ isShow: isAside }" @click="emit('close')"
      :src="require(`@/assets/images/resource/map/ico_down@2x.png`)" alt="" />
    <ul class="header">
      <li @click="current = item" :class="{ active: item.id == current.id }" v-for="(item, i) in list" :key="i">
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <ul class="list">
      <li @click="handleItem(item)" :class="{ active: paramsId == item.sceneCode.toLowerCase() }"
        v-for="(item, i) in current.children" :style="{ backgroundImage: `url(${item.icon})` }" :key="i">
        <span>{{ item.sceneTitle }}</span>
      </li>
    </ul>
</div>
</template>

<script setup>






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


defineProps({
  isAside: Boolean,
})

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

const paramsId = computed(() => route.params.id.toLowerCase())
const current = ref({})
let list = ref([])
let number = 'WK1597972789485113344'

watch(list, () => {
  let aaa = list.value.find(item => {
    let tag = item.children.find(sub => sub.sceneCode.toLowerCase() == paramsId.value)
    return tag
  })
  current.value = aaa
})


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 4px;
  height: 100%;
  text-align: center;
  overflow-y: auto;

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

  .isShow {
    transform: rotate(180deg);
  }

  .header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    >li {
      height: 28px;
      line-height: 28px;
      border-radius: 14px 14px 14px 14px;
      border: 1px solid #E1CEAA;
      padding: 0 10px;
      margin: 6px;

      >span {
        color: #FFFFFF;
      }

      &.active {
        background: rgba(225, 206, 170, 0.6);
        color: #3C301B;
      }
    }
  }

  .list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    >li {
      width: 46%;
      height: 122px;
      border: none;
      background-size: cover;
      background-position: center;
      margin: 2%;
      position: relative;

      &::after {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        display: inline-block;
        background: rgba(0, 0, 0, 0.5);
        content: '';
        pointer-events: none;
      }

      &:nth-of-type(2n+1) {
        margin-right: 0;
      }

      &.active {
        border: 3px solid #D9C7A4;

        &::after {
          display: none;
        }
      }

      >span {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 14px;
      }
    }
  }
}
</style>