<script setup>
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import store from '@/store'

const { totalNum } = storeToRefs(store.countStore) || 0,
  userInfo = storeToRefs(store.userStore).userInfo || {},
  router = useRouter(),
  route = useRoute(),
  props = defineProps({
    index: String,
    title: String,
    item: Object,
    active: String
  }),
  toRoute = (val) => {
    router.push({ name: val.index })
  },
  customIsShow = (item) => {
    if ((item.name === 'operationProjectRecord') && userInfo.value.regionCode === '330500') {
      return true
    }
    return true
  }

</script>
<template>
  <template
    v-if="!(item.children && item.children.length) && !item.meta.hidden&&customIsShow(item)"
  >
    <el-menu-item :index="props.index" @click="toRoute">
      <svg-icon
        v-if="item.meta.activeIcon&&item.meta.uIcon"
        :name="index == active ? item.meta.activeIcon : item.meta.uIcon"
        svg-class="menuIcon"
      />
      <template #title>
        <el-badge
          v-if="item.name==='waitMeToHandle'"
          :value="totalNum"
          :max="99"
          class="myBadage"
          :hidden="!totalNum"
        >
          <span>{{ title }}</span>
        </el-badge>
        <span v-else>{{ title }}</span>
      </template>

    </el-menu-item>
  </template>
  <template v-else>
    <el-sub-menu v-if="!item.meta.hidden&&(customIsShow(item))" :index="props.index">
      <template #title>
        <svg-icon
          v-if="item.meta.activeIcon&&item.meta.uIcon"
          :name="route.path.includes(index)||route.meta.activeMenu?.includes(index) ? item.meta.activeIcon : item.meta.uIcon"
          svg-class="menuIcon"
        />
        <span>{{ title }}</span>
      </template>
      <sidebar-item
        v-for="i in item.children"
        :key="i.name"
        :index="i.name"
        :title="i.meta.title"
        :item="i"
      />
    </el-sub-menu>
  </template>
</template>

<style scoped lang='less'>
.menuIcon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
</style>
