<template>
	<view class="content">
		<view class="content-top">
			<view class='hs-box'>  
				<view class='hs-row'>
					<view class='hs-row-hd'>
						姓名
					</view>
					<view class='hs-row-bd'>
						<input class='hs-input' placeholder='请填写姓名' v-model="realname" ></input>
					</view>
				</view>
				<view class='hs-row'>
					<view class='hs-row-hd'>
						手机号
					</view>
					<view class='hs-row-bd'>
						<input class='hs-input' placeholder='请填写手机号' v-model="mobile" ></input>
					</view>
				</view> 
				<view class='hs-row'>
					<view class='hs-row-hd'>
				   		回收区域
				   	</view>
					<view class='hs-row-bd'>
						<view class="hs-input"    >{{address}} </view>
						<view @click="getLocation" style="position: absolute;right: 10px;line-height: 24px;color: #000;">
							选择位置      
							<image class="fr icon" src="/static/img/right.png">
							</image>
						 </view>
					</view>
				</view>
			</view>
		</view>
		<view class="button-bottom">
			<button class="btn btn-success"   @click="submitHandler()" :disabled='submitStatus'
			 :loading='submitStatus'>申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				realname: "",
				address: "",
				longitude: "",
				latitude: "",
				mobile: '', 
			}
		}, 
		methods: {  
			getLocation(){
				uni.chooseLocation({
					success: (e) => { 
						this.address = e.name; 
						this.longitude = e.longitude
						this.latitude = e.latitude  
					},
					fail:(e)=>{
						uni.showToast({
							title:'右上角三个点设置位置授权',
							icon:'none',
						})
					}
				})
			}, 
			// 保存资料
			submitHandler() {
				this.submitStatus = true; 
					this.$api.addperson({ 
						realname: this.realname,
						address: this.address,
						longitude: this.longitude,
						latitude: this.latitude,
						mobile: this.mobile
					}, res => {
						if(res.code == '1'){
							uni.showModal({
								title: '温馨提示',
								content: res.msg 
							})  
						} else {
							uni.showToast({ title: res.msg , icon: 'none' }) ;
						}
					}, res => {
						this.submitStatus = false;
					});
				 
			}
		},
		onLoad: function() { 
		}
	}
</script>

<style>  
	.hs-row-bd {
		color: #666;
		font-size: 26upx;
	}

	.hs-row-hd {
		width: 160rpx;
	} 
</style>
