<template>
	<view class="apply-wrap">
		<view class="login-body">
			<u-form :model="form" :error-type="['toast']" ref="uForm" label-position="top">
				<u-form-item label="门店名称" required prop="name">
					<u-input v-model="form.name" maxlength="30" placeholder="请输入门店名称(最多30个字符)"/>
				</u-form-item>
				<u-form-item label="门店地址" required prop="addrDetail">
					<u-input v-model="form.addrDetail" placeholder="请输入门店详细地址"/>
				</u-form-item>
				<u-form-item label="手机号码" required prop="contactPhone">
					<u-input v-model="form.contactPhone" type="number" maxlength="11" placeholder="请输入手机号码"/>
				</u-form-item>
				<u-form-item label="姓名" required prop="userName">
					<u-input v-model="form.userName" maxlength="11" placeholder="请输入姓名"/>
				</u-form-item>
			</u-form>
			<view class="login-form">
				<view class="form-btn-con">
					<button class="form-btn" :style="{background:$config('primaryColor')}" @click="formSubmit">提交</button>
					<text class="apply-btn" @click="goLogin">已有账号？去登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Address from '@/components/address.vue'
	import { clzConfirm } from '@/libs/tools.js'
	export default{
		components: {
			Address,
		},
		data(){
			return{
				theme: '',
				form: {
					name: '',
					addrProvince: '',
					addrCity: '',
					addrDistrict: '',
					addrDetail: '',
					contactPhone: '',
					userName: '',
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入门店名称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					addrDetail: [
						{
							required: true, 
							message: '请输入详细地址', 
							trigger: 'change'
						}
					],
					contactPhone: [
						{
							required: true, 
							message: '请输入手机号', 
							trigger: 'change'
						}
					],
					userName: [
						{
							required: true, 
							message: '请输入姓名', 
							trigger: 'change'
						}
					],
				},
				areaIdArr: [],  //  省市区id数组
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.theme = getApp().globalData.theme;
		},
		methods: {
			//  表单提交
			formSubmit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.submitData()
					} else {
						console.log('验证失败');
					}
				});
			},
			submitData(){
				let obj = this.form
				//  申请试用
				uni.showLoading({
					title: '正在提交申请...'
				})
				setTimeout(() => {
					uni.hideLoading()
					clzConfirm({
					    title: '提示',
					    content: '资料已提交成功，客服会在3个工作日内同您联系。请保持电话畅通，谢谢！',
						showCancel: false,
						success: function (ret) {
					        if (ret.confirm||ret.index==0) {
								uni.reLaunch({
									url: '/pages/login/login'
								})
					        }
					    }
					})
				},500)
			},
			//  选择省区市
			areaConfirm(e) {
				console.log('已选择的省市区', e)
				this.areaIdArr = [ e.provinceCode, e.cityCode, e.areaCode ]
				this.form.label = e.label
			},
			openAddress(){
				//  省市区  回显     参数为省市区id数组
				this.$refs.applyAddress.open(this.areaIdArr)
			},
			//  去登录
			goLogin(){
				uni.navigateBack()
			},
		}
	}
</script>
<style scoped lang="scss">
	@import './login.scss';
	.apply-wrap .login-form{
		padding-top: 40upx;
		.form-btn-con{
			margin: 0;
		}
	}
	.apply-wrap .login-body{
		display: block;
	}
	.apply-wrap .authUserYs{
		padding: 60upx 0 30upx 0;
	}
	.getcode-btn {
		color: #0485F6 !important;
		border: none !important;
		background: none !important;
		font-size: 28upx;
		margin: 0;
		padding: 0;
		&:after{
			border: none !important;
		}
	}
</style>
