<template>
	<view class="main_background">
		<view class="back"></view>
		<MyNavbar title="合作申请" background="../../static/images/kehu/bg_2.png"></MyNavbar>
		<view class="body">
			<view style="width:100%;height:129rpx;position: absolute;top: 0;left: 0;right: 0;">
				<view style="width: 8rpx;height: 22rpx;background: #D49B4B;opacity: 1;border-radius: 1px 5px 5px 1px;position: absolute;top: 42rpx;left: 20rpx;"/>
				<text class="title_text">个人资料</text>
			</view>
			<view class="u-form-body">
				<u-form
					labelPosition="left"
					ref="form1"
					:model="person"
					:rules="rules"
					:labelStyle="form_tile_title"
				>
					<u-form-item
						prop="person.name"
						borderBottom
						ref="name"
						label="姓名*"
					>
						<input
							:placeholder="rules['person.name'].message"
							class="form_input"
							:value="person.name"
							placeholder-class="form_holder"
							@blur="rules['person.name'].validator"
						/>
					</u-form-item>
					<u-form-item
						label="电话*"
						prop="person.phone"
						borderBottom
						ref="phone"
					>
						<input
							:placeholder="rules['person.phone'].message"
							class="form_input"
							placeholder-class="form_holder"
							:value="person.phone"
							@blur="rules['person.phone'].validator"
						/>
					</u-form-item>
					<u-form-item
						label="所在地址"
						prop="person.address"
						borderBottom
						ref="city"
						@click="onClickToSelectCity"
					>
						<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion">
							<input
								:placeholder="rules['person.address'].message"
								class="form_input"
								:disabled="true"
								:value="person.address"
								placeholder-class="form_holder"
							/>
						</pick-regions>
						<u-icon
							slot="right" 
							name="arrow-right"
						></u-icon>
					</u-form-item>
					<u-form-item
						label="推荐人电话"
						prop="person.referrer"
						borderBottom
						ref="referrer"
					>
						<input
							:placeholder="rules['person.referrer'].message"
							class="form_input"
							placeholder-class="form_holder"
							:value="person.referrer"
							@blur="rules['person.referrer'].validator"
						/>
					</u-form-item>
				</u-form>
				<u-gap height="40rpx" />
				<view style="width: 100%;height: 120rpx;">
					<text class="attentionText">注意事项</text>
					<text class="attentionInfo">
						v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
					</text>
				</view>
			</view>
		</view>
		<view class="button">
			<text class="button_text">提交</text>
		</view>
	</view>
</template>

<script>
	import MyNavbar from "@/components/MyNavbar/MyNavbar.vue";
	export default {
		components:{
			MyNavbar,
		},
		data() {
			return {
				person : {
					///名字
					name : '',
					///电话号码
					phone : '',
					///所在地址
					address : '',
					///推荐人电话
					referrer : '',
				},
				rules : {
					"person.name" : {
						type: 'string',
						required: true,
						message : '请输入您的姓名',
						validator : (object)=>{
							this.person.name = object.detail.value;
						}
					},
					'person.phone' : {
						type: 'string',
						required: true,
						message : '请输入您的联系电话',
						///校验用户是否输入了正确的手机号码
						validator : (object)=>{
							var suc = uni.$u.test.mobile(object.detail.value);
							if(!suc){
								uni.$u.toast("请输入正确的电话号码！");
							}else{
								this.person.phone = object.detail.value;
							}
							
							return suc;
						}
					},
					'person.address' : {
						type : 'string',
						required : false,
						message: '请选择您的地址',
					},
					'person.referrer' : {
						type : 'string',
						required : false,
						message : '请输入推荐人电话号码',
						///校验用户是否输入了正确的手机号码
						validator : (object)=>{
							var suc = uni.$u.test.mobile(object.detail.value);
							if(!suc){
								uni.$u.toast("请输入正确的电话号码！");
							}else{
								this.person.referrer = object.detail.value;
							}
							return suc;
						},
					},
				},
				form_tile_title : {
					width: '170rpx',
					height: '37rpx',
					fontSize: 26,
					fontWeight: 500,
					color: 'black',
				},
				defaultRegion:['四川省','成都市','武侯区'],
				region:[],
				
			};
		},
		methods:{
			///点击并选择城市
			onClickToSelectCity(){
				uni.hideKeyboard();
			},
			// 获取选择的地区
			handleGetRegion(region){
				this.region = region;
				this.person.address = this.regionName();
				this.$refs.form1.validateField('person.address');
			},
			regionName(){
				return this.region.map(item=>item.name).join(' ');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main_background{
		opacity: 1;
		border-radius: 0rpx;
		overflow: scroll;
		touch-action: auto;
		flex-direction: column;
		display: flex;
		margin: 0 auto;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		position: relative;
	}
	.back{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background:#F6F6F6
	}
	.top{
		width: 750rpx;
		height: 424rpx;
		position: relative;
	}
	.top_banner{
		position: relative;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 424rpx;
	}
	.body{
		width: 702rpx;
		height: 820rpx;
		position: relative;
		left: 24rpx;
		right: 24rpx;
		top: -129rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
	}
	.title_text{
		width: 192rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 38rpx;
		top: 30rpx;
	}
	.u-form-body{
		position: absolute;width: 662rpx;
		top: 70rpx;
		left: 20rpx;
		right: 20rpx;
		height: 740rpx;
		//background-color: #1CBBB4;
		border-radius: 20rpx;
	}
	.form_input{
		//background-color: #0081FF;
		width: 100%;
		height: 90rpx;
		text-align: right;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}
	.form_holder{
		width: 100%;
		height: 90rpx;
		text-align: right;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		margin-right: 10rpx;
	}
	.form_label_style{
		height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		opacity: 1;
	}r
	///注意事项
	.attentionText{
		width: 104rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		opacity: 1;
	}
	.attentionInfo{
		width: 648rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		max-height: 120rpx;
	}
	.button{
		width: 702rpx;
		height: 90rpx;
		background: #D49B4B;
		opacity: 1;
		border-radius: 93rpx;
		position: relative;
		left: 24rpx;	
	}
	.button_text{
		width: 72rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		opacity: 1;
		position: absolute;
		left: 315rpx;
		top: 20rpx;
	}
</style>
