<template>
  <div class="avue-sidebar">
    <logo></logo>
    <el-scrollbar style="height: 100%">
      <div v-if="validatenull(menu)" class="avue-sidebar--tip">
        {{ menuTip }}
      </div>
      <el-menu
        unique-opened
        :default-active="nowTagValue"
        mode="vertical"
        :show-timeout="200"
        :collapse="keyCollapse"
      >
        <sidebar-item
          :menu="menu"
          :screen="screen"
          first
          :props="menuProps"
          :collapse="keyCollapse"
        ></sidebar-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import {ElScrollbar} from 'element-plus';
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import logo from "../logo.vue";
import sidebarItem from "./sidebarItem.vue";
import {
  computed,
  defineComponent,
  reactive,
  ref,
  watch,
  Ref,
  onMounted,
  inject,
  provide,
} from "vue";

interface Sidebar {
  validatenull: Function;
  menuProps: any;
  keyCollapse: any;
  nowTagValue: any;
  menu: any;
  screen: any;
}

export default defineComponent({
  name: "sidebar",

  // 组件
  components: { sidebarItem, logo, ElScrollbar },

  setup(props, context): Sidebar {
    const router = useRouter();
    const store = useStore();
    const openMenu: any = inject<Function>("openMenu");
    
    const menuProps = ref(store.state.common.website.menu.props);
  
    const website = computed(() => {
      return store.getters.website;
    });
    const menu = computed(() => {
      return store.getters.menu;
    });
    const tag = computed(() => {
      return store.getters.tag;
    });
    const screen = computed(() => {
      return store.getters.screen;
    });
    const keyCollapse = computed(() => {
      return store.getters.keyCollapse;
    });
    const menuId = computed(() => {
      return store.getters.menuId;
    });
    const nowTagValue = computed(() => {
      return (router as any).$avueRouter.getValue(router.currentRoute.value);
    });
    const validatenull = (val: any) => {
      if (typeof val == "boolean") {
        return false;
      }
      if (typeof val == "number") {
        return false;
      }
      if (val instanceof Array) {
        if (val.length == 0) return true;
      } else if (val instanceof Object) {
        if (JSON.stringify(val) === "{}") return true;
      } else {
        if (
          val == "null" ||
          val == null ||
          val == "undefined" ||
          val == undefined ||
          val == ""
        )
          return true;
        return false;
      }
      return false;
    };
    // mounted函数
    onMounted(async () => {
      openMenu(menuId);
    });
    // 返回值
    return {
      validatenull,
      menuProps,
      keyCollapse,
      nowTagValue,
      menu,
      screen,
    };
  },
});
</script>
<style lang="scss" scoped>
</style>

