<template>
    <div class="layout">
        <Layout :style="{minHeight: '100vh'}">
            <Sider collapsible :collapsed-width="78" v-model="isCollapsed">

                <div style="margin-top: 40px;margin-bottom: 20px;font-weight: bold;font-size: 30px;color: #ffffff;">
                    <Avatar size="36"></Avatar>
                    <span>拓客营销</span>
                </div>

                <Menu :active-name="selectedItemName" theme="dark" width="auto" :class="menuitemClasses"
                      @on-select="onSelectLister" @on-open-change="onOpenChangeLister" :accordion="true">
                    <Submenu :name="item.id" v-for="item in onePermissionList" :key="item.id">
                        <template slot="title">
                            <Icon type="ios-paper"/>
                            {{item.name}}
                        </template>
                        <MenuItem :name="cItem.id" :to="cItem.url" v-for="cItem in item.subMenuList" :key="cItem.id">
                            {{cItem.name}}
                        </MenuItem>
                    </Submenu>
                </Menu>
            </Sider>
            <Layout>
                <!--        <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>-->
                <Content :style="{padding: '0 16px 16px'}">
                    <Breadcrumb :style="{margin: '16px 0'}">
                        <BreadcrumbItem>{{selectedMenu}}</BreadcrumbItem>
                        <BreadcrumbItem>{{selectedSubMenu}}</BreadcrumbItem>
                    </Breadcrumb>
                    <Card>
                        <div :style="{'height':mHeight + 'px'}">
                            <router-view/>
                        </div>
                    </Card>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    import homeRequest from "../services/home/homeRequest";

    export default {
        provide() {
            return {
                checkParamBlank: this.checkParamBlank,
            };
        },
        data() {
            return {
                isCollapsed: false,
                mHeight: 600,
                selectedItemName: '',
                selectedMenu: '',
                selectedSubMenu: '',
                menuList: [
                    {
                        id: 1,
                        'name': '设置管理',
                        'url': 'setting',
                        subMenuList: [
                            {
                                'id': 2,
                                'name': '账户管理',
                                'url': '/account/manager'
                            },
                            {
                                'id': 3,
                                'name': '角色管理',
                                'url': '/role/manager'
                            }
                        ]
                    },
                    {
                        id: 4,
                        'name': '门店推广',
                        'url': 'shop',
                        subMenuList: [
                            {
                                'id': 5,
                                'name': '推广管理',
                                'url': '/shop/increase/manager'
                            },
                            {
                                'id': 6,
                                'name': '推广数据',
                                'url': '/shop/increase/data'
                            }
                        ]
                    },
                    {
                        id: 7,
                        'name': '数据中心',
                        'url': 'data',
                        subMenuList: [
                            {
                                'id': 8,
                                'name': '客户数据',
                                'url': '/customer/view'
                            },
                            {
                                'id': 9,
                                'name': '客户数据明细',
                                'url': '/customer/data/detail'
                            }
                        ]
                    }
                ],
                //权限等级
                onePermissionLevel: 1,
                twoPermissionLevel: 2,
                threePermissionLevel: 3,
                //导航栏权限-1级权限
                onePermissionList: [],
                //2级权限
                twoPermissionList: [],
                //3级权限
                threePermissionList: [],
            }
        },
        created() {
            this.mHeight = window.screen.availHeight - 22;

            this.selectedItemName = this.menuList[0].subMenuList[0].id;
            //获取导航栏权限
            this.listOnePermission(this.onePermissionLevel);
            this.listTwoPermission(this.twoPermissionLevel);
            this.listThreePermission(this.threePermissionLevel);
        },
        computed: {
            rotateIcon() {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            menuitemClasses() {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            onSelectLister(val) {
                for (let i = 0; i < this.menuList.length; i++) {
                    let item = this.menuList[i];
                    for (let k = 0; k < item.subMenuList.length; k++) {
                        let cItem = item.subMenuList[k];
                        if (cItem.id === val) {
                            this.selectedMenu = item.name;
                            this.selectedSubMenu = cItem.name;
                        }
                    }
                }
            },
            //对象属性空检查
            checkParamBlank: function (obj) {
                for (let param in obj) {
                    obj[param] = this.checkBlank(obj[param]);
                }
            },
            //数据空检查
            checkBlank: function (data) {
                if (!data) {
                    return "--";
                } else {
                    return data;
                }
            },
            //获取导航栏一级权限
            listOnePermission(level) {
                let that = this;
                let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
                let request = {
                    userId: userId,
                    level: level
                };
                homeRequest.listUserLoginPermissionApi(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询用户权限出错");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            row.class = 'head-permission';
                            that.onePermissionList.push(row);
                        }
                        if (data && data.length > 0) {
                            //默认选中第一个权限
                            that.menuClick(0);
                        }
                    }

                })
            },
            //获取二级权限
            listTwoPermission(level) {
                let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
                let that = this;
                that.twoPermissionList = [];
                let request = {
                    userId: userId,
                    level: level
                };
                homeRequest.listUserLoginPermissionApi(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询用户权限出错");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        that.twoPermissionList = [];
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            that.twoPermissionList.push(row);
                        }
                        //展开第一个菜单
                        if (data && data.length > 0) {
                            that.subMenuUnfold(data[0].id);
                        }
                    }

                })
            },
            //获取三级权限
            listThreePermission(level) {
                let userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
                let that = this;
                that.threePermissionList = [];
                let request = {
                    userId: userId,
                    level: level
                };
                homeRequest.listUserLoginPermissionApi(request, function (data) {
                    data = data.data;
                    if (data.code === '0001') {
                        that.$Message.error("查询用户权限出错");
                        return;
                    }
                    if (data.code === '0000') {
                        data = data.results;
                        that.threePermissionList = [];
                        for (let i = 0; i < data.length; i++) {
                            let row = data[i];
                            that.threePermissionList.push(row);
                        }

                        //选中第一个权限
                        if (data && data.length > 0 && that.refreshFlag) {
                            let resource = '';
                            if (that.threePermissionList[0].resource) {
                                resource = that.threePermissionList[0].resource;
                            }
                            that.subMenuClick(0);
                            that.$router.push({path: resource});
                            //刷新标识
                            that.refreshFlag = false;
                        }

                        that.twoPermissionList.forEach(function (two) {
                            let ary = two.subMenuList === null ? [] : two.subMenuList;
                            //把三级导航绑定给第二级导航栏
                            let three = that.threePermissionList.filter(function (data) {
                                return data.parentId = two.id
                            });
                            ary.push(three);
                            two.push("subMenuList",ary);
                        });
                        that.onePermissionList.forEach(function (one) {
                            let ary = one.subMenuList === null ? [] : one.subMenuList;
                            //把二级导航绑定给第一级导航栏
                            let two = that.twoPermissionList.filter(function (data) {
                                return data.parentId = one.id
                            });
                            ary.push(two);
                            one.push("subMenuList",ary);
                        })
                    }


                })
            },
            //导航栏点击
            menuClick: function (index) {

            },
            //左侧二级权限展开-传入二级权限id
            subMenuUnfold: function(twoPermissionId) {
            },
        }
    }
</script>
<style scoped>

    .layout-con {
        height: 100%;
        width: 100%;
    }

    .menu-item span {
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }

    .menu-item i {
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }

    .collapsed-menu span {
        width: 0px;
        transition: width .2s ease;
    }

    .collapsed-menu i {
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
