<template>
  <div>
    <a-layout >
      <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="头像">
                <span class="hover" @click="isModal">{{ phone }}</span>
                
                <span class="inline-block ml-3 cursor-pointer" @click="logout">退出</span>
              </div>
              <a-modal v-model="visible" title="基本信息" footer="" >
                <div v-if="newRole=='银行管理员' || newRole=='客户经理岗' || newRole=='管理岗'">
                  <p>姓名：{{roleName}}</p>
                  <p>岗位角色：{{newRole}}</p>
                  <p>手机号：{{rolePhone}}</p>
                  <div v-if="newRole=='客户经理岗' || newRole=='管理岗'">
                    <p>所在层级：{{roleLevel}}</p>
                    <p>详细网点地址：{{roleLocation}}</p>
                  </div>
                </div>
                <div v-else-if="newRole=='平台管理员'">
                  <p>岗位角色：{{newRole}}</p>
                  <p>手机号：{{rolePhone}}</p>
                </div>
              </a-modal>
            <!-- </a-popover> -->
          </div>
        </div>
      </a-layout-header>
      <a-layout >
        <a-layout-sider width="240" style="background: white; min-height:100vh">
          <a-menu
            style="width: 240px"
            :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>
        <a-layout-content
          :style="{ margin: '16px 16px 0', overflow: 'initial' }"
        >
          <div
            :style="{
              padding: '24px',
              background: '#fff',
              textAlign: 'center',
            }"
            style="min-height: 85vh"
          >
            <router-view />
          </div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">
          普惠金融 ©2021 Created by 33
          <!-- <div class=" bg-red-300">{{role}}</div> -->
        </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'
import RouterUtil from "@/utils/router";
import StaffService from "@/service/StaffService";
import AddressService from "@/service/AddressService";

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

const userService = new UserService()

export default Vue.extend({
  components: {
    Fragment,
  },
  data() {
    return {
      footer:'null',
      openKeys: [],
      visible:false,
      roleName:'',
      newRole:'',
      rolePhone:'',
      roleLevel:'',
      roleLocation:'',
      
    };
  },
  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() {
    //  let trip = JSON.parse(window.localStorage.getItem('userName')as any);  //取
      let name = localStorage.getItem('userName');
      console.log(name,'this name');
      return name
    }
  },
  methods: {
    async isModal(){
      const msg=getUserMsg()
      this.roleName=getUserMsg()?.user_name+''
      this.newRole= getUserMsg()?.newRole+''
      this.rolePhone=getUserMsg()?.phone+''
      if(this.newRole==='客户经理岗'||this.newRole==='管理岗' ){
        
       this.roleLevel=getUserMsg()?.level+''
       this.roleLocation=getUserMsg()?.location+''
       switch(getUserMsg()?.level) {
          case 1: 
            this.roleLevel='一级分行'
            break;
          case 2:
            this.roleLevel='二级分行'
            break;
          case 3:
            this.roleLevel='一级支行'
            break;
          case 4:
            this.roleLevel='二级支行'
            break;
          default: 
            false
        }
     }
      this.visible = true;
    },
    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) {
          const role = getUserMsg()?.newRole
          window.localStorage.clear()
          RouterUtil.getInstance().gotoLogin(role)
        }
      })
    }
  },
});
</script>

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