<style>
.layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.layout-logo {
    width: 100px;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
}

.layout-nav {
    /* width: 200px; */
    margin: 0 auto;
    /* margin-right: 20px; */
    /* text-align: left; */
    display: flex;
}
</style>
<template>
    <div class="layout">
        <Layout>
            <Header style="box-shadow: 0 3px 3px rgba(0,0,0,.1);">
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <Row>
                        <Col :lg="12" span="6">
                        <Poptip trigger="hover" title="个人信息" placement="right-start">
                            <Space size="large">
                                <Avatar style="background: #7265e6">{{ userinfo.name && userinfo.name.substring(0, 1) }}
                                </Avatar>
                            </Space>
                            <template #content>
                                <List size="small" footer="Footer">
                                    <ListItem>用户名：{{ userinfo.name }}</ListItem>
                                    <ListItem>组：{{ userinfo.organization }}</ListItem>
                                    <ListItem>角色：{{ userinfo.role_name }}</ListItem>
                                    <ListItem>邮箱：{{ userinfo.email_address }}</ListItem>
                                    <template #footer>
                                        <Button type="primary"
                                            @click="$router.push({ name: 'userinfo', query: { id: userinfo.id } })" size="small">修改信息</Button>
                                        <Button type="primary"
                                            @click="loginout" style="margin-left: 5px;" size="small">退出登录</Button>
                                    </template>
                                </List>
                            </template>
                        </Poptip>

                        </Col>
                        <Col :lg="0" span="18">
                        <div class="layout-nav">
                            <MenuItem name="1" style="margin-right: auto;">
                            <Icon type="ios-navigate"></Icon>
                            </MenuItem>
                            <MenuItem name="2" style="margin-right: auto;">
                            <Icon type="ios-keypad"></Icon>
                            </MenuItem>
                            <MenuItem name="3" style="margin-right: auto;">
                            <Icon type="ios-analytics"></Icon>
                            </MenuItem>
                            <MenuItem name="4" style="margin-right: auto;">
                            <Icon type="ios-paper"></Icon>
                            </MenuItem>
                        </div>
                        </Col>
                    </Row>
                </Menu>
            </Header>
            <Layout>
                <Sider breakpoint="lg" collapsible :collapsed-width="0" v-model="isCollapsed" hide-trigger
                    :style="{ background: '#fff' }" style="box-shadow: 5px 0px 0px rgba(0,0,0,.1);z-index: 0;">
                    <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                        <Submenu v-for="each in menu" :key="each.id" :name="each.id">
                            <template #title>
                                <Icon :type="each.icon"></Icon>
                                {{ each.name }}
                            </template>
                            <MenuItem v-for="child in each.children" :key="child.id" :name="child.id"
                                :to="{ name: child.router }">
                            {{
                            child.name }}
                            </MenuItem>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{ padding: '0 5px 5px' }">
                    <Content :style="{ padding: '24px', background: '#fff', height: screenHeigh }"
                        style="overflow-y:auto">
                        <router-view :isCollapsed="isCollapsed"></router-view>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isCollapsed: null,
            screenHeigh: null,
            myrouter: [],
            menu: [],
            userinfo: {}
        };
    },
    computed: {
        menuitemClasses: function () {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        },
    },
    methods: {
        getinfo() {
            this.$request('get', 'user/userdetail', null, this, (data) => { this.menu = data.data.menu; this.userinfo = data.data; localStorage.setItem('userinfo', JSON.stringify(data.data)); })
        },
        loginout(){
            this.$request('post','user/logout',null,this,(data)=>{
                localStorage.removeItem('token'),
                this.$router.push('login')
            })
        }
    },
    watch: {
        isCollapsed(value1) {
            this.screenHeigh = (!value1) ? window.innerHeight - 102 + 'px' : window.innerHeight - 72 + 'px'
        },
        menu(value) {
            const a = (value) => {
                for (let each of value) {
                    if (each.router) {
                        const index_ = this.$routers.findIndex(ele => { return ele.name == each.router })
                        if (index_ != -1) { this.$router.addRoute('home', { 'name': each.router, 'path': each.router, component: this.$routers[index_].component }) }
                    }
                    if (each.children) {
                        a(each.children)
                    }
                }
            }
            a(value)
        }
    },
    mounted() {
        this.isCollapsed = window.innerWidth > 992 ? false : true
        this.getinfo()
    }
}
</script>
