<template>
  <q-expansion-item class="demo" :class="{ 'nav-parent': activeParent }">
    <template v-slot:header>
      <q-item-section>
        <div class="row items-center nav-group">
          <svg-icon :icon="menu.icon" :size="18" color="nav"></svg-icon>
          <span class="q-ml-sm" :class="{ 'parent-name': activeParent }">{{ menu.name }}</span>
        </div>
      </q-item-section>
    </template>
    <template v-if="menu.childs">
      <q-item active-class="nav-active" :to="x.url" :active="x.id == activeMenu" @click="checkMenuHandler(x.id)" class="q-ml-md rounded-borders q-mr-md q-pl-md sunzi" clickable v-ripple v-for="(x, i) in menu.childs" :key="i">
        <q-item-section>
          <div class="row items-center nav-item">
            <svg-icon icon="Design/Circle.svg" :size="8" color="nav"></svg-icon>
            <span class="q-ml-sm">{{ x.name }}</span>
          </div>
        </q-item-section>
      </q-item>
    </template>
  </q-expansion-item>
</template>

<script lang="ts">
import { Menu, MENU_KEYS } from '../../utils/menus'
import { computed, defineComponent, inject, PropType, provide, reactive, toRefs,ref, watch } from 'vue'
import svgIcon from '../global/svg-icon.vue'
export default defineComponent({
  components:{svgIcon},
  name: 'nav-item',
  props: {
    menu: {
      type: Object as PropType<Menu>,
      required: true
    }
  },
  
  setup(props) {
    const activeMenu = inject(MENU_KEYS) as any
    const data = reactive({
      activeParent: computed(() => {
        if(!activeMenu) return false
        if (props.menu.childs) {
          let temp = props.menu.childs.find(x => x.id == activeMenu.value)
          return temp ? true : false
        } else {
          return props.menu.id == activeMenu.value
        }
      })
    })
   
    
    const methods = {
      checkMenuHandler(id: number) {
        activeMenu.value = id
      }
    }
    return { ...toRefs(data), ...methods, activeMenu }
  }
})
</script>