<template>
	<view id="warp">
		<view class="t_login_passList">
			<view class="input_icon">联系人</view>
			<input
				class="input_css"
				v-model="carYardInfo.contactPerson"
				border="none"
				placeholder="请输入联系人"
			></input>
		</view>
		<view class="t_login_passList">
			<view class="input_icon">联系电话</view>
			<input
				class="input_css"
				v-model="carYardInfo.contactPhone"
				type="number"
				border="none"
				placeholder="请输入联系电话"
			></input>
		</view>
		<view class="t_login_passList" @tap="onChooseLocation">
			<view class="input_icon">车场位置</view>
			<input
				class="input_css3"
				v-model="carYardInfo.address"
				disabled
				border="none"
				placeholder="请选择车场位置"
			></input>
			<view class="code3">
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<view class="btn_css">
			<button class="btn" @tap="registerOk">保存</button>
		</view>
	</view>
</template>

<script>
	const {urlList,https} = require('@/static/api');
	export default {
		data() {
			return {
				carYardInfo:{
					contactPerson:'',
					contactPhone:'',
					address:'',
					longitude:'',
					latitude:'',
				}
			};
		},
		onLoad(options) {
			const id = options.id;
			if(id){
				uni.setNavigationBarTitle({
					title:'修改车场位置'
				});
				https(urlList.clearCarYard+'/'+id,'GET','','查询中...').then(data => {
					this.carYardInfo = data.data;
				}).catch(err => {
					uni.showToast({
						title:err,
						icon:'none',
						duration:1500
					})
				})
			}
		},
		methods:{
			// 保存
			registerOk(){
				const that = this;
				// if(that.carYardInfo.contactPerson == ''){
				// 	uni.showToast({
				// 		title:'联系人不能为空',
				// 		icon:'none',
				// 	})
				// 	return
				// };
				if(that.carYardInfo.contactPhone && !/^1[3456789]\d{9}$/.test(that.carYardInfo.contactPhone)){
					uni.showToast({
						title:'请输入正确的联系电话',
						icon:'none',
						duration:1500
					})
					return;
				};
				if(that.carYardInfo.address == ''){
					uni.showToast({
						title:'车场位置不能为空',
						icon:'none',
					})
					return
				};
				if(this.carYardInfo.id){
					https(urlList.addCarYard,'PUT',that.carYardInfo,'编辑中...').then(data => {
						console.log(data)
						uni.showToast({
							title: data.message || '编辑成功',
							icon: 'none',
							duration: 1000
						})
						setTimeout(e => {
							uni.navigateBack()
						},1000)
					}).catch(err => {
						uni.showToast({
							title:err,
							icon:'none',
							duration:1500
						})
					})
				}else{
					https(urlList.addCarYard,'POST',that.carYardInfo,'新增中...').then(data => {
						console.log(data)
						uni.showToast({
							title: data.message || '新增成功',
							icon: 'none',
							duration: 1000
						})
						setTimeout(e => {
							uni.navigateBack()
						},1000)
					}).catch(err => {
						uni.showToast({
							title:err,
							icon:'none',
							duration:1500
						})
					})
				}
				
			},
			// 选择车场位置
			onChooseLocation(){
				const _that = this;
				uni.chooseLocation({
					// longitude: _that.carYardInfo.longitude,
					// latitude : _that.carYardInfo.latitude,
				    success: function (res) {
						let {longitude,latitude} = res;
						https(urlList.getLocationName+'/'+longitude+'/'+latitude,'GET','','').then(data => {
							// console.log('地址名称',data)
							_that.carYardInfo.address = data.data;
							_that.carYardInfo.longitude = longitude;
							_that.carYardInfo.latitude = latitude;
						}).catch(err => {
							uni.showToast({
								title:err,
								icon:'none',
								duration:1500
							})
						})
				    }
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
#warp{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.t_login_passList{
		width:650rpx;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid #e6e6e6;
		display: flex;
		flex-direction: row;
		align-items: center;
		.input_icon{
			width: 200rpx;
			// border: 1px solid red;
			margin-top: 5rpx;
			display: flex;
			align-items: center;
			padding-left: 10rpx;
		}
		.input_css{
			height: 70rpx;
			width:400rpx;
		}
		.input_css3{
			height: 70rpx;
			width: 350rpx;
		}
		.code3{
			margin-left: 20rpx;
			width: 50rpx;
			display: flex;
			justify-content: flex-end;
		}
		
	}
	.btn_css{
		width: 650rpx;
		position: fixed;
		bottom: 10rpx;
		display: block;
		.btn{
			background-color:#1B64F8FF;
			color: white;
		}
	}
}
</style>

