<template>
	<view class="content">
		<view class="login_section">
			<uni-forms class="form_section" ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="注册类型" name="registType" labelWidth="100px" required>
					<picker @change="bindTypeChange" :value="valiFormData.registTypeIndex"
						:range="valiFormData.registType" range-key="name">
						<view class="uni-input" :style="{color: valiFormData.registTypeId===''?'#8f8f94':'#000000'}" :class="valiFormData.registTypeId===''? 'not_selected': '' ">
							{{valiFormData.registTypeId===''? '请选择' : valiFormData.registType[valiFormData.registTypeIndex].name }}
						</view>
					</picker>
				</uni-forms-item>

				<uni-forms-item label="所属机构" name="institution" labelWidth="100px" required>
					<picker @change="bindJGChange" :value="valiFormData.institutionIndex"
						:range="institution" range-key="orgName">
						<view class="uni-input" :style="{color: valiFormData.institutionId===''?'#8f8f94':'#000000'}"  :class="valiFormData.institutionId==='' ? 'not_selected' : '' ">
						{{ institution.length == 0 ? '请先选择注册类型' : valiFormData.institutionId===''? '请选择':institution[valiFormData.institutionIndex].orgName }}
						</view>
					</picker>
				</uni-forms-item>

				<uni-forms-item label="用户姓名" name="name" labelWidth="100px" required>
					<uni-easyinput v-model="valiFormData.name" type="" placeholder="请输入用户姓名" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" name="phone" labelWidth="100px" required>
					<uni-easyinput v-model="valiFormData.phone" type="" placeholder="请输入手机号码" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="code" labelWidth="100px" required>
					<view style="display: flex;align-items: center;" class="bottom_tip">
						<uni-easyinput v-model="valiFormData.code" type="" placeholder="请输入验证码" :inputBorder="false" />
						<button
							style="width: 240rpx; font-size: 15px; color: rgba(190, 163, 117, 1) ;background-color: rgb(255, 255, 255); ;"
							class="btn_bottom" type="primary" :disabled="!codeSend.send"
							@click="sendCode()">{{codeSend.send?'获取验证码':codeSend.second+'重新发送'}}</button>
					</view>
				</uni-forms-item>
				<uni-forms-item label="用户工号" name="userCode" labelWidth="100px" required>
					<uni-easyinput v-model="valiFormData.userCode" type="" placeholder="请输入用户工号" :inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item label="用户邮箱" name="email" labelWidth="100px">
					<uni-easyinput v-model="valiFormData.email" type="" placeholder="请输入用户邮箱" :inputBorder="false" />
				</uni-forms-item>

				<view style="display: flex;align-items: center; margin-top: 18rpx;">
					<checkbox value="valiFormData.access" style="transform:scale(0.7)" :checked="false"
						@click="changeCheck()" /><text style="font-size: 12px;">我已阅读并同意</text>
					<span @click="acceptMessage()" style="font-size: 12px;color: rgba(190, 163, 117, 1);">《用户服务协议》</span>
					<text style="font-size: 12px;">以及</text>
					<span @click="acceptPolicy()" style="font-size: 12px;color: rgba(190, 163, 117, 1);">《隐私政策》</span>
				</view>

				<button
					style="font-size: 18px;background-color: rgb(190, 163, 117);height: 85rpx;width: 90%;margin-top: 60rpx;"
					type="primary" @click="submit('valiForm')">注册</button>
				<!-- :disabled="pageData.disabledBtn" -->
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import { reactive,ref } from 'vue';
	import http from '@/utils/request'
	import {onLoad} from "@dcloudio/uni-app";

	// 验证码请求参数
	const sendCodeData = reactive({
		phone:''
	})

	//手机号校验
	var phoneRegs = /^(((1[3456789][0-9]{1})|(15[0-9]{1}))+\d{8})$/;

	//邮箱校验
	var emailRegs = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;

	//发送验证码倒计时
	const codeSend = reactive({
		//定义是否可以发送
		send: true,
		second: 0,
		s: 60
	})
	const institution  = ref([])
	// 表单数据
	const valiFormData = reactive({
		registTypeId: '',
		registTypeIndex: 0,
		registType: [
			{
				name: '飞行检查员',
				value: 1
			},
			// {
			// 	name: '行走药师',
			// 	value: 2
			// },
			{
				name: '代煎企业工作人员',
				value: 3
			}
		],
		institutionId: '',
		institutionIndex: 0,

		name: '',
		phone: '',
		code: '',
		userCode: '',
		email: '',
		access: false,

	})
	onLoad((data)=>{
		if (data.isRegister === '1') {
			if (data.codeId !== 'undefined') {
				var url = "app-api/wxLogin/get?id="+data.codeId +"&openId="
			} else {
				var url = "app-api/wxLogin/get?id="+"&openId="+data.openId
			}
			http.get(url).then(e => {
				valiFormData.registType.forEach(function (item, index) {
					if (item.name === e.registerName) {
						bindTypeChange2(index)
					}
				})
				institution.value.forEach(function (item, index) {
					if (item.orgCode === e.orgCode) {
						valiFormData.institutionIndex = index
						valiFormData.institutionId = index
					}
				})
				valiFormData.registTypeId = valiFormData.registType.name
				valiFormData.institutionId = e.orgId
				valiFormData.name = e.userName
				valiFormData.phone = e.phone
				valiFormData.userCode = e.userCode
				valiFormData.email = e.userMailbox
			})
		}
	})

	// 表单验证
	const valiForm = ref(null)
	const orgType = ref('')
	const bindTypeChange = (e) => {
		valiFormData.registTypeIndex = e.detail.value
		valiFormData.registTypeId = e.detail.value
		const regist = valiFormData.registType[valiFormData.registTypeIndex]
		orgType.value = (regist.value == 1 || regist.value == 2 )? 1 : 2;
		valiFormData.institutionId = ''
		institution.value = []
		findDepdList();
	}

	const bindTypeChange2 = (e) => {
		valiFormData.registTypeIndex = e
		valiFormData.registTypeId = e
		const regist = valiFormData.registType[valiFormData.registTypeIndex]
		orgType.value = (regist.value == 1 || regist.value == 2 )? 1 : 2;
		valiFormData.institutionId = ''
		institution.value = []
		findDepdList();
	}

	const findDepdList = () =>{
		http.post("common/deptDict",{orgType:orgType.value}).then(e =>{
			institution.value = e
		})
	}
	const bindJGChange = (e) => {
		valiFormData.institutionIndex = e.detail.value
		valiFormData.institutionId = e.detail.value
	}

	const rules = reactive({
		name: {
			rules: [{
				required: true,
				errorMessage: '用户姓名不能为空'
			}]
		},
		phone: {
			rules: [{
				required: true,
				errorMessage: '手机号码不能为空'
			}]
		},
		code: {
			rules: [{
				required: true,
				errorMessage: '验证码不能为空'
			}]
		},
		userCode: {
			rules: [{
				required: true,
				errorMessage: '用户工号不能为空'
			}]
		},
	})

	//同意阅读
	const changeCheck = () => {
		valiFormData.access = !valiFormData.access;
	}

	//注册
	const submit = () => {
		if (valiFormData.registTypeId === '') {
			uni.showToast({
				title: '注册类型不能为空',
				icon: 'none'
			})
		}
		else if(valiFormData.institutionId === ''){
			uni.showToast({
				title: '所属机构不能为空',
				icon: 'none'
			})
		}
		else if(!phoneRegs.test(valiFormData.phone)){
			uni.showToast({
				title: '手机号码格式不正确',
				icon: 'none'
			})
		}
		else if(valiFormData.email !=='' && !emailRegs.test(valiFormData.email)){
			uni.showToast({
				title: '邮箱格式不正确',
				icon: 'none'
			})
		}
		else {
			valiForm._value.validate().then(res => {
				if (valiFormData.access === false) {
					uni.showToast({
						title: '我已阅读不能为空',
						icon: 'none'
					})
					return
				}
				//注册类型
				const register = valiFormData.registType[valiFormData.registTypeIndex]
				const org = institution.value[valiFormData.institutionIndex]
				const data = {
					registerType: register.value ,
					registerName: register.name ,
					orgCode: org.orgCode,
					orgName:org.orgName,
					orgId: org.id,
					phone: valiFormData.phone,
					userCode: valiFormData.userCode,
					userName: valiFormData.name,
					openId: uni.getStorageSync("openId"),
					userMailbox: valiFormData.email,
					code:valiFormData.code
				}
				// 注册
				registerPost(data)
			}).catch(err => {
				uni.showToast({
					title: err[0].errorMessage,
					icon: 'none'
				})
			})
		}
	}

	const registerPost = (data) => {
		http.post("app-api/wxLogin/register",data).then(e =>{
			if (e.code === '200'){
				// uni.showToast({
				// 	title: '注册成功',
				// 	icon: 'none'
				// })
				uni.navigateTo({
					url: '../login/registerSuccess'
				});
			}else{
				uni.showToast({
					title: e.error,
					icon: 'none'
				})
			}
		})
	}

	//发送验证码
	const sendCode = () => {
		console.log(valiFormData.phone);
		sendCodeData.phone = valiFormData.phone
		if(!phoneRegs.test(valiFormData.phone)){
			uni.showToast({
				title: '手机号码格式不正确',
				icon:'none'
			});
		}else{
			http.get("app-api/wxLogin/obtainCode",sendCodeData).then(res=>{
				console.log(res);
				// 验证码发送失败
				if(res.code!=='200'){
					uni.showToast({
						title: res.error,
						icon:'none',
					});
				}else{
					uni.showToast({
						title: res.error,
						icon:'success',
						duration: 1000,
						success: () => {
							// 发送验证码
							codeSend.send = false;
							// 倒计时
							time();
						}
					});
				}
			})
		}
	}

	//点击这里跳转协议
	const acceptMessage = () => {
		uni.navigateTo({
			url: './message'
		})
	}

	//点击这里跳转隐私政策
	const acceptPolicy = () => {
		uni.navigateTo({
			url: './policy'
		})
	}

	// 倒计时
	const time = () => {
		codeSend.second = codeSend.s;
		let interval = setInterval(function() {
			if (codeSend.second === 1) {
				codeSend.send = true;
				codeSend.second = codeSend.s;
				clearInterval(interval);
			} else {
				codeSend.second--;
			}
		}, 1000)
	}
</script>

<style lang="scss" scoped>
	.login_section{
		width: 90%;
		padding: 40rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	::v-deep.uni-forms-item__label {
		font-size: 15px !important;
		color: rgba(51, 51, 51, 1)
	}

	::v-deep.uni-input-placeholder {
		font-size: 15px;
	}

	.uni-forms-item {
		margin-bottom: 2px;
		height: 44px;
		border-bottom: 1px solid #f7f7f7;
	}

	::v-deep.uni-forms-item__content {
		font-size: 15px;
		/* color: #8f8f94; */
	}

	uni-picker {
		margin-top: 9px;
		margin-left: 9px;
	}

	uni-button:after {
		border: 0px solid rgba(0, 0, 0, 0.2);
	}
</style>
