<template>
	<view class="login-container">
		<view class="title">实名认证</view>
		<view class="line"></view>
		
		<view class="bg_1_bx">
			<image class="bg_2" src="@/static/commonImage/peopel_2.jpg" mode="widthFix"></image>
		</view>
		<view class="login-box">
			<view class="logo_nav">
				<image style="width: 75rpx;" src="@/static/commonImage/logo.jpg" mode="widthFix"></image>
				<text>广西保险行业协会</text>
			</view>
			<up-form :model="userInfo" ref="logFormRef">
				<up-form-item prop="nickName">
					<up-input v-model="userInfo.nickName" shape="circle" border="none" fontSize="28rpx" color="#333" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入真实姓名">
						<template #prefix>
							<image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/user.png" mode="widthFix"></image>
						</template>
					</up-input>
				</up-form-item>
				<up-form-item prop="identificationNumber">
					<up-input v-model="userInfo.identificationNumber" shape="circle" border="none" fontSize="28rpx" color="#333" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入身份证号">
						<template #prefix>
							<image style="width: 32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/IdCard.png" mode="widthFix"></image>
						</template>
					</up-input>
				</up-form-item>
				<up-form-item prop="phonenumber">
					<up-input v-model="userInfo.phonenumber" disabled shape="circle" border="none" fontSize="28rpx" color="#333" :placeholderStyle="placeholderStyle" :customStyle="customStyle" placeholder="请输入手机号码">
						<template #prefix>
							<image style="width: 32rpx;height:32rpx;margin-right: 18rpx;margin-top: 10rpx;" src="@/static/commonImage/phone.png" mode="widthFix"></image>
						</template>
						<template #suffix>
							<button class="authBtn" open-type="getPhoneNumber" @getphonenumber="onGetNumber">获取手机号</button>
						</template>
					</up-input>
				</up-form-item>
			</up-form>
		</view>
		
		<view class="tip">
			未注册或绑定该平台的身份证号，将帮你注册新账号，点击提交即代表你同意<text style="color: #3680FE;" @click="goPrivacy">《隐私政策》</text>
		</view>
		<view class="log-btn" @click="submit">提交</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { userWxLogin, updateUserInfo, getPhome } from '@/api/user.js'
import { onReady, onLoad } from '@dcloudio/uni-app'
import useUserStore from '@/store/modules/user.js'
import storage from '@/utils/storage.js'
import { test } from '@/uni_modules/uview-plus';
const { userInfo, login, getUser } = useUserStore()
// 表单引用  
const logFormRef = ref(null)
// 校验规则
const rules = { 
	nickName: [ 
		{ required: true, message: '请输入姓名', trigger: ['blur'] },
		{ min: 2, max: 6, message: '名字应在2到6个字', trigger: ['blur'] }, 
		{ validator: (rule, value, callback) => {
				return test.chinese(value)
			},
			message: '请输入中文',
			// 触发器可以同时用blur和change
			trigger: ['blur'],
		}
	],
	identificationNumber: [
		{ required: true, message: '请输入身份证号', trigger: ['blur'] },
		{ validator: (rule, value, callback) => {
				return test.idCard(value)
			},
			message: '身份证号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['blur'],
		}
	],
	phonenumber: [
		{ required: true, message: '请输入手机号', trigger: ['blur'] },
		{ validator: (rule, value, callback) => {
				return test.mobile(value)
			},
			message: '手机号码不正确',
			// 触发器可以同时用blur和change
			trigger: ['blur'],
		}
	]
}
const customStyle = {
	height: '80rpx',
	backgroundColor: '#F9F9F9',
	paddingLeft: '40rpx'
}
const placeholderStyle = {
	color: '#bbb',
	fontSize: '28rpx'
}
// 微信小程序需要在此注册校验规则
onReady(() => {
	logFormRef.value.setRules(rules)
})
onLoad((options) => {
	uni.login({
	  success: async (loginRes) => {
			await login({code: loginRes.code, type: 0})
			const { data, roleGroup } = await getUser()
			storage.set('crgx_roleGroup', roleGroup)
			if(data.identificationNumber !== null) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
	  }
	});
})
const goPrivacy = () => {
	uni.navigateTo({
		url: '/pages/privacy/privacy'
	})
}

const onGetNumber = (e) => {
	if(e.detail.code){
		getPhome(e.detail.code).then(res => {
			userInfo.phonenumber = res.msg
		})
	} else {
		uni.$u.toast('已取消授权，不能进行操作')
	}
}
// 提交方法
const submit = () => {
	if(!userInfo.phonenumber) {
		return uni.$u.toast('请授权获取手机号进行实名')
	}
	logFormRef.value.validate().then(async valid => {
		if (valid) {
			await updateUserInfo(userInfo)
			await getUser()
			uni.$u.toast('登录成功')
			uni.switchTab({
				url: '/pages/index/index'
			})
		} else {
			uni.$u.toast('校验失败')
		}  
	}).catch(() => {
		// 处理验证错误  
		uni.$u.toast('校验失败')
	});  
}
</script>

<style lang="scss" scoped>
.login-container{
	position: relative;
	width: 100%;
	height: 100vh;
	background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	.title{
		position: absolute;
		top: 232rpx;
		left: 30rpx;
		font-size: 48rpx;
		line-height: 64rpx;
		color: #fff;
		font-weight: 500;
	}
	.line{
		position: absolute;
		top: 326rpx;
		left: 30rpx;
		width: 40rpx;
		height: 6rpx;
		background: #FFFFFF;
	}
	.login-box{
		position: relative;
		width: 690rpx;
		padding: 40rpx 44rpx;
		background-color: #fff;
		z-index: 10;
		margin: 442rpx auto 40rpx;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
		border-radius: 40rpx;
		.logo_nav{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20rpx;
			font-size: 36rpx;
			color: #333;
			font-weight: 500;
		}
		.employeeStatus{
			display: flex;
			align-items: center;
			gap: 40rpx;
			margin-top: 30rpx;
			.btn{
				flex: 1;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 200rpx;
				border: 2rpx solid #BBBBBB;
				font-size: 28rpx;
				text-align: center;
				line-height: 80rpx;
				color: #999;
				&.active{
					background: #75A8FF;
					color: #fff;
				}
			}
		}
	}
	.tip{
		color: #666;
		font-size: 24rpx;
		line-height: 28rpx;
		padding: 0 40rpx;
		margin-bottom: 20rpx;
	}
	.log-btn{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #3680FE;
		font-size: 28rpx;
		margin: 0 auto;
		color: #fff;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
		border-radius: 200rpx;
	}
}
.authBtn{
	width: 180rpx;
	font-size: 20rpx;
	margin-right: 30rpx;
}

.bg_1_bx{
	position: absolute;
	right: 52rpx;
	top: 210rpx;
	.bg_2{
		width: 200rpx;
	}
}
</style>