<template>
  <q-expansion-item class="demo" :class="{ 'nav-parent': activeParent }" v-model="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 } from '../../utils/menus'
import { computed, defineComponent, inject, PropType, provide, reactive, toRefs, ref, watch } from 'vue'
import svgIcon from '../global/svg-icon.vue'
import { DirtionmaryHelper } from '../../config/dictionary'
export default defineComponent({
  components: { svgIcon },
  name: 'nav-item',
  props: {
    menu: {
      type: Object as PropType<Menu>,
      required: true
    }
  },

  setup(props) {
    const activeMenu = inject(DirtionmaryHelper.MENU_KEYS) as any

    watch(activeMenu, (n, o) => {
      if (!activeMenu.value) data.activeParent = false
      if (props.menu.childs) {
        let temp = props.menu.childs.find(x => x.id == activeMenu.value)
        data.activeParent = temp ? true : false
      } else {
        data.activeParent = props.menu.id == activeMenu.value
      }
    })

    const data = reactive({
      activeParent: false
    })

    const methods = {
      checkMenuHandler(id: number) {
        activeMenu.value = id
      }
    }
    return { ...toRefs(data), ...methods, activeMenu }
  }
})
</script>
