<template>
  <div class="box flex flex-wrap pl-[2%] mt-8">
    <n-card title="" style="margin-bottom: 16px" v-for="(ii,iii) in navList">
      <n-tabs default-value="0" justify-content="space-evenly" type="line">
        <n-tab-pane class="flex flex-wrap" :name="index+''" :tab="item.menuClass" v-for="(item, index) in ii">
          <div class="card mr-4 mb-4 rounded-md py-4 flex justify-center items-center w-[320px] bg-[#f2e8fc]" @click="link(it.menuLink)" v-for="(it, idx) in item.children" :key="index">
            <div class="left mr-3">
              <img width="40" height="40" class="rounded-full bg-pp-400"  :src="it.menuIcon" alt="">
            </div>
            <div class="right w-[224px]">
              <div class="text-[20px] text-pp-700 font-bold">{{ it.menuName }}</div>
              <div class="truncate">{{ it.menuDesc }}</div>
            </div>
          </div>
        </n-tab-pane>
      </n-tabs>
    </n-card>
  </div>
</template>

<script setup>
import { chunkArrayInGroups } from '@/util/index.js';
import { onMounted } from 'vue';


//mark import

//mark data
const navList = ref([])
const active = ref(-1)
//mark method
function formatNav(list) {
  let menu = []
  let result = []
  list.forEach(i => {
    if (!menu.includes(i.menuClass)) {
      menu.push(i.menuClass)
    }
  });
  menu.forEach(i => {
    result.push({
      menuClass: i,
      children: list.filter(it => it.menuClass == i),
      exp: false
    })
  })
  console.log(result);


  return chunkArrayInGroups(result, 4)

}


function link(url) {
  window.open(url, "_blank")
}
//mark 周期、内置函数等
onMounted(async () => {
  const res = await $http.nav.listNav()
  navList.value = formatNav(res.data)
  console.log(navList.value);
})

</script>

<style scoped lang="less">
.box {
  align-items: start;
}

:deep(.n-collapse-item__header) {
  background-color: red;
}
</style>