<template>
    <el-container>
        <el-aside style="width:250px;background-color: rgb(38, 56, 76);" 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"
    import loginuserInfo from "@/api/base";
    import {mapActions, mapGetters} from 'vuex'
    import jsutil from "@/common/js/util";

    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: {
            ...mapActions( // 语法糖
                ['setUserInfoStore','setUserMenuStore'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
            ),
            initUserInfo:function() {
                if (jsutil.checkNull(this.getUserInfoStore.username)){
                    this.sysUserName = this.getUserInfoStore.username || '';
                    this.sysUserId=this.getUserInfoStore.userId||'';
                    this.sysUserAvatar = this.getUserInfoStore.userface || '~img/faceDefault.jpg';
                }else {
                    this.setUserInfoStore(loginuserInfo);
                }
            },
            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(() => {
                    this.$axios.defaults.headers.common['Authorization'] = undefined;
                    sessionStorage.removeItem('user');
                    sessionStorage.removeItem('menu');
                    //清空菜单
                    this.setUserMenuStore([]);
                    this.setUserInfoStore({
                        userId: 0,
                        username: '',
                        companyId: 0,
                        companyName: '',
                        realname: '',
                        userface: ''
                    });
                    //退出后初始化原来的路由
                    let sysRoutes =  JSON.parse(sessionStorage.getItem('sysMenu'));
                    _this.$router.options.routes = sysRoutes;

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

                });


            },
            //折叠导航栏
            collapse:function(){
                this.collapsed=!this.collapsed;
            }
        },
        computed: {
            ...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
        },
        mounted() {
            //操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
            var userRouters = sessionStorage.getItem('menu');
            if (userRouters) {
                userRouters = JSON.parse(userRouters);
                _this.$router.options.routes = userRouters;
            }
            this.$nextTick(function(){
                this.initUserInfo();
            })
        },
        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;
    }
    .el-dialog__header {
        padding: 20px 20px 10px;
        padding-top: 10px;
        /*border-left: 5px solid rgb(111, 130, 148);*/
        border-radius: 0px 5px 0 0;
        /*font-weight: 700;*/
        font-size: 12px;
        /*border-bottom: 1px solid rgb(111, 130, 148);*/
        background: #f5f7fd;
        color: #778ca2;
    }
    .el-dialog__title {
        line-height: 24px;
        font-size: 14px;
        color: #778ca2;
    }
    .el-dialog__body {
        padding: 5px 20px;
    }



</style>