<script setup lang="ts">
import {useCounterStore} from "@/stores/counter";
import {useRouter} from "vue-router";
import { h, ref, onMounted } from 'vue';
import type { MenuProps } from 'ant-design-vue';
import { ItemType } from 'ant-design-vue';
const router=useRouter()
const store = useCounterStore()

const imgs='https://ts1.cn.mm.bing.net/th/id/R-C.9e45a633e95179a37c907fa2797999ad?rik=aMuPS4TunAh5ZA&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214Q2.jpg&ehk=P%2firfYpARc1fHht%2bWpapYR4W15p6SLABE8CBexoeon4%3d&risl=&pid=ImgRaw&r=0'

function getItem(
    label: string,
    key: string,
    icon?: any,
    children?: ItemType[],
    type?: 'group',
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as ItemType;
}
const current = ref<string[]>(['/class']);
const items = ref<MenuProps['items']>([]);
let list=[
  {label:'首页',key:'/'},
  {label:'类',key:'/class'},
  {label:'表单',key:'/form',},
  {label:'二级',key:'/sub2',children:[
      {label:'关于',key:'/about'},
      {label:'我的',key:'/my'},
    ]},
]
let chilList=[]
const onclick=({ key })=>{
  router.push({path:key})
}
const forList=(list)=>{
  list.forEach(i=>{
    if(i.children){
      let chil=[]
      i.children.forEach(y=>{
        chil.push(getItem(y.label, y.key, h('img',{
          style: {
            width: '16px',
            height: '16px',
          },
          src: imgs
        })))
      })
      chilList.push(getItem(i.label, i.key, h('img',{
        style: {
          width: '16px',
          height: '16px',
        },
        src: imgs
      }),[...chil]))
    }else{
      chilList.push(getItem(i.label, i.key, h('img',{
        style: {
          width: '16px',
          height: '16px',
        },
        src: imgs
      })))
    }
  })
}


onMounted(()=>{
  forList(list)
  items.value=chilList
})
</script>

<template>
  <a-menu
      v-model:selectedKeys="current"
      mode="inline"
      @click="onclick"
      :items="items"
  />
</template>

<style scoped>

</style>