/**
* 注册页面
*/
<template>
	<view class="register">
		<view class="main">
			<block>
				<image class="back-img" src="../../static/back.png"></image>
				<view class="back-title">环市东院区安防小程序</view>
			</block>
			<view class="content">
				<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" border="none" placeholder="请输入员工号码"></u--input>
					</u-form-item>
					<u-form-item label="员工姓名" prop="name"  labelWidth="80" class="form-item">
						<u--input v-model="form.name" border="none" placeholder="请输入员工姓名"></u--input>
					</u-form-item>
					<u-form-item label="员工类型" prop="type" borderBottom :borderBottom="false" class="form-item form-item-border" labelWidth="80">
						<u-button @click="typeLx" v-model="form.type" >{{form.type || '请选择员工类型'}}</u-button>
					</u-form-item>
					<u-form-item label="手机号码" prop="phone" borderBottom 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="error" text="注 册" @click="registerGo"></u-button>
				<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>
		</view>
	</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')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.register {
		display: flex;
		flex-direction: column;
		position: relative;
		height: 100%;
		padding: 32rpx;
		padding-bottom: 44rpx;
		box-sizing: border-box;
		.back-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 400rpx;
		}
		.back-title {
			font-size: 38rpx;
			font-weight: 900;
			color: #000;
			text-align: center;
			margin-top: 410rpx;
			margin-bottom: 120rpx;
		}
		.main {
			height: 100%;
			background-color: #fff;
			border-radius: 50rpx;
		}
		.content {
			flex: 1;
			padding: 0 54rpx;
			margin-top: 30rpx;
			background-color: #fff;
			.title {
				font-size: 42rpx;
				font-weight: 500;
				margin-bottom: 32rpx;
			}
			.form-item {
				// white-space: nowrap;
				width: 390rpx;
			}
			.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;
				}
			}
		}
	}

</style>

<style lang="scss">
	.register {
		.u-button {
			justify-content: left !important;
		}
		.u-button--normal {
			padding-left: 0 !important;
			font-size: 30rpx !important;
			color: #c4c7cf !important;
		}
		.u-button--info {
			border: 0 !important;
			font-weight: 500;
		}
		.u-form-item {
			border-bottom: 1rpx solid #f2f2f2;
			margin-bottom: 20rpx;
		}
		.u-button--error {
			justify-content: center !important;
			background-color: #c5000a !important;
			border-color: #c5000a !important;
			color: #fff !important;
			margin-top: 120rpx;
			font-weight: 600;
		}
	}
</style>