<template>
	<view class="">
		<!-- 手机号 -->
		<view class="box flexJ">
			<view class="left">
				手机号码
			</view>
			<view class="right">
				<input type="text" placeholder="请输入11位手机号码" maxlength="11">
			</view>
		</view>
		<!-- 验证码 -->
		<view class="box flexJ">
			<view class="left">
				验证码
			</view>
			<view class="getVerification flexC" @click="sendOut">
				{{time==60?'获取验证码':`${time}秒后获取`}}
			</view>
		</view>
		<!-- 土地详细地址 -->
		<view class="box flexJ">
			<view class="left">
				土地详细地址
			</view>
			<view class="right">
				<input type="text" placeholder="请输入详细地址">
			</view>
		</view>
		<!-- 土地面积 -->
		<view class="box flexJ">
			<view class="left">
				土地面积
			</view>
			<view class="quantity flexC">
				<view class="enterQuantity"><input type="text" placeholder="请输入土地面积"></view>
				<view class="company">单位</view>
				<img src="/static/dropDown.png" alt="">
			</view>
		</view>
		<!-- 土地描述 -->
		<view class="describe">
			<view class="title">
				土地描述
			</view>
			<u--textarea height=112 v-model="value2" placeholder="请输入内容" count maxlength=200 border='none'>
			</u--textarea>
		</view>
		<!-- 上传图品 -->
		<view class="uploadPictures">
			<view class="titleOne">
				上传图品
			</view>
			<view class="">
				<!-- maxCount规定上传图片数量，超出数量隐藏上传按钮 -->
				<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
					:maxCount="5" :previewFullImage="true"></u-upload>
			</view>
			<view class="position flexA" @click="openMap">
				<img src="/static/loc.png" alt="">
				<view class="flexC">天津市西青区鑫茂科技园C1</view>
			</view>
		</view>
		<!-- 空盒子 -->
		<view class="nullBox"></view>
		<!-- 发布按钮 -->
		<view class="releaseBtn flexC" @click="toBuyersReleased">
			发布
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value2: '请填写您的土地信息，土地附近是否有水源，土地目前的状态(在用 未用)，交通是否便利,地上物信息(是否有房屋、大棚、其他作物等)请填写您的土地信息，土地附近是否有水源，土地目前的状态(在用、未用)，交通是否便利，地上物信息(是否有房屋、大棚其他作物等)',
				fileList3: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
				time:60,
				monitorTime:null,
			}
		},
		onLoad() {

		},
		
		methods: {
			// 跳转到
			toBuyersReleased(){
				uni.navigateTo({
					url:``
				})
			},
			// 打开地图
			openMap(){
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res)
						const latitude = res.latitude;
						const longitude = res.longitude;
						// sconsole.log(11)
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							},
							fail: function() {
								console.log('fail');
							}
						});
					},
					fail(err) {
						console.log('获取经纬度失败1', err);
					}
				});
			},
			// 发送验证码请求
			sendOut(){
				this.monitorTime = setInterval(()=>{
					this.time = this.time-1
					console.log(this.time)
				},1000)
			},
		},
		
		watch:{
			time(oldTime,newTime){
				if(newTime==1){
					clearInterval(this.monitorTime)
					this.time = 60
				}
			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 104rpx;
		border-bottom: solid #F2F2F2;
		// border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
		padding: 0rpx 32rpx;
		box-sizing: border-box;

		.left {
			color: rgba(0, 0, 0, 0.9);
			font-size: 28rpx;
			letter-spacing: 1rpx;
		}

		.right {
			
			input {
				color: rgba(0, 0, 0, 0.4);
				font-size: 28rpx;
				text-align: right;
			}
		}
	}

	.getVerification {
		width: 144rpx;
		height: 56rpx;
		border-radius: 12rpx;
		background: rgba(98, 205, 206, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		font-weight: 700;
	}

	.quantity {
		display: flex;

		.enterQuantity {
			input {
				color: rgba(0, 0, 0, 0.4);
				font-size: 28rpx;
				text-align: right;
			}
		}

		.company {
			color: rgba(0, 0, 0, 0.9);
			font-size: 28rpx;
			margin-left: 16rpx;
			margin-right: 4rpx;
		}

		img {
			width: 16rpx;
			height: 24rpx;
		}
	}

	.describe {
		height: 386rpx;
		padding: 32rpx 32rpx 0rpx;
		background: rgba(255, 255, 255, 1);
		border-bottom: solid #F2F2F2;

		.title {
			color: rgba(0, 0, 0, 0.9);
			font-size: 28rpx;
			margin-bottom: 16rpx;
		}
	}

	.uploadPictures {
		border: 0 solid rgba(0.5920000076293945, 0.5920000076293945, 0.5920000076293945, 1);
		padding: 32rpx 32rpx 32rpx;
		background: rgba(255, 255, 255, 1);

		.titleOne {
			color: rgba(0, 0, 0, 0.9);
			font-size: 28rpx;
			margin-bottom: 24rpx;
		}
	}

	.position {
		margin-top: 24rpx;
		img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}

		:nth-child(2) {
			color: rgba(33, 83, 212, 1);
			font-size: 28rpx;
		}
	}

	.nullBox {
		width: 100%;
		height: 100rpx;
		background-color: #F5F7FB;
	}

	.releaseBtn {
		position: fixed;
		left: 32rpx;
		bottom: 46rpx;
		width: 686rpx;
		height: 88rpx;
		border-radius: 28rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-weight: 700;
		background: linear-gradient(90deg, rgba(25, 204, 205, 1) 0%, rgba(99, 217, 218, 1) 100%);
	}
</style>