<template>
    <div class="ajm-login-containier login-bg pwd-container" ref="loginBg">
        <div class="login-top">
            <div>
                <a class="logo" href="javascript:void(0);" v-if="systemUrl == null ||systemUrl == ''">
                    <img :src="logoImg" alt="">
                    <h1 v-if="systemName">{{systemName}}</h1>
                    <h1 v-else>{{$t('message.Oauth.basePlatform')}}</h1>
                </a>
                <a class="logo" target="_blank" :href="systemUrl" v-else>
                    <img :src="logoImg" alt="">
                    <h1 v-if="systemName">{{systemName}}</h1>
                    <h1 v-else>{{$t('message.Oauth.basePlatform')}}</h1>
                </a>
            </div>
        </div>

        <div class="content">
            <div class="psword-title">{{$t('message.Oauth.resetPwd')}}</div>
            <p class="ajm-info">
                <i class="el-icon-ajm-info"></i>
                {{$t('message.Oauth.resetPwdInfo')}}{{systemName}}
            </p>
            <div class="text">
                <el-form :model="pwdForm" :rules="pwdRules" ref="editPwd" label-width="88px">
                    <el-form-item :label="$t('message.UserInfo.userName')" prop="userName">
                        <el-input v-model="pwdForm.userName" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.UserInfo.oldPwd')" prop="oldPwd">
                        <el-input type="password" v-model="pwdForm.oldPwd" :placeholder="$t('message.UserInfo.confirmOldPwd')" :maxlength="32"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.UserInfo.newPwd')" prop="newPwd">
                        <el-input type="password" v-model="pwdForm.newPwd" :placeholder="$t('message.UserInfo.confirmNewPwd')" :maxlength="32" auto-complete="off"></el-input>
                        <el-tooltip popper-class="tool-top" :content="$t('message.UserInfo.confirmPwdRule')" placement="top-start">
                            <i class="el-icon-ajm-info"></i>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item :label="$t('message.UserInfo.ensurePwd')" prop="confirmPwd">
                        <el-input type="password" v-model="pwdForm.confirmPwd" :placeholder="$t('message.UserInfo.confirmPwd')" :maxlength="32" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="saveOrUpdatePsword">确认重置</el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import logoImg from "@/assets/image/logo.png";
    export default {
        data() {
            return {
                systemUrl: '',
                systemName: '',
                // 登录logo
                logoImg: logoImg,
                // 系统信息
                systemInfo: null,
                //密码信息
                // 修改密码表单
                pwdForm: {
                    userName: this.$store.getters.userInfo.userName,
                    newPwd: "",
                    confirmPwd: "",
                    oldPwd: ""
                },
                // 密码规则
                /*pwdRules: {
                    // 新密码
                    newPwd: [
                        { required: true, validator: newPwdFunc, trigger: "blur" }
                    ],
                    // 确认密码
                    confirmPwd: [
                        {
                            required: true,
                            validator: confirmPwdFunc,
                            trigger: "blur"
                        }
                    ],
                    // 原密码
                    oldPwd: [
                        { required: true, validator: oldPwdFunc, trigger: "blur" }
                    ]
                },*/
            }
        },
        computed:{
            pwdRules(){
                var oldPwdFunc = (rule, value, callback) => {
                    if (!value) {
                        return callback(new Error(this.$t('message.UserInfo.confirmOldPwd')));
                    } else {
                        callback();
                    }
                };
                var newPwdFunc = (rule, value, callback) => {
                    var reg = /^[a-zA-Z0-9]{8,32}$/;
                    if (value === "") {
                        callback(new Error(this.$t('message.UserInfo.confirmNewPwd')));
                    } else if (!reg.test(value)) {
                        callback(new Error(this.$t('message.UserInfo.confirmPwdRule')));
                    }  else if (value === this.pwdForm.oldPwd) {
                        callback(new Error(this.$t('message.UserInfo.inconformity')));
                    } else {
                        if (this.pwdForm.confirmPwd !== "") {
                            this.$refs.editPwd.validateField("confirmPwd");
                        }
                        callback();
                    }
                };
                var confirmPwdFunc = (rule, value, callback) => {
                    if (value === "") {
                        callback(new Error(this.$t('message.UserInfo.confirmPswAgain')));
                    } else if (value !== this.pwdForm.newPwd) {
                        callback(new Error(this.$t('message.UserInfo.checkConfirmPassword')));
                    } else {
                        callback();
                    }
                };
                return{
                    // 新密码
                    newPwd: [
                        { required: true, validator: newPwdFunc, trigger: "blur" }
                    ],
                    // 确认密码
                    confirmPwd: [
                        {
                            required: true,
                            validator: confirmPwdFunc,
                            trigger: "blur"
                        }
                    ],
                    // 原密码
                    oldPwd: [
                        { required: true, validator: oldPwdFunc, trigger: "blur" }
                    ]
                }
            }
        },
        methods: {
            getSystemUrl() {
                let _this = this;

                setTimeout(() => {
                    _this.systemInfo = _this.$store.getters.platformInfo.configureVO;

                    if (_this.systemInfo) {
                        _this.systemUrl = _this.systemInfo.systemUrl;
                    } else {
                        return "http://172.10.3.108:8080/ibox/";
                    }
                }, 500);
            },
            getSystemName() {
                let _this = this;
                setTimeout(() => {
                    _this.systemInfo = _this.$store.getters.platformInfo.configureVO;

                    if (_this.systemInfo) {
                        let systemIcon = _this.systemInfo.systemIcon;

                        if (systemIcon) {
                            _this.logoImg = _this.getImgUrl(systemIcon);
                        }

                        _this.systemName = _this.systemInfo.systemName;
                        // return _this.systemInfo.systemName || "";
                    } else {
                        return "";
                    }
                }, 200);
            },
            getImgUrl(filekey) {
                return AjmConfig.getApiUrl() + AjmConfig.get("BASE_CONTEXT_PATH") + '/common/file/viewFile/' + filekey;
            },
            //保存或修改密码
            saveOrUpdatePsword(){
                this.$refs["editPwd"].validate(valid => {
                    if (valid) {
                        let pwdForm = {
                            oldPassword: this.$md5(this.pwdForm.oldPwd),
                            newPassword: this.$md5(this.pwdForm.newPwd),
                            confirmPassword: this.$md5(this.pwdForm.confirmPwd)
                        };
                        this.$userApi.editUserPsw(pwdForm).then(resp => {
                            if (resp.status == 500) {
                                this.$message.error(resp.message);
                                this.showDialogEditPwd = true;
                            }else{
                                localStorage.removeItem("isPwd");
                                this.goHome();   
                            }
                        }).catch(err => {
                            
                        });
                    }
                });
            },
            //进入首页
            goHome() {
                this.$router.push({
                    path: this.$context.homePath
                });
            },
        },
        //初始化
        mounted() {
            this.getSystemUrl();
            this.getSystemName();
            localStorage.setItem("isPwd","true");
        },
        destroyed() {
            //localStorage.setItem("isPwd","false");
        },
    }
</script>

<style lang="less" scoped>
    @keyframes shadow {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1
        }
    }

    .login-bg {
        position: fixed;
        .login-top {
            width: 100%;
            height: 50px;
            box-shadow: 0 1px #080b10;
            background: -webkit-linear-gradient(#273342, #293647); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#273342, #293647); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#273342, #293647); /* Firefox 3.6 - 15 */
            background: linear-gradient(#273342, #293647); /* 标准的语法 */
            h1 {
                display: inline-block;
                font-size: 18px;
                color: #fff;
                vertical-align: middle;
            }
            img {
                width: 48px;
                height: 48px;
                vertical-align: middle;
                margin-top: 4px;
                margin-left: 20px;
            }
        }
    }
    .pwd-container {
        background: #edeff0;
        width: 100%;
        height: 100%;

        .content {
            background: #ffffff;
            width: 60%;
            height: 66%;
            min-height:500px;
            left: 20%;
            border: 1px solid #ccc;
            font-size: 16px;
            text-align: center;
            position: absolute;
            top: 136px;
            /*left: 50%;*/

            .psword-title{
                border-bottom: 1px solid #ccc;
                height: 60px;
                text-align: left;
                line-height: 60px;
                font-size: 16px;
                font-weight: 600;
                padding-left: 30px;
                color: #45494c;
            }
            .ajm-info{
                height: 40px;
                line-height: 40px;
                font-size: 12px;
                border: 1px solid #f4ecce;
                margin: 10px 30px;
                text-align: left;
                padding-left: 12px;
                background: #fff9e3;
                color: #ff8223;
            }
            .text{
                /*display: inline-block;
                margin-top: 30px;
                vertical-align: top;*/
                width: 420px;
                margin: 30px auto;
                text-align: center;
                .el-button{
                    margin-left: 88px;
                    float: left;
                    margin-top: 10px;
                }
                .el-input{
                    width:90%;
                    float: left;
                }
            }
        }
    }
</style>

