<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="pleaseSelect flexC" @click="showpicker">
				请选择 <image src="/static/ic-arrow-more@2x.png" mode=""></image>
			</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>
		<!-- 选择器组件 -->
		<pxingPicker ref='pickerName' :deepLength='deepLength' :chooseList='chooseList'
			:defaultChooseList='defaultChooseList' @confirm='confirm'></pxingPicker>
			
			<!-- 发布按钮 -->
			<view class="releaseBtn flexC" @click="toBuyersReleased">
				发布
			</view>
	</view>
</template>

<script>
	import pxingPicker from '@/heYang/pxing-picker/pxing-picker.vue';
	export default {
		components: {
			pxingPicker
		},
		data() {
			return {
				deepLength: 0,
				chooseList: [],
				defaultChooseList: [],
				areaList: [],
				status:1,
				time:60,
				monitorTime:null,
			}
		},
		onLoad() {
			this.setData();
		},
		methods: {
			// 发送验证码请求
			sendOut(){
				this.monitorTime = setInterval(()=>{
					this.time = this.time-1
					console.log(this.time)
				},1000)
			},
			//发布页
			toBuyersReleased(){
				// console.log('1')
				uni.navigateTo({
					url:`/pages/index/buyersReleased?status=${this.status}`
				})
			},
			setData(){
				// var tempone = [
				// 	{value:1,label:'苹果'},
				// 	{value:2,label:'香蕉'},
				// 	{value:3,label:'梨子'},
				// 	{value:4,label:'菠萝'}
				// ];
				// var defaultone = [0];
				// var lenone = 1;
				var temptwo = [
					{
						value:1,
						label:'农作物',
						children:[
							{value:11,label:'大豆'},
							{value:12,label:'麦子'},
							{value:12,label:'水稻'},
							{value:12,label:'玉米'},
							{value:12,label:'土豆'},
							{value:12,label:'西米'}
						]
					},
					{
						value:2,
						label:'水果',
						children:[
							{value:21,label:'葡萄'},
							{value:22,label:'榴莲'},
							{value:22,label:'西瓜'},
							{value:22,label:'冬瓜'},
							{value:22,label:'南瓜'},
							{value:22,label:'猕猴桃'}
						]
					}
				]
				var defaulttwo = [0,0];
				var lentwo = 2;
				// var tempthree = [
				// 	{
				// 		value:1,
				// 		label:'江苏省',
				// 		children:[
				// 			{
				// 				value:11,
				// 				label:'南京市',
				// 				children:[
				// 					{value:111,label:'江宁区'},
				// 					{value:112,label:'浦口区'}
				// 				]
				// 			},
				// 			{
				// 				value:12,
				// 				label:'扬州市',
				// 				children:[
				// 					{value:121,label:'邗江区'},
				// 					{value:122,label:'仪征市'}
				// 				]
				// 			}
				// 		]
				// 	},
				// 	{
				// 		value:2,
				// 		label:'安徽省',
				// 		children:[
				// 			{
				// 				value:21,
				// 				label:'合肥市',
				// 				children:[
				// 					{value:211,label:'庐阳区'},
				// 					{value:212,label:'瑶海区'}
				// 				]
				// 			},
				// 			{
				// 				value:22,
				// 				label:'芜湖市',
				// 				children:[
				// 					{value:221,label:'镜湖区'},
				// 					{value:222,label:'弋江区'}
				// 				]
				// 			}
				// 		]
				// 	}
				// ]
				var defaultthree = [0,0,0];
				var lenthree = 3;
				var tempfour = [
					{
						value:1,
						label:'type_A',
						children:[
							{
								value:11,
								label:'type_A_a',
								children:[
									{
										value:111,
										label:'type_A_a_1',
										children:[
											{value:1111,label:'tAa1_a'},
											{value:1112,label:'tAa1_b'},
											{value:1113,label:'tAa1_c'}
										]
									},
									{
										value:112,
										label:'type_A_a_2',
										children:[
											{value:1121,label:'tAa2_a'},
											{value:1122,label:'tAa2_b'},
											{value:1123,label:'tAa2_c'}
										]
									},
									{
										value:113,
										label:'type_A_a_3',
										children:[
											{value:1131,label:'tAa3_a'},
											{value:1132,label:'tAa3_b'},
											{value:1133,label:'tAa3_c'}
										]
									}
								]
							},
							{
								value:21,
								label:'type_A_b',
								children:[
									{
										value:211,
										label:'type_A_b_1',
										children:[
											{value:2111,label:'tAb1_a'},
											{value:2112,label:'tAb1_b'},
											{value:2113,label:'tAb1_c'}
										]
									},
									{
										value:212,
										label:'type_A_b_2',
										children:[
											{value:2121,label:'tAb2_a'},
											{value:2122,label:'tAb2_b'},
											{value:2123,label:'tAb2_c'}
										]
									}
								]
							}
						]
					},
					{
						value:2,
						label:'type_B',
						children:[
							{
								value:21,
								label:'type_B_a',
								children:[
									{
										value:211,
										label:'type_B_a_1',
										children:[
											{value:2111,label:'tBa1_a'},
											{value:2112,label:'tBa1_b'},
											{value:2113,label:'tBa1_c'}
										]
									},
									{
										value:212,
										label:'type_B_a_2',
										children:[
											{value:2121,label:'tBa2_a'},
											{value:2122,label:'tBa2_b'},
											{value:2123,label:'tBa2_c'}
										]
									},
									{
										value:213,
										label:'type_B_a_3',
										children:[
											{value:2131,label:'tBa3_a'},
											{value:2132,label:'tBa3_b'},
											{value:2133,label:'tBa3_c'}
										]
									}
								]
							}
						]
					}
				];
				var defaultfour = [0,0,0,0];
				var lenfour = 4;
				this.chooseList = temptwo;
				this.defaultChooseList = defaulttwo;
				this.deepLength = lentwo;
			},
			showpicker() {
				this.$refs.pickerName.show();
			},
			confirm(e) {
				console.log(e)
				this.select = e[this.deepLength - 1].label;
			}
		},
		watch:{
			time(oldTime,newTime){
				if(newTime==1){
					clearInterval(this.monitorTime)
					this.time = 60
				}
			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 750rpx;
		height: 104rpx;
		opacity: 1;
		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;
	}

	.pleaseSelect {
		color: rgba(0, 0, 0, 0.4);
		font-size: 28rpx;

		image {
			width: 16rpx;
			height: 32rpx;
			margin-left: 4rpx;
		}
	}

	.quantity {
		display: flex;

		.enterQuantity {
			input {
				width: 144rpx;
				color: rgba(0, 0, 0, 0.4);
				font-size: 28rpx;
			}
		}

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

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

	.zhujian {
		height: 200rpx;
		width: 100%;
		// background-color: red;
		margin-top: 300rpx;
	}
	.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>