<template>
    <div style="background-color: #EBEBEB;min-height:800px">
        <div style="width:100%;background-color: #636363; overflow: hidden">
            <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    欢迎您，{{showUserName}}
                      <i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="orderCenter">订单管理</el-dropdown-item>
                      <el-dropdown-item @click.native="jumpAccount">修改密码</el-dropdown-item>
                    <el-dropdown-item @click.native="jumpLogin">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>
        <div style="margin-top:5px;background-color: #24E9FF">
            <el-row :gutter="5">
                <el-col :xs="4" :sm="4" :md="4" :lg="4">
                  <div>

                        <el-menu default-active="1"
                                 class="el-menu-vertical-demo"
                                 style="min-height:1248px"
                                 background-color="#545c64"
                                 text-color="#fff"
                                 :router="true"
                                 active-text-color="#ffd04b">

                            <!--一级菜单-->
                            <el-submenu
                                    v-for="(outerValue,index) in navigationBar[0]"
                                    :key="index"
                                    :index="outerValue.address">
                                <template slot="title" >
                                    <i :class="outerValue.icon"></i>
                                    <span>{{outerValue.label}}</span>
                                </template>


<!--                                二级菜单-->
                                <el-menu-item
                                        v-for="(innerValue,index1) in outerValue.children"
                                        :key="'1'+index1"
                                        :index="innerValue.address">
                                    <span>{{innerValue.label}}</span>
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item
                                    v-for="(item,index2) in navigationBar[1]"
                                    :key="'2'+index2"
                                    :index="item.address">
                                <i :class="item.icon"></i>
                                <span>{{item.label}}</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
                <el-col :xs="20" :sm="20" :md="20" :lg="20">
                    <div style="margin-top:10px">
                        <router-view></router-view>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    const axios=require('axios');
    import Cookies from 'js-cookie';
    export default {
        data(){
            return {
                navAggregationStr:[],
                navigationBar:[],
                us:'',
                UserRoleName:'',
            }
        },
        computed:{
            showUserName(){
                return Cookies.get('username');
            }
        },
        created(){
            const primaryArr=[];
            axios.get('https://mz.tshe.cn/restauantCH/user/userRolePopulateFind',
                {
                    headers:{
                        // 'token':"Bearer " + Cookies.get('token')
                        'token':Cookies.get('token')
                    }
                })
                .then(res=>{
                    res.data.forEach((item)=>{
                        if(item.us==Cookies.get('username')){
                            Cookies.set('RoleName',item.role.role_name,1)
                            Cookies.set('RoleObjectId',item.role._id,1)
                        }
                    })
                })
                .then(()=>{
                    axios.get('https://mz.tshe.cn/restauantCH/role/RoleMenuAggregation')
                        .then((res)=>{
                            res.data.data.forEach(item=>{
                                if(Cookies.get('RoleName')==item.role_name){
                                    item.permission.forEach(item=>{
                                        primaryArr.push(item);
                                    })
                                }
                            })
                            this.navigationBar=this.putTree(primaryArr);
                            let data=[
                                [],
                                [],
                            ]
                            this.navigationBar.forEach((item)=>{
                                if(item.children&&item.children.length>0)
                                {
                                    data[0].push(item);
                                }
                                else
                                {
                                    data[1].push(item);
                                }
                                this.navigationBar=data;
                            });
                        })
                })
                .catch(error=>{//token过期的处理
                    if(error.response.data.code==-1){
                        this.$message.info(error.response.data.massage);
                            this.$router.replace('/');
                    }
                })
        },

        methods:{
            orderCenter(){
                this.$router.push('/shoppingCart/orderCenter');
            },

            jumpAccount(){
                this.$router.push('/page2');
            },
            jumpLogin(){
                Cookies.remove('aotuLoginCookie',0)//退出登录，只是改变了自动登录的status
                this.$router.push('/');
            },
            putTree(arr,child='_id',father='fid',mostKey='0',childKey='children'){

                let map = {};
                // map是映射的意思，将一个数组映射成一个新数组。
                // h[key]返回映射h中的自变量key映射到的value的值

                let resultArr = [];
                arr.forEach((item) => {
                    item[childKey] = [];  //让所有的item中，每条数据增加一条children:{type:[]} 字段；children的作用是，放孩子路由
                    map[item[child]] = item;
                });

                arr.forEach((item) => {
                    if (item[father]){ //如果二级路由的Key存在
                        if (item[father] == mostKey) {   //如果 二级路由的Key==0 (说明此条item是一级路由)
                            resultArr.push(item);     //就添加到resultArr数组里;
                        }
                        else {//如果二级路由的Key != 0； 说明此条item是二级路由
                            map[item[father]][childKey].push(item);//为什么可以push，因为item里的children字段，是一个[数组]格式
                        }
                    }
                });
                return resultArr;
            },
            jumpRouterBtn(data){
                this.$router.push(data.address);
            },
            jumpRouterBtnOne(data){
                this.$router.push(data.address);
            },
        },
    }
</script>
