<template>
    <div class="dialog">
        <div class="dialog-header">
            <div class="dialog-title">
                <h1>您的密码过于简单</h1>
                <h1 style="margin-top: 10px;">请重新修改</h1>
            </div>
            <div class="dialog-main">
                <div class="dialog-content">
                    <div class="dialog-content-item">
                        <div class="dialog-content-item-content1">
                            <span>
                                账号
                            </span>
                            <input v-model="account" type="text" class="input" readonly />
                        </div>
                        <div class="dialog-content-item-content1">
                            <span>
                                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                                新密码
                            </span>
                            <div class="input-container">
                                <input :type="showPassword ? 'text' : 'password'" v-model="password"
                                    placeholder="请输入新密码" class="input" />
                                <div class="toggle-password-icon">
                                    <img @click="togglePassword" :src="showPassword ? eyeOpen : eyeClose" />
                                </div>
                            </div>
                        </div>
                        <div class="dialog-content-item-content1">
                            <span>
                                <img src="@/assets/startIcon.svg" alt="字符" class="search-icon2" />
                                新密码确认
                            </span>
                            <div class="input-container">
                                <input :type="showPassword1 ? 'text' : 'password'" v-model="password1"
                                    placeholder="请输入新密码" class="input" />
                                <div class="toggle-password-icon">
                                    <img @click="togglePassword1" :src="showPassword1 ? eyeOpen : eyeClose" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user_p">
                    <p>
                        要确保您的帐户安全无虑，请设置安全系数高的密码，例如:密码应由字母或符号、数字组成.
                    </p>
                </div>
                <button class="button" @click="confirmPswd">确认提交</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'changePswd',
    data() {
        return {
            userid: this.$route.query.userid,
            showPassword: false,
            showPassword1: false,
            eyeOpen: require('@/assets/eyeOpen.png'),
            eyeClose: require('@/assets/eyeClose.png'),
            account: '',
            password: '',
            password1: ''
        }
    },
    methods: {
        togglePassword() {
            this.showPassword = !this.showPassword; // 切换密码显示状态
        },
        togglePassword1() {
            this.showPassword1 = !this.showPassword1; // 切换密码显示状态
        },
        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 = '';
                        this.showPassword = false;
                        this.showPassword1 = false;
                        setTimeout(() => {
                            window.topU.U.UF.F.closeWindow(window.topU.U.UF.UI.form.allForm['updatePaDialog'].form)
                        }, 1000);
                    }
                    else {
                        this.$message.error("修改失败");
                    }

                })
                .catch((err) => {
                    this.$message.error("修改失败");
                    console.error(err);
                });
        }
    },
    mounted() {
        this.getUser()
    },
}
</script>
<style scoped>
html,
body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 弹窗整体大小 */
.dialog {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: auto;
}

.dialog-header,
.dialog-title,
.dialog-main {
    padding: 10px 20px;
    box-sizing: border-box;
    width: 100%;
}

.dialog-content-item-content1 {
    font-size: 15px;
    font-weight: 550;
}

.dialog-content-item-content1+.dialog-content-item-content1 {
    margin-top: 20px;
}



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


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

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

.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: 10px;
    outline: none;
}

.search-icon2 {
    width: 10px;
    height: 10px;
}

.input-container {
    position: relative;
    /* 使子元素绝对定位相对于此容器 */
}

.input-container img {
    width: 19px;
}

.toggle-password-icon {
    position: absolute;
    right: 11px;
    top: 62%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    width: 32px;
    background-color: #f0f2f5;
    text-align: center;
}
</style>