<template>
    <div class="changeBox">
        <div class="changeArea">
            <div>
                <div class="changeTitle">
                    <div>您的密码过于简单</div>
                    <div>请重新修改</div>
                </div>
                <div class="changeContent">
                    <div class="dialog-content-item-content">
                        <span>
                            账号
                        </span>
                        <input v-model="account" type="text" placeholder="请输入新账户" class="input" />
                    </div>
                    <div class="dialog-content-item-content">
                        <span>
                            <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                            新密码
                        </span>
                        <input v-model="password" type="password" placeholder="请输入新密码" class="input" />
                    </div>
                    <div class="dialog-content-item-content">
                        <span>
                            <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                            新密码确认
                        </span>
                        <input v-model="password1" type="password" placeholder="请输入新密码" class="input" />
                    </div>
                    <div class="user_p">
                        <p>
                            要确保您的帐户安全无虑，请设置安全系数高的密码，例如:密码应由字母或符号、数字组成.
                        </p>
                    </div>
                    <button class="button" @click="confirmPswd">确认提交</button>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    name: 'changePswd',
    data() {
        return {
            userid: this.$route.query.userid,
            account: '',
            password: '',
            password1: ''
        }
    },
    methods: {
        getUser() {
            let params = {
                userid: this.userid
            };
            this.ajax
                .get(this.$store.state.api + "selectUser", params)
                .then(res => {
                    this.account = res.data[0][0].accountNumber

                })
                .catch(err => {
                    console.error(err);
                });
        },
        confirmPswd() {
            // 检查 password 和 password1 是否为空
            if (!this.password) {
                this.$message.error("请输入新密码");
                return;
            }
            if (!this.password1) {
                this.$message.error("请确认新密码");
                return;
            }

            const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;
            if (!reg.test(this.password)) {
                this.$message.error("密码长度为8-16位，且包含大小写字母");
                return;
            } else if (this.password != this.password1) {
                this.$message.error("两次新密码不相同");
                return;
            }

            let params = [
                {
                    uid: this.userid,
                    pa: this.password
                }
            ];
            this.ajax
                .post(this.$store.state.api + "iniPassword", params)
                .then((res) => {
                    if (res.data.success == 1) {
                        this.$message.success("修改成功")
                        this.password = '';
                        this.password1 = '';
                        setTimeout(() => {
                            window.topU.U.UF.F.closeWindow(window.topU.U.UF.UI.form.allForm['updatePaDialog']);
                        }, 1000);
                    }
                    else {
                        this.$message.error("修改失败");
                    }

                })
                .catch((err) => {
                    this.$message.error("修改失败");
                    console.error(err);
                });
        }
    },
    mounted() {
        this.getUser()
    },
}
</script>
<style scoped>
.changeBox {
    background-color: #fff;
    height: 100vh;
}

.changeArea {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.changeTitle div {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 7px;
}

.dialog-content-item-content {
    font-size: 15px;
    font-weight: 550;
    margin-top: 20px;
}

/* input输入框样式 */
.input {
    width: 100%;
    padding: 8px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f2f5;
    height: 36px;
    outline: none;
}

.input>>>.el-input--suffix .el-input__inner {
    padding: 0
}

/* 用户协议框架 */
.user_p {
    height: 50px;
    margin-top: 20px;
}

.user_p p {
    color: #535353;
    font-size: 15px
}

/* 提交按钮样式 */
.button {
    width: 100%;
    height: 50px;
    background-color: #3681fc;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    margin-top: 40px;
    outline: none;
}

.search-icon2 {
    width: 10px;
    height: 10px;
}
</style>