<template>
    <div class="main bg-white-grey pl-25px pt-30px pr-35px h-640px rounded-10px relative">
        <div class="flex items-center justify-between">
            <h3 class="nav-title">身份认证</h3>
            <div class="btnDiv">
                <el-button size="large" @click="routerBack" class="w-100px">返回
                </el-button>
            </div>
        </div>
        <div class="form-box">
            <el-form :model="form" label-position="top" ref="formRef" :rules="rules">
                <el-form-item label="用户名" prop="user_name">
                    <el-input type="text" v-model="form.user_name" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="真实姓名" prop="user_realname">
                    <el-input type="text" v-model="form.user_realname" placeholder="请输入真实姓名" />
                </el-form-item>
            </el-form>
            <div class="mt-70px btnDiv text-center">
                <el-button size="large" @click="submitForm"  v-loading.fullscreen.lock="loading" class="w-160px">确定</el-button>
            </div>
        </div>


    </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
let loading = $ref(false)
let formRef = $ref();
let form = $ref({
    user_name:'',
    user_realname:''
})
const routerBack = () => {
    window.location.href = 'https://www.txhlwxx.com/'
};
const rules = {
    user_name:[{ required: true, message: "请输入用户名", trigger: "blur" }],
    user_realname:[{ required: true, message: "请输入真实姓名", trigger: "blur"}]
}
function submitForm() {
    formRef.validate().then(res=>{
        if(res === true) {
            loading = true
            const submitData = {
                user_name:form.user_name,
                user_realname:form.user_realname
            }
            request({
                url:'/user/main/check_userinfo',
                data:{
                    token:'',
                    client:'pc',
                    user_main:submitData
                }
            }).then(res=>{
                loading = false;
                if(res.code === '1') {
                    ElMessage({
                        type:'success',
                        message:'用户认证成功！',
                        duration:'1500',
                        onClose:function () {
                            localStorage.setItem('reset_pwd',JSON.stringify(submitData));
                            router.push({name:'reset'});
                        }
                    });

                }
            })
        }
    })
}
</script>

<style lang="scss" scoped>
$color: #1259a1;
.main {
	box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}
.bg-white-grey{
	background: #fcfeff;
}
.nav-title{
	font-size: 18px;
	color: $color;
}
.btnDiv {
	.el-button {
		background: $color;
		border-color: $color;
		color: #fff;
	}
}
</style>
<style lang="scss">
.form-box{
	width: 520px;
	margin: 25px auto;
	.el-form {
		.el-form-item {
			&.is-required {
				.el-form-item__label {
					&::before {
						display: none;
					}

					&::after {
						content: "*";
						color: #f35421;
						margin-left: 4px;
					}
				}
			}

			.el-form-item__label {
				color: #949494;
				font-size: 14px;
				position: relative;
			}

			.el-form-item__content {
				.el-select {
					width: 100%;
				}

				.el-input {
					width: 100%;

					.el-input__wrapper {
						width: 100%;
						box-shadow: none;
						background: #f9f9f9;
						border-radius: 6px;
					}
				}

				.el-textarea {
					.el-textarea__inner {
						box-shadow: none;
						background: #f9f9f9;
						border-radius: 6px;
						// color: #d0d0d0;
					}
				}

				.el-date-editor {
					box-shadow: none;
					background: #f9f9f9;
					border-radius: 6px;
				}

				.el-checkbox.read {
					.el-checkbox__inner {
						border-radius: 50%;
					}
				}

				.el-input__inner {
					// color: #d0d0d0;
				}
			}
		}

	}
}
</style>