<template>
	<view class="">
		<!-- 版心 -->
		<view class="mainBox">
			<!-- 手机号码 -->
			<view class="flexJ">
				<view class="fixedFont">手机号码</view>
				<view class=""><input type="text" placeholder="请输入11位手机号码" style='text-align:right'></view>
			</view>
			<view class="lineBox"></view>
			<!-- 验证码 -->
			<view class="flexJ">
				<view class="fixedFont">验证码</view>
				<view class="flexA">
					<view class="verificationCode"><input type="text" placeholder="请输入验证码" style='text-align:right'>
					</view>
					<view class="obTain flexA">获取验证码</view>
				</view>
			</view>
			<view class="lineBox"></view>
			<!-- 农作物 -->
			<view class="flexJ">
				<view class="fixedFont">农作物</view>
				<view class="flexA" @click="NShow">{{choiceN}}<img src="../../static/ic-arrow-more@2x.png" alt=""
						style="width: 16rpx; height: 32rpx;" v-if="exhibition==true"></view>
			</view>
			<view class="lineBox"></view>
			<!-- 收获时间 -->
			<view class="flexJ">
				<view class="fixedFont">收获时间</view>
				<view class="flexA" @click="timeShow">
					{{value2}}
					<img src="../../static/ic-arrow-more@2x.png" alt="" style="width: 16rpx; height: 32rpx;"
						v-if="exhibition==true">
				</view>
				<!-- uview引入-时间 -->

			</view>
			<view class="lineBox"></view>
			<!-- 种植面积 -->
			<view class="flexJ">
				<view class="fixedFont">种植面积</view>
				<view class="flexA">
					<input type="text" placeholder="请输入种植面积" style='text-align:right'>
					<view class="comPany flexA" @click="qs">
						{{value3}}<img src="/static/1.png" alt="" style="width: 30rpx; height: 32rpx;" v-if="danw">
						<img src="../../static/ic-arrow-more@2x.png" alt="" style="width: 16rpx; height: 32rpx;" v-else>

					</view>
				</view>
			</view>
			<view class="lineBox"></view>
			<!-- 预计作物产量 -->
			<view class="flexJ">
				<view class="fixedFont">预计作物产量</view>
				<view class="flexA"> <input type="text" placeholder="请输入产量" style='text-align:right'>
					<view class="comPany flexA" @click="qstwo">
						{{value4}}<img src="/static/1.png" alt="" style="width: 30rpx; height: 32rpx;" v-if="danm">
						<img src="../../static/ic-arrow-more@2x.png" alt="" style="width: 16rpx; height: 32rpx;" v-else>
					</view>
				</view>
			</view>
			<view class="lineBox"></view>
			<!-- 秸秆是否出售 -->
			<view class="flexJ">
				<view class="fixedFont">秸秆是否出售</view>
				<view class="flexA">是<img src="../../static/ic-arrow-more@2x.png" alt=""
						style="width: 16rpx; height: 32rpx;"></view>
			</view>
			<!-- 上传照片 -->
			<view class="uploadPhotos">
				<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
					:maxCount="10" :previewFullImage="true"></u-upload>
			</view>
			<!-- 地址 -->
			<view class="addressBox flexA">
				<view class=""><img src="../../static/ic_18@2x.png" alt=""></view>
				<view class="addressOne">天津市西青区鑫茂科技园C1</view>
			</view>
			<!-- 获取验证码 -->
			<view class="getVerificationcode"></view>
			<!-- 发布 -->
			<view class="releaseBox1 flexC" >
				<view class="releaseBox flexC" @click="releaseClick">发布</view>
			</view>
		</view>

		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" mode="date" @confirm="confirm"
			@cancel="cancel" :formatter="formatter" title='选择日期'></u-datetime-picker>
		<!-- 农作物 -->
		<u-picker :show="isshow" ref="uPicker" :columns="columns" @confirm="confirmN" @cancel="cancelN"></u-picker>
		<!-- 单位的选择 -->
		<view class="mask" v-if="isMask==true">
			<view class="Company">
				<view class="item flexA" @click="replace(item)" v-for="(item,index) in companyList">{{item}}</view>
				<view class="lineOne"></view>
				<view class="item flexA" @click="qs">取消</view>
			</view>
		</view>
		<!-- 单位的选择2 -->
		<view class="mask" v-if="onMask==true">
			<view class="Company">
				<view class="item flexA" @click="comm(item)" v-for="(item,index) in comList">{{item}}</view>
				<view class="lineOne"></view>
				<view class="item flexA" @click="qstwo">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import Actionsheet from '@/uni_modules/bluestar-Actionsheet/components/bluestar-Actionsheet/bluestar-Actionsheet.vue'
	export default {
		data() {
			return {
				danw: false,
				danm: false,
				isMask: false,
				onMask: false,
				exhibition: true,
				fileList3: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
				isshow: false,
				show: false,
				value1: Number(new Date()),
				value2: '请选择',
				value3: '单位',
				value4: '单位',
				area: '',
				timeArray: [],
				time: '',
				columns: [
					['大豆', '玉米', '黄瓜']
				],
				choiceN: '请选择', //  农作物
				companyList: ['公顷', '亩'],
				comList: ['公顷/斤', '亩/斤']
			}
		},
		onLoad() {

		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			// 跳转到审核中页面
			releaseClick() {
				uni.navigateTo({
					url: '/pages/index/auditPage'
				})
			},
			// 替换单位
			replace(item) {
				console.log(item, '1111');
				this.value3 = item
				this.isMask = false
				this.danw = true
			},
			// 替换单位2
			comm(item) {
				this.value4 = item
				this.onMask = false
				this.danm = true
			},
			// 遮罩控制
			qs() {
				this.isMask = !this.isMask
			},
			// 遮罩控制
			qstwo() {
				this.onMask = !this.onMask
			},
			// 农作物
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 时间
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value

			},
			// 控制时间选择
			timeShow() {
				this.show = true
			},
			// 控制农作物显示
			NShow() {
				this.isshow = true
			},
			// 农作物的确定
			confirmN(e) {
				console.log(e)
				this.isshow = false
				this.choiceN = e.value
				this.exhibition = false

			},
			// 农作物的取消
			cancelN() {
				this.isshow = false
			},
			//时间确定
			confirm(e) {
				console.log(e)
				this.formatDate(e.value)
				this.show = false

			},
			//时间取消
			cancel() {
				this.show = false
			},
			formatDate: function(value) {
				var date = new Date(value);
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate();
				this.value2 = time
			}
		},

		filters: {},

	}
</script>

<style lang="scss">
	page {
		background: #f5f7fb;
	}

	.mainBox {
		width: 686rpx;
		margin: 0 auto;
	}

	.lineBox {
		width: 686rpx;
		height: 2rpx;
		background-color: #fafafa;
	}

	.fixedFont {
		padding: 32rpx 0;
		color: rgba(0, 0, 0, 0.9);
		font-size: 28rpx;
		font-weight: 700;
	}

	.obTain {
		background-color: #62CDCE;
		padding: 0rpx 10rpx;
		// width: 144rpx;
		height: 56rpx;
		border-radius: 12rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		font-weight: 500;
	}

	.verificationCode {
		margin-right: 16rpx;
	}

	.comPany {
		color: rgba(0, 0, 0, 0.9);
		font-size: 28rpx;
		font-weight: 700;
		padding-left: 16rpx;
	}

	.uploadPhotos {
		padding-top: 32rpx;
	}

	.addressBox {
		padding-top: 32rpx;

		img {
			width: 40rpx;
			height: 40rpx;
			padding-right: 8rpx;
		}

		.addressOne {
			color: rgba(33, 83, 212, 1);
			font-size: 28rpx;
			font-weight: 400;
		}
	}

	.getVerificationcode {
		height: 100rpx;
		width: 686rpx;
		background-color: rgba(245, 247, 251, 1);
	}

	.releaseBox1 {
		width: 100vw;
		height: 120rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;

		.releaseBox {
			// margin-top: 32rpx;
			width: 686rpx;
			height: 88rpx;
			border-radius: 28rpx;
			background-color: #19CCCD;
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			font-weight: 500;
		}

	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10;
	}

	.Company {
		position: fixed;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 368rpx;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.item {
		height: 116rpx;
	}

	.lineOne {
		width: 750rpx;
		height: 20rpx;
		opacity: 1;
		background: rgba(245, 246, 250, 1);
	}
</style>