<template>
    <el-container style="height: 100%">
        <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="changePass">修改密码</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-dialog title="修改密码" :visible.sync="dialogFormVisible" width="70%">
            <el-form :model="resetForm" status-icon :rules="resetFormRules" ref="resetForm" label-width="100px">
                <el-form-item label="用户名" prop="name">
                    <span>{{sysUserName}}</span>
                </el-form-item>
                <el-row :gutter="1">
                    <el-col :span="11">
                        <el-form-item label=" " prop="newpwd">
                            <el-input type="password" v-model="resetForm.newpwd" autocomplete="off" show-password placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三">
                                <template slot="prepend">新密码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label=" " prop="renewpwd">
                            <el-input type="password" v-model="resetForm.renewpwd" show-password auto-complete="off" placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三">
                                <template slot="prepend">确认密码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" @click="submitEdit('resetForm')" style="float:right">提 交</el-button>
                </el-form-item>

            </el-form>
        </el-dialog>
    </el-container>
</template>

<script>
    import rt from '../routes'
    import { editPass,resetToken,loginedUserInfo,heartBeat} 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 axios from "axios";
    import {mapActions, mapGetters} from 'vuex'
    import jsutil from "@/common/js/util";

    export default {

        provide() {
            return {
                reload: this.reload
            }
        },
        components: {ElFormItem,TabMenu,NavMenu},
        data() {
            var validatePass = (rule, value, callback) => {
                if (!value) {
                    callback(new Error('请输入新密码'));
                }else {
                    var ls=0;
                 if(value.match(/([a-z])+/)){
                        ls++;
                    } if(value.match(/([0-9])+/)){
                        ls++;
                    } if(value.match(/([A-Z])+/)){
                        ls++;
                    } if((/([\W])+/) && !value.match(/(![\u4E00-\u9FA5])+/)){
                        ls++;
                    }  if (value.toString().length < 8 || value.toString().length > 20) {
                        callback(new Error('密码长度为8 - 20个字符'));
                        ls=0;
                    } if(value.match(/([\u4E00-\u9FA5])+/)){
                        callback(new Error('不能包含中文字符'));
                        ls=0;
                    }
                    switch (ls) {
                        case 0: this.passwordPercent = 0;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
                        case 1: this.passwordPercent = 33;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
                        case 2: this.passwordPercent = 66;callback(new Error('数字、小写字母 、大写字母以及特殊字符中四选三'));break;
                        case 3:
                        case 4: this.passwordPercent = 100;break;
                        default: this.passwordPercent = 0;break;
                    }
                    callback();
                }

            };

            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.resetForm.newpwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                rotate:false,
                sysName:'',
                collapsed:false,
                sysUserName: '',
                sysUserId:'',
                // sysUserAvatar: '',
                isRouterAlive: true,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                editForm: {
                    userId: '',
                    password: '',
                },
                dialogFormVisible:false,
                resetForm: {
                    newpwd: '',
                    renewpwd: '',
                },
                resetFormRules: {
                    newpwd: [
                        { required: true, validator: validatePass, trigger: 'blur' }
                    ],
                    renewpwd: [
                        { required: true, validator: validatePass2, trigger: 'blur' }
                    ]
                },
            }
        },
        methods: {
            ...mapActions( // 语法糖
                ['setUserInfoStore','setUserMenuStore'] // 相当于this.$store.dispatch('modifyName'),提交这个方法
            ),
            initUserInfo:function() {
                this.setUserInfoStore(loginedUserInfo());
                this.sysUserName = this.getUserInfoStore.username || '';
                this.sysUserId=this.getUserInfoStore.userId||'';
                this.sysUserAvatar = this.getUserInfoStore.userface || '~img/faceDefault.jpg';
            },
            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;
            },
            checkUpdate() {
                axios.get('/static/nmmsVer.json?ver='+Date.now()).then(function(response) {
                    // 判断版本号是否与本地一致
                    if (response && response.data.nmmsVer != localStorage.getItem('nmmsVer')) {
                        localStorage.setItem('nmmsVer', response.data.nmmsVer)
                        location.reload()
                    } else {
                    }
                }).catch(function(error) {
                })
            },
            submitEdit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.editForm.userId=this.sysUserId;
                        this.editForm.password=this.resetForm.renewpwd;
                        editPass(this.editForm).then(res=>{
                            let response=res.data;
                            if(response.code=='200'){
                                this.$notify({
                                    title: '密码修改成功',
                                    message: '密码修改成功，退出请重新登录',
                                    type: 'success'
                                });
                                this.dialogFormVisible=false;
                            }else{
                                this.$notify.error({
                                    title: '密码修改失败',
                                    message: '密码修改失败！！！'
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            changePass:function(){
                this.dialogFormVisible=true;
            },
            updateCache:function(){
                resetToken().then( res =>{
                    let response  = res.data;
                    if (response.code === '200'){
                        this.$notify({
                            title: '成功',
                            message: '缓存更新成功',
                            type: 'success'
                        });
                    }else{
                        this.$notify.error({
                            title: '失败',
                            message: '缓存更新失败'
                        });
                    }
                })
            },
            heartBeatAPI:function () {
                heartBeat().then(response => {

                }).catch(e=>{
                    this.$notify.error({
                        title: '心跳',
                        message: '心跳失败'
                    });
                });
            }
        },

        computed: {
            ...mapGetters(['getUserInfoStore','getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
        },

        mounted() {

            this.checkUpdate();
            var _this = this;
            //操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
            var userRouters = sessionStorage.getItem('menu');
            if (userRouters) {
                userRouters = JSON.parse(userRouters);
                _this.$router.options.routes = userRouters;
            }

            // 定时获取版本号
            setInterval(() => {
                this.checkUpdate();
            }, 30000);
            setInterval(() => {
                if (this.sysUserName){
                    this.heartBeatAPI();
                }
            }, 90000);
            this.$nextTick(function(){
                this.initUserInfo();
                // this.rowDrop();   //行拖拽效果

            })
        },
        watch: {
            collapsed(value) {
                let menuDom = document.getElementById("l-menu");
                //折叠
                if (value){
                    this.$nextTick(function () {
                        menuDom.setAttribute("style","width:90px;background-color: rgb(38, 56, 76);");
                    })
                }else {
                    //不折叠
                    this.$nextTick(function () {
                        menuDom.setAttribute("style","width:250px;background-color: rgb(38, 56, 76);");
                    })

                }
            }
        }
    }

</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>