<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <el-menu-item
        v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
        :index="item[pathKey].toString()"
        @click="open(item)"
        :key="item[labelKey]"
        :class="{ 'is-active': vaildActive(item) }"
      >
        <i :class="item[iconKey]"></i>
        <template #title>
          <span :alt="item[pathKey]">{{ generateTitle(item) }}</span>
        </template>
      </el-menu-item>
      <el-submenu
        v-else-if="!validatenull(item[childrenKey]) && vaildRoles(item)"
        :index="item[pathKey].toString()"
        :key="item[labelKey]"
      >
        <template #title>
          <i :class="item[iconKey]"></i>
          <span :class="{ 'el-menu--display': collapse && first }">{{
            generateTitle(item)
          }}</span>
        </template>
        <template v-for="(child, cindex) in item[childrenKey]">
          <el-menu-item
            :index="(child[pathKey], cindex).toString()"
            @click="open(child)"
            :class="{ 'is-active': vaildActive(child) }"
            v-if="validatenull(child[childrenKey])"
            :key="child[labelKey]"
          >
            <i :class="child[iconKey]"></i>
            <template #title>
              <span>{{ generateTitle(child) }}</span>
            </template>
          </el-menu-item>
          <sidebar-item
            v-else
            :menu="[child]"
            :key="cindex"
            :props="props"
            :screen="screen"
            :collapse="collapse"
          ></sidebar-item>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

<script lang="ts">
import { useRouter } from "vue-router";
import { useStore, mapGetters } from "vuex";
import { isURL, validatenull } from "@/util/validate";
import config from "./config";
import {
  computed,
  defineComponent,
  reactive,
  ref,
  watch,
  Ref,
  onMounted,
  inject,
  provide,
} from "vue";

interface SidebarItem {
  validatenull: Function;
  vaildRoles: Function;
  vaildActive: Function;
  generateTitle: Function;
  pathKey: any;
  iconKey: any;
  labelKey: any;
  childrenKey: any;
  open: Function;
}

export default defineComponent({
  name: "sidebarItem",
  props: {
    menu: {
      type: Array,
    },
    screen: {
      type: Number,
      default: 0,
    },
    first: {
      type: Boolean,
      default: false,
    },
    props: {
      type: Object,
      default: () => {
        return {};
      },
    },
    collapse: {
      type: Boolean,
    },
  },
  // 组件
  components: {},

  setup(props, context): SidebarItem {
    const router = useRouter();
    const store = useStore();
    // computed
    const roles = computed(() => {
      return store.getters.roles;
    });
    
    const labelKey = computed(() => {
      return props.props.label || config.propsDefault.label;
    });

    const pathKey = computed(() => {
      return props.props.path || config.propsDefault.path;
    });
    const iconKey = computed(() => {
      return props.props.icon || config.propsDefault.icon;
    });
    const childrenKey = computed(() => {
      return props.props.children || config.propsDefault.children;
    });
    const isOpenKey = computed(() => {
      return props.props.isOpen || config.propsDefault.isOpen;
    });
    const nowTagValue = computed(() => {
      return (router as any).$avueRouter.getValue(router.currentRoute.value);
    });

    const generateTitle = (item: { [x: string]: any; meta: any }) => {
      return (router as any).$avueRouter.generateTitle(
        item[labelKey.value],
        (item.meta || {}).i18n
      );
    };
    const validIsOpen = (item: {
      [x: string]: any;
      group?: any;
      meta?: any;
      query?: any;
    }) => {
      if (item[isOpenKey.value] === 2 && isURL(item[pathKey.value])) {
        return true;
      }
    };
    const vaildActive = (item: { [x: string]: any }) => {
      if (validIsOpen(item)) {
        return false;
      }
      const groupFlag = (item["group"] || []).some((ele: any) =>
        router.currentRoute.value.path.includes(ele)
      );
      return nowTagValue.value === item[pathKey.value] || groupFlag;
    };
    const vaildRoles = (item: { meta: { roles?: any } }) => {
      item.meta = item.meta || {};
      return item.meta.roles ? item.meta.roles.includes(roles.value) : true;
    };
    // const validatenull = (val) => {
    //   return validatenull(val);
    // };
    const open = (item: any) => {
      if (props.screen <= 1) store.commit("SET_COLLAPSE");
      if (validIsOpen(item)) {
        window.open(item[pathKey.value]);
      } else {
        (router as any).$avueRouter.group = item.group;
        (router as any).$avueRouter.meta = item.meta;
        router.push({
          path: (router as any).$avueRouter.getPath(
            {
              name: item[labelKey.value],
              src: item[pathKey.value],
            },
            item.meta
          ),
          query: item.query,
        });
      }
    };

    // mounted函数
    // onMounted(async () => {});

    // 返回值
    return {
      validatenull,
      vaildRoles,
      vaildActive,
      generateTitle,
      pathKey,
      iconKey,
      labelKey,
      childrenKey,
      open,
    };
  },
});
</script>
