<template>
  <a-layout class="layoutbox" id="components-layout-demo-custom-trigger">
    <!-- 左侧菜单 -->
    <a-layout-sider :trigger="null" collapsible v-model="collapsed">
      <div class="logo">{{ collapsed ? "菜单" : "后台管理系统" }}</div>
      <a-menu
        theme="dark"
        mode="inline"
        :defaultSelectedKeys="['1']"
        @click="selectItem"
        :selectedKeys="[$route.path]"
      >
        <a-sub-menu v-for="item in menu" :key="item.key">
          <span slot="title">
            <a-icon :type="item.icon" />
            <span v-show="!collapsed">{{ item.name }}</span>
          </span>
          <a-menu-item
            v-for="childrenitem in item.children"
            :key="childrenitem.key"
          >
            <a-icon :type="childrenitem.icon" />
            <span>{{ childrenitem.name }}</span>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!-- 页面整体头部导航 -->
      <a-layout-header class="headbox" style="padding: 0">
        <!-- 左侧展示与隐藏 -->
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <div class="user-head">
          <!-- 用户信息 -->
          <a-dropdown>
            <span>
            <a-avatar icon="user" />
            <a class="ant-dropdown-link" href="#">
              {{ UserInfo.username }}
              <a-icon type="down" />
            </a></span>
            <a-menu slot="overlay">
              <a-menu-item @click="headClick('home')">
                <i class="iconfont iconicon_huabanfuben"></i>
                <span>首页</span>
              </a-menu-item>
              <a-menu-item @click="headClick('userInfo')">
                <i class="iconfont icongerenzhongxin"></i>
                <span>个人信息</span>
              </a-menu-item>
              <a-menu-item @click="headClick('quit')">
                <i class="iconfont icontuichu2"></i>
                <span>退出登录</span>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <!-- 中间主体部分 -->
      <a-layout-content
        :style="{
          margin: '10px 10px',
          padding: '0px',
          background: '#fff',
          minHeight: '280px'
        }"
      >
        <router-view class="avue-view" />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import { GetMenu } from "../api/admin/token";
import { disposereq } from "@/utils/util";
import router from "@/router";
import Layout from "@/views/index/";
export default {
  data() {
    return {
      collapsed: false,
      menu: [],
      UserInfo: {},
    };
  },
  created() {
    this.getMenu();
    //  获取用户信息
    this.UserInfo = JSON.parse(localStorage.getItem("UserInfo"));
  },
  methods: {
    // 获取菜单
    getMenu() {
      GetMenu()
        .then(res => {
          if (res.resp_code === 200) {
            this.menu = this.formatData(
              res.datas.menuList
            );
            let asyncRouters = this.routerPackag(
              res.datas.menuList
            );
            // console.log(asyncRouters);
            // asyncRouters.push({ path: "*", redirect: "/index" });
            router.addRoutes(asyncRouters);
            
          } else {
            this.$message.info(res.resp_msg);
          }
        })
        .catch(err => {
          disposereq(this, err);
        });
    },
    // 路由数据重新封装
    routerPackag(menuList) {
      let accessedRouters = [];
      if(menuList){
        for(let i = 0;i<menuList.length;i++){
          let router = {};
          router.name = menuList[i].name;
          router.path = menuList[i].url;
          if(menuList[i].type == 'FOLDER'){
            router.component = Layout;    
          }else{
            router.component = this.loadView(menuList[i].url);
          }
          if(menuList[i].children && menuList[i].children.length){
            router.children = this.routerPackag(menuList[i].children);
          }
          accessedRouters.push(router);
        }
      }
      return accessedRouters;
    },
    loadView(view) {
      // 路由懒加载
      return () => import(`@/views/${view}`);
    },
    // 菜单点击事件
    selectItem(item) {
      // console.log(item);
      this.$router.push({
        path: item.key
      });
    },
    // 由于数据格式不符合，需要对数据进行处理
    formatData(data,parentKey = null) {
      var menuList = [];
      if(data){
        for (let i = 0; i < data.length; i++) {
          var menuItem = {};
          menuItem.name = data[i].name;
          menuItem.key = parentKey == null ? data[i].url : parentKey + '/' + data[i].url;
          menuItem.icon = data[i].icon;
          menuItem.children = this.formatData(data[i].children,menuItem.key);
          menuList.push(menuItem);
        }
      }
      
      return menuList;
    },
    headClick(type) {
      if (type == "home") {
        this.$router.push({
          path: "/index"
        });
      } else if (type == "userInfo") {
        this.$router.push({
          path: "/userinfo"
        })
      } else {
        localStorage.removeItem("token");
        this.$router.push({
          path: "/login"
        });
      }
    },
  }
};
</script>
<style>
.layoutbox {
  height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  color: #fff;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  margin: 16px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}
.headbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.iconfont {
  font-size: 14px !important;
  margin-right: 5px;
}
.toggle {
  display: inline-block;
  box-sizing: border-box;
  padding-right: 20px;
}
.user-head {
  display: inline-block;
  box-sizing: border-box;
  padding-right: 20px;
}
</style>
