<template>
    <div>
        <el-row id="me">
<!--            <el-col :span="3" style="margin-left: 40px;margin-top: 10px">-->
<!--                <div class="tools" @click.prevent="collapse" style="width: 380px;font-size: 24px">-->
<!--                    <i class="el-icon-s-operation" style="color: rgb(43,47,58)"></i>-->
<!--                </div>-->
<!--                &lt;!&ndash;                标签i的图标 fa-align-justify&ndash;&gt;-->
<!--            </el-col>-->
            <el-col :span="18" id="menu" >
                <ul>
                    <li><a href="" class="drop">政府监管服务</a>
                        <div class="dropdown_1column">
                            <ul class="simple">
                                <li><a href="http://8.131.245.248:9004/">货物监管辅助管理</a></li>
                                <li><a href="http://8.131.245.248:9005/">卡口辅助管理</a></li>
                                <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">安检信息服务</a></li>
                                <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">特种货物监管</a></li>
                                <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">企业信用管理</a></li>
                            </ul>
                        </div></li>
                    <li><a href="" class="drop">综合查询服务</a>
                        <div class="dropdown_1column">
                            <ul class="simple">
                                <li><a href="http://8.131.245.248:8083/zz-sso">企业实时查询服务</a></li>
                                <li><a href="http://8.131.245.248:8083/zz-sso">企业综合查询服务</a></li>
                                <li style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场实时查询</a></li>
                                <li style="width: 160px"><a href="http://8.131.245.248:8083/zz-sso">监管部门与机场综合查询</a></li>
                            </ul>
                        </div></li>

                    <li> <a href="" class="drop">企业公共服务</a>
                        <div class="dropdown_1column">
                            <ul class="simple">
                                <li><a href="http://8.131.245.248:8083/tb-agent/">舱单申报服务</a> </li>
                                <li><a href="http://8.131.245.248:9001/">奖励申请服务</a> </li>
                                <li><a href="http://8.131.245.248:8083/zz-bs">卡口服务</a> </li>
                                <li><a href="http://39.104.160.128:8250/cgoalp/index/html/index#/sc/html/list">安检申报服务</a></li>
                                <li><a href="http://8.131.245.248:8002/home">报关服务</a></li>
                                <li><a href="http://8.131.245.248:8083/zz-aircraft/dashboard/index">运输工具申报</a></li>
                                <li><a href="http://8.131.245.248:8083/portal/enterpriseService">更多</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="" class="drop">增值服务</a>
                        <div class="dropdown_1column">
                            <ul class="simple">
                                <li><a href="http://8.131.245.248:8083/portal/bookingIndex">在线订舱服务</a></li>
                                <li><a href="http://8.131.245.248:9003/index/bookList">在线约车服务</a> </li>
                                <li><a href="http://8.131.245.248:8083/portal/market">物流服务市场</a> </li>
                                <li><a href="http://8.131.245.248:8083/zz-awb-operate/">航空货运操作管理</a> </li>
                                <li><a href="http://8.131.245.248:8002/home">智能通关服务</a></li>
                                <li><a href="http://8.131.245.248:8083/zz-uld/">智慧组板服务</a></li>
                                <li><a href="http://8.131.245.248:8083/zz-lf/dashboard/index">物流金融服务</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <el-dropdown trigger="hover" style="margin-top: -20px;margin-left: 100px">
                            <span class="el-dropdown-link userinfo-inner">{{sysUserName}}<img style="border-radius:50%;" src="~img/faceDefault.jpg"/></span>
<!--                            ../../assets/img/faceDefault.jpg-->
                            <el-dropdown-menu slot="dropdown">
                                <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>
                    </li>
                </ul>
            </el-col>
            <el-col>
                <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
                    <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-form-item label="新密码" prop="newpwd">
                            <el-input type="password" v-model="resetForm.newpwd" autocomplete="off" placeholder="8-20位字符在数字、小写、大写字母以及特殊字符中四选三"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="renewpwd">
                            <el-input type="password" v-model="resetForm.renewpwd" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitEdit('resetForm')" style="float:right">提 交</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-col>
        </el-row>

    </div>
</template>

<script>

    import {editPass,resetToken} from "../../api/user";
 export  default {
     data(){
         return{
             dialogFormVisible:false,
             sysUserName: '',
             sysUserAvatar: '',
             resetForm: {
                 newpwd: '',
                 renewpwd: '',
             },
             resetFormRules: {
                 newpwd: [
                     { required: true, validator: validatePass, trigger: 'blur' }
                 ],
                 renewpwd: [
                     { required: true, validator: validatePass2, trigger: 'blur' }
                 ]
             },
         };
         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();
             }
         };

     },
     methods:{
         // 折叠导航栏
         collapse:function(){
             this.collapsed=!this.collapsed;
         },
         showMenu(i,status){
             this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
         },
         // 用户信息
         editPass: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: '缓存更新失败'
                     });
                 }
             })
         },
         //退出登录
         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(() => {

             });


         },
         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;
                 }
             });
         },
     },
 }
</script>

<style scoped>
    /*去除序列点*/
    li{
        list-style-type: none;
    }
    a{font-size: 12px;}

    /*菜单栏底层div*/
    #menu,#menu2 {
        height: 48px;
        border-bottom: 2px solid #6f8294;
        position:relative;
        z-index: 999;
        margin-top: -10px;

        float: right;
        width: 730px;

    }
    /*一级菜单栏样式*/
    #menu li{
        /*float: right;*/
        width: 117px;
        /*height: 50px;*/
        text-align: center;
        /*position:relative;*/
        border:none;

        float: left;

    }
    /*一级菜单栏字体*/
    #menu li a {
        font-size:12px;
        display:block;
        /*outline:0;*/
        /*删除下划线*/
        text-decoration:none;
    }
    /*鼠标放一级菜单时显示二级菜单样式(横向效果)*/
    #menu li:hover .dropdown_1column {
        left: -150px;
        right: auto;
        top:30px;
        font-size:13px;
        color:#ffffff;
        width: 1000px;
    }
    /*二级菜单栏样式*/
    .dropdown_1column{
        position: absolute;
        left: -999em;
        background: rgb(14,119,238);
        display: table;
        text-align: center;
    }
    /*鼠标移至二级菜单栏颜色改变*/
    #menu li:hover div li:hover{background-color: rgb(18,170,255)}
    /*二级菜单栏样式*/
    #menu li ul li {
        font-size:12px;
        line-height:45px;
    }
    .userinfo-inner {
        cursor: pointer;
        color:rgb(180,150,121);
    }
    .userinfo-inner img {
        width: 40px;
        height: 40px;
        margin: 10px 0px 10px 10px;
        float: right;
    }
    .tools{
        /*padding: 0px 23px;*/
        /*width:14px;*/
        /*height: 60px;*/
        /*line-height: 60px;*/
        cursor: pointer;

        /*padding-left: 180px;*/
        /*padding-top: 60px;*/
        /*color: rgb(111,130,148);*/

    }
</style>