<template>
  <q-list style="color: #9d9da6">
    <nav-item :menu="x" v-for="x in menus"></nav-item>
  </q-list>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, inject } from "vue";
import navItem from "./nav-item.vue";
import { useMenus, Menu } from "../../utils/menus";
import { DirtionmaryHelper } from "../../config/dictionary";
export default defineComponent({
  components: { navItem },
  name: "navs",
  setup() {
    const data = reactive({
      menus: [] as Menu[],
    });

    //销售的菜单sell.oytour
    const sellMenuList = useMenus.getMenus().filter((x) => {
      return x.id == 16;
    });

    const typicMenuList = [] as any; //台湾PIC菜单
    const allMenuList = useMenus.getMenus();
    if (allMenuList && allMenuList.length > 0) {
      allMenuList.forEach((item) => {
        if (item.id != 16 && item.id != 13 && item.id != 10 && item.id != 20) {
          typicMenuList.push(item);
        }
      });
    }

    if (inject(DirtionmaryHelper.DOMAIN_NAME) == "sell.oytour") {
      data.menus = sellMenuList;
    } else if (inject(DirtionmaryHelper.DOMAIN_NAME) == "typic.oytour") {
      data.menus = typicMenuList;
    } else {
      data.menus = useMenus.getMenus();
    }

    return { ...toRefs(data) };
  },
});
</script>

<style>
.nav-list .nav-group:hover span,
.nav-list .nav-item:hover span,
.nav-list .nav-item.active span,
.nav-list .nav-group.active span,
.parent-name {
  color: #ffffff !important;
}
.nav-list .nav-group.active .svg-icon-nav g [fill],
.nav-group:hover .svg-icon-nav g [fill],
.nav-item:hover .svg-icon-nav g [fill],
.nav-list .nav-item.active .svg-icon-nav g [fill],
.nav-active .svg-icon-nav g [fill],
.nav-parent .svg-icon-nav g [fill] {
  fill: #ffffff !important;
  /* color: #FFFFFF !important; */
}
.nav-list .q-focus-helper {
  opacity: 0 !important;
}
.nav-active {
  color: #fff !important;
  transition: color 0.2s ease;
  background-color: #2a2a3c;
}
</style>
