<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh" >
      <a-layout-header>
        <div class="flex justify-between items-center h-full">
          <div class="text-center text-lg my-3 flex font-semibold">
            <img src="../../assets/org_logo.png" class=" w-7 h-7 mr-2">
            中小企业协会综合服务平台</div>
          <div>
            <!-- <a-popover> -->
              <!-- <template slot="content">
                <p>退出账户</p>
              </template> -->
              <div class="flex justify-between items-center">
                <img class="w-5 h-7 mr-3" src="@/assets/images/avatar.png" alt="头像">
                {{ phone }}
                <span class="inline-block ml-3 cursor-pointer" @click="logout">退出</span>
              </div>
            <!-- </a-popover> -->
          </div>
        </div>
      </a-layout-header>
      <a-layout id="components-layout-demo-fixed-sider" >
        <a-layout-sider width="256" style="background: white" :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
          <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="{ marginLeft: '250px' }">
        <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>
    </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";
import UserService from '@/service/UserManagementService'

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

const userService = new UserService()

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];
    },
    phone() {
      return JSON.parse(window.localStorage.getItem('USER_MSG') as any).phone
    }
  },
  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;
    },
    logout() {
      userService.logout().then(res => {
        if (res.code === 200) {
          window.localStorage.clear()
          this.$router.push('/login')
        }
      })
    }
  },
});
</script>

<style lang="less" scoped>
/deep/a {
  color: #3E4FAF;
}
/deep/ .ant-layout-header {
  background: #fff;
}
</style> 