<template>
	<view class="page-box">
		<u--form :model="form" ref="uForm" :rules="rules" labelWidth="180rpx">
			<u-form-item label="手机号：" prop="mobile">
				<u--input v-model="form.mobile" border="bottom" placeholder="请输入手机号"></u--input>
			</u-form-item>
			<u-form-item label="验证码：" prop="code">
				<u--input v-model="form.code" border="bottom" placeholder="请填写验证码">
					<!-- <template slot="suffix">
						<u-code :seconds="60" @end="codeEnd" @start="codeStart" @change="codeChange" ref="uCode"></u-code>
						<template v-if="is_send_sms">
							<u-button type="primary" text="获取验证码" size="mini" @click="sendSms"></u-button>
						</template>
						<template v-else>
							<u-button type="primary" :text="sms_info" size="mini"></u-button>
						</template>
					</template> -->
				</u--input>
				<view>
					<u-code :seconds="60" @end="codeEnd" @start="codeStart" @change="codeChange" ref="uCode"></u-code>
					<template v-if="is_send_sms">
						<u-button type="primary" text="获取验证码" size="mini" @click="sendSms"></u-button>
					</template>
					<template v-else>
						<u-button type="primary" :text="sms_info" size="mini"></u-button>
					</template>
				</view>
			</u-form-item>
			<u-form-item label="邀请码：" prop="parent_id">
				<u--input v-model="form.parent_id" :disabled="distributor_id > 0" border="bottom" placeholder="请输入邀请码"></u--input>
			</u-form-item>
			
			<u-form-item label="密码：" prop="pwd">
				<u--input v-model="form.pwd" :password="true" border="bottom" placeholder="请输入密码"></u--input>
			</u-form-item>
			<u-form-item label="确认密码：" prop="pwd_1">
				<u--input v-model="form.pwd_1" :password="true" border="bottom" placeholder="请输入密码"></u--input>
			</u-form-item>
		</u--form>
		<view style="margin-top: 40rpx;">
			<u-button shape="circle" type="success" color="#fa3534" size="large" text="登录" @click="pwdSubmit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		components: {  },
		data() {
			return {
				is_eye: 0,
				sms_info: '60秒重新获取',
				is_send_sms: 1,
				distributor_id: '',
				form: {
					code: '',
					mobile: '',
					pwd: '',
					pwd_1: '',
					parent_id: ''
				},
				rules: {
					mobile: [
						{
							required: true,
							message: '请输入账号',
							trigger: ['blur', 'change']
						}
					],
					code: [
						{
							required: true,
							message: '请填写6位验证码',
							len: 6,
							trigger: ['blur', 'change']
						}
					],
					pwd: [
						{
							required: true,
							message: '请输入至少6位密码',
							min: 6,
							trigger: ['blur', 'change']
						}
					],
					pwd_1: [
						{
							required: true,
							message: '请输入至少6位密码',
							min: 6,
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		computed: {
			
		},
		onShow() {
			let distributor_id = uni.getStorageSync('distributor_id')
			if (distributor_id) {
				this.distributor_id = distributor_id
				this.form.parent_id = distributor_id.padStart(7, '0');
			}
		},
		methods: {
			codeEnd() {
				console.log('codeEnd')
				this.is_send_sms = 1
			},
			codeStart() {
				
				console.log('codeStart')
				this.is_send_sms = 0
			},
			codeChange(e) {
				this.sms_info = e
			},
			async sendSms() {
				uni.showLoading({
					title: '发送中'
				})
				const res = await this.$api.common.sendSms({
				    mobile: this.form.mobile
				});
				uni.hideLoading()
				if (res.code) {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				} else {
					this.is_send_sms = 0
					this.$nextTick(() => {
						this.$refs.uCode.start();
					})
				}
				
			},
			pwdSubmit() {
				this.$refs.uForm.validate().then(async (res) => {
					uni.showLoading({
						title: '注册中'
					})
					const res1 = await this.$api.user.regPhone(this.form);
					uni.hideLoading()
					if (res1.code) {
						uni.showToast({
							icon: 'none',
							title: res1.msg
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '注册成功'
						})
						setTimeout(() => {
							this.$utils.toUrl("/subPackages/login/login/index", "redirectTo")
						}, 2000)
					}
				}).catch(errors => {})
			}
		}
	}
</script>

<style lang="less" scoped>
	.page-box {
		background: #FFF;
		padding: 30rpx;
		min-height: 100vh;
	}
</style>