<template>
    <el-container>
        <el-aside style="width:250px;background-color: rgb(238, 241, 246)" id="l-menu">
            <NavMenu :collapsed="collapsed"></NavMenu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <div class="tools" @click.prevent="collapse"  style="width: 15px;z-index:9999;position:absolute;">
                    <!--                    ;margin-top: 80px;z-index:9999;margin-left: 170px-->
                            <i  style="color:#a6b6c6;vertical-align: middle;line-height: 60px;" :class="[collapsed?'el-icon-s-unfold':'el-icon-s-fold']"></i>
                </div>
                <i class="el-icon-question" style="vertical-align: middle;"></i>
                <i class="el-icon-message-solid" style="vertical-align: middle;"></i>
                <el-dropdown trigger="hover" style="margin-top:10px">
                    <span class="el-dropdown-link userinfo-inner">
                        <img width="40" height="40" style="border-radius:50%;" src="~img/faceDefault.jpg"/></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>{{sysUserName}}</el-dropdown-item>
                        <el-dropdown-item>我的消息</el-dropdown-item>
                        <el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
                        <el-dropdown-item @click.native="updateCache">更新缓存</el-dropdown-item>
                        <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>

            <el-main>
                <TabMenu></TabMenu>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import rt from '../routes'
    import { editPass,resetToken} from '../api/user';
    import ElFormItem from "element-ui/packages/form/src/form-item";
    import TabMenu from "@/components/TabMenu"
    import NavMenu from "@/components/NavMenu"

    export default {

        provide() {
            return {
                reload: this.reload
            }
        },
        components: {ElFormItem,TabMenu,NavMenu},
        data() {
            return {
                rotate:false,
                sysName:'',
                collapsed:false,
                sysUserName: '',
                sysUserId:'',
                // sysUserAvatar: '',
                isRouterAlive: true,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                editForm: {
                    userId: '',
                    password: '',
                },
            }
        },
        methods: {
            reload() {
                this.$nextTick(function () {
                   this.$router.push({
                       path: this.$router.path,
                       query:{
                           t: new Date().getTime()
                       }
                   })
                })
            },
            onSubmit() {
                console.log('submit!');
            },
            handleopen() {
                console.log('handleopen');
            },
            handleclose() {
                console.log('handleclose');
            },
            handleselect: function (a, b) {
                this.reload()
            },
            // 退出登录
            logout: function () {
                var _this = this;
                this.$confirm('确认退出吗?', '提示', {
                    //type: 'warning'
                }).then(() => {
                    sessionStorage.removeItem('user');
                    sessionStorage.removeItem('menu');
                    //退出后初始化原来的路由
                    let sysRoutes =  JSON.parse(sessionStorage.getItem('sysMenu'));
                    console.log(sysRoutes);
                    _this.$router.options.routes = sysRoutes;

                    _this.$router.push('/login');
                }).catch(() => {

                });


            },
            //折叠导航栏
            collapse:function(){
                this.collapsed=!this.collapsed;
            }
        },
        mounted() {
            var _this = this;
            var user = sessionStorage.getItem('user');
            if (user) {
                user = JSON.parse(user);
                this.sysUserName = user.username || '';
                this.sysUserId=user.userId||'';

                this.sysUserAvatar = user.userface || '~img/faceDefault.jpg';
            }
            //操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
            var userRouters = sessionStorage.getItem('menu');
            if (userRouters) {
                userRouters = JSON.parse(userRouters);
                _this.$router.options.routes = userRouters;
                console.log("home:");
                console.log(_this.$router.options.routes);
            }
        },
        watch: {
            collapsed(value) {
                let menuDom = document.getElementById("l-menu");
                //折叠
                if (value){
                    this.$nextTick(function () {
                        menuDom.setAttribute("style","width:90px");
                    })
                }else {
                    //不折叠
                    this.$nextTick(function () {
                        menuDom.setAttribute("style","width:250px");
                    })

                }
            }
        }
    }

</script>
<style>
</style>
<style scoped lang="scss">
    @import '~scss_vars';

</style>
<style lang="scss">
    header{
        line-height: 60px;
        box-shadow: 0px 10px 10px #eaeff3;
        z-index: 2;
        i{
            font-size: 24px;
            margin-right: 20px;
            text-align: center;
            vertical-align: middle;
            height: 60px;
            margin-top: 0px;
            color: rgb(166, 182, 198);
            width: 30px;
        }
    }
    main.el-main{
        background-color:#f5f7fd;
        padding:0 10px 10px 10px;
    }

</style>