<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider">
      <a-layout-sider width="256" style="background: white">
        <div class="text-center text-lg my-3">中小企业协会综合服务平台</div>
        <a-menu
          style="width: 256px"
          :open-keys.sync="openKeys"
          mode="inline"
          :selectedKeys="selectedKeys"
        >
          <component
            v-for="menu in filteredMenuList"
            :key="menu.routeName"
            @click="handleClickMenu"
            :is="hasChildren(menu) ? 'a-sub-menu' : 'a-menu-item'"
          >
            {{ hasChildren(menu) ? "" : menu.getName() }}

            <span slot="title" v-if="hasChildren(menu)"
              ><span>{{ menu.getName() }}</span></span
            >
            <a-menu-item
              v-for="subItem in getMenuChildren(menu)"
              :key="subItem.routeName"
            >
              {{ subItem.getName() }}
            </a-menu-item>
          </component>
        </a-menu>
      </a-layout-sider>
      <a-layout style="min-height: 100vh">
        <a-layout-content
          :style="{ margin: '24px 16px 0', overflow: 'initial' }"
        >
          <div
            :style="{
              padding: '24px',
              background: '#fff',
              textAlign: 'center',
            }"
          >
            <router-view />
          </div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">
          普惠金融 ©2021 Created by 33
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { Menu, Icon, Layout } from "ant-design-vue";
import getMenuList from "./getMenuList";
import { eRole } from "@/types/role";
import { iMenuItem, iMenuList } from "./types";
import { Fragment } from "vue-fragment";
import { getUserMsg } from "@/utils/userMsg/userMsg";
import { getOldRoleFromUserMsg } from "@/utils/user";

Vue.use(Menu);
Vue.use(Icon);
Vue.use(Layout);

export default Vue.extend({
  components: {
    Fragment,
  },
  data() {
    return {
      openKeys: [],
    };
  },
  mounted() {
    // console.log(this.menuList, "show menulist");
  },
  computed: {
    role(): eRole | undefined {
      const msg = getUserMsg();
      return (msg && getOldRoleFromUserMsg(msg)) as unknown as
        | eRole
        | undefined;
    },
    menuList(): iMenuList {
      // console.log(this.role, "show this.role");
      return (this.role !== undefined && getMenuList(this.role)) || [];
    },
    filteredMenuList(): iMenuList {
      return this.menuList.filter((i) => !i.hiddeInMenu);
    },
    selectedKeys(): Array<String> {
      return [(this.$route.meta as { selectedName: string }).selectedName];
    },
  },
  methods: {
    getMenuChildren(menu: iMenuItem) {
      return menu.children || [];
    },
    handleClickMenu(e: { key: string; keyPath: string[] }) {
      const list: iMenuItem[] = [];
      this.menuList.forEach((item) => {
        const children = item.children;
        if (children && children.length !== 0) {
          /* 有子菜单 */
          children?.forEach((i) => {
            list.push(i);
          });
        } else {
          /* 无子菜单 */
          list.push(item);
        }
      });
      const item = list.find((i) => i.routeName === e.key);
      item &&
        this.$router.push({
          name: item.routeName,
        });
    },
    hasChildren(menu: iMenuItem) {
      return menu.children && menu.children.length !== 0;
    },
  },
});
</script>

<style lang="less" scoped>
/deep/a {
  color: #3E4FAF;
}
</style> 