/**
* 注册页面
*/
<template>
	<view class="register">
		<p class="title">请填写以下信息</p>
		<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">
			<u-form-item label="员工号" prop="number" labelWidth="80" class="form-item">
				<u--input v-model="form.number" placeholder="请输入员工号"></u--input>
			</u-form-item>
			<u-form-item label="姓名" prop="name" labelWidth="80" class="form-item">
				<u--input v-model="form.name" placeholder="请输入员姓名"></u--input>
			</u-form-item>
			<u-form-item label="员工类型" prop="type" :borderBottom="false" class="form-item" labelWidth="80">
				<u-button @click="typeLx" v-model="form.type" border="none">{{form.type || '点击选择'}}</u-button>
			</u-form-item>
			<u-form-item label="手机号码" prop="phone" labelWidth="80" class="form-item">
				<u-button v-model="form.phone" 
				@click="getUserInfo"
				open-type="getPhoneNumber" 
				@getphonenumber="getPhoneNumber"
					border="none">
					{{form.phone || '获取手机号'}}
				</u-button>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="注册" @click="registerGo"></u-button>
		<view @click="goRegister" class="link-login">已有账号，点击登录</view>
		<u-action-sheet :show="show" :actions="list" title="请选择员工类型" description="只能单选" @close="show = false"
			@select="sexSelect">
		</u-action-sheet>
		<u-popup :show="sqShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
			<view class="popup">
				<view class="popup-title"> 微信授权</view>
				<view class="popup-content">
					申请获取你微信绑定的手机号{{form.phone}}？
				</view>
				<view class="popup-buttom">
					<view class="popup-jujue" @click="reject">
						拒绝
					</view>
					<view class="popup-yunxu" @click="permit">
						允许
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="jujueShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
			<view class="popup">
				<view class="popup-all-title">
					拒绝将无法进行注册!
				</view>
				<view class="popup-buttom">
					<view class="popup-jujue" @click="rejectAll">
						仍要拒绝
					</view>
					<view class="popup-yunxu" @click="permit">
						允许授权
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="successShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
			<view class="popup">
				<view class="popup-all-title">
					注册成功!
				</view>
				<view class="popup-login" @click="goRegister">
					返回登录
				</view>
			</view>
		</u-popup>
		<u-popup :show="errorShow" mode="center" :round="10" :closeOnClickOverlay="false" @close="close" @open="open">
			<view class="popup">
				<view class="popup-error-title">
					注册失败！请重新填写信息或联系管理人员
				</view>
				<view class="popup-buttom">
					<view class="popup-jujue popup-jujue-fanhui" @click="errorFh">
						返回
					</view>
					<view class="popup-yunxu popup-jujue-queren" @click="errorQr">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					name: [{
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change'],
					}],
					number: [{
						required: true,
						message: '请填写员工号',
						trigger: ['blur', 'change'],
					}],
					password: [{
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字'
						},
						{
							min: 8,
							max: 15,
							message: '长度在8-15个字符之间'
						}
					],
					confirmPassword: [{
						required: true,
						message: '请填写确认密码',
						trigger: ['blur', 'change'],
					}]
				},
				form: {
					number: '', //员工号
					name: '', //姓名
					type: '', //员工类型
					phone: '', //电话
					password: '', //密码
					confirmPassword: '', //确认密码
				},
				tips: {
					text: '请选择员工类型',
					color: '#909399',
					fontSize: 24
				},
				list: [{
						name: '广播电视台员工'
					},
					{
						name: '广播电视台员工'
					},
					{
						name: '网络有限公司员工'
					},
				],
				show: false,
				sqShow: false,
				jujueShow: false,
				successShow: false,
				errorShow: false,
				code: ""
			}
		},
		methods: {
			//注册失败确认
			errorQr() {
				this.errorShow = false
			},
			//注册失败返回
			errorFh() {
				this.errorShow = false
			},
			//点击注册
			registerGo() {
				console.log(this.form)
				this.errorShow = true
			},
			//允许获取
			permit() {
				this.sqShow = false
				this.jujueShow = false
			},
			//拒绝获取
			reject() {
				this.sqShow = false
				this.jujueShow = true
			},
			//任然要拒绝
			rejectAll() {
				this.jujueShow = false
			},
			open() {

			},
			typeLx() {
				this.show = true
			},
			getPhoneNumber(e) {
				console.log(e, '666')
			},
			//获取用户手机号
			getUserInfo() {
				this.sqShow = true
				uni.getUserInfo({
					provider: 'weixin',
					success: (res) => {
						console.log('getUserInfo', res);
					},
				});
			},
			//关闭授权获取手机号弹窗
			close() {
				this.sqShow = false
			},
			//选中员工类型
			sexSelect(e) {
				setTimeout(() => {
					this.form.type = e.name
				}, 30)
				// this.$refs.form1.validateField('userInfo.sex')
			},
			//跳转登录页面
			goRegister() {
				this.successShow = false
				wx.navigateTo({
					url: '/pages/login/login'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		padding: 50rpx;

		.title {
			font-size: 42rpx;
			font-weight: 500;
			margin-bottom: 32rpx;
		}
		.form-item {
			// white-space: nowrap;
			width: 390rpx;
			color: red;
		}

		.popup {
			width: 700rpx;
			height: 450rpx;

			.popup-title {
				text-align: center;
				font-size: 36rpx;
				margin: 35rpx;
			}

			.popup-content {
				width: 70%;
				margin-left: 135rpx;
				line-height: 54rpx;
			}

			.popup-error-title {
				margin-left: 36rpx;
				margin-right: 36rpx;
				margin-top: 80rpx;
				font-size: 38rpx
			}

			.popup-login {
				margin-left: 240rpx;
				margin-top: 120rpx;
				width: 180rpx;
				height: 52rpx;
				background-color: skyblue;
				border-radius: 8rpx;
				line-height: 52rpx;
				border: #000 1px solid;
				text-align: center;
				color: #fff;

			}

			.popup-buttom {
				padding: 70rpx;
				margin-top: 72rpx;
				display: flex;
				justify-content: space-between;
			}

			.popup-jujue-fanhui {
				border: none;
				border-radius: 8rpx;
				background-color: gray;
				color: #fff;
			}

			.popup-jujue-queren {
				border: none;
				border-radius: 8rpx;
				background-color: skyblue;
				color: #fff;
			}

			.popup-buttom view {
				width: 180rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				border-radius: 6rpx;
				border: 1px #000 solid;
			}

			.popup-all-title {
				text-align: center;
				font-size: 42rpx;
				margin-top: 142rpx;
			}
		}
	}

	.link-login {
		margin-top: 20rpx;
		float: right;
		color: blue;
	}
</style>
