<template>
	<view class="content">

		<view class="card">

			<u--form labelPosition="top" labelWidth='100' :model="formData" :rules="rules" ref="form">
				<u-form-item label="土地名称" prop="formData.title" borderBottom ref='item1' required>
					<up-input placeholder="请输入土地名称" border="surround" v-model="formData.title"></up-input>
				</u-form-item>
				<u-form-item label="土地面积" prop="formData.area" borderBottom required>
					<up-input placeholder="请输入土地面积" border="surround" v-model="formData.area"></up-input>
				</u-form-item>
				<u-form-item label="所在省份" prop="formData.province_code" borderBottom required>
					<up-input placeholder="请选择所在省份" border="surround" v-model="province_name" disabled="true"
						@click="isshow1"></up-input>
				</u-form-item>
				<u-form-item label="所在城市" prop="formData.city_code" borderBottom required>
					<up-input placeholder="请选择所在城市" border="surround" v-model="city_name" @click="isshow2"
						disabled="true"></up-input>
				</u-form-item>
				<u-form-item label="所在区县" prop="formData.county_code" borderBottom required>
					<up-input placeholder="请选择所在区县" border="surround" v-model="county_name" @click="isshow3"
						disabled="true"></up-input>
				</u-form-item>
				<u-form-item label="所在镇街" prop="formData.town_code" borderBottom required>
					<up-input placeholder="请选择所在镇街" border="surround" v-model="town_name" @click="isshow4"
						disabled="true"></up-input>
				</u-form-item>
				<u-form-item label="所在乡村" prop="formData.village_code" borderBottom required>
					<up-input placeholder="请选择所在乡村" border="surround" v-model="village_name" @click="isshow5"
						disabled="true"></up-input>
				</u-form-item>
				<u-form-item label="所在小队" prop="formData.group_code" borderBottom required>
					<up-input placeholder="请选择所在小队" border="surround" v-model="group_name" @click="isshow6"
						disabled="true"></up-input>
				</u-form-item>
				<u-form-item label="土地负责人" prop="formData.master_name" borderBottom required>
					<up-input placeholder="请输入土地负责人" border="surround" v-model="formData.master_name"></up-input>
				</u-form-item>
				<u-form-item label="负责人电话" prop="formData.master_phone" borderBottom required>
					<up-input placeholder="请输入负责人电话" type="number" border="surround"
						v-model="formData.master_phone"></up-input>
				</u-form-item>
				<view class="card-li">
					<view class="card-li-tit">
						土地图片
					</view>
					<view class="code-img">
						<view class="" @click="updateImgFn">
							<view class="" v-if="formData.pic">
								<u-image :src="formData.buy_cert" width="637.85rpx" height="350.47rpx"></u-image>
							</view>
							<view class="carime-icon" v-else>
								<u-image src="/static/img/DJSC.png" width="91.12rpx" height="91.12rpx"></u-image>
								<view class="">
									点击上传图片
								</view>
							</view>

						</view>
					</view>
				</view>

			</u--form>
		</view>


		<u-action-sheet :show="show" keyName="name" closeOnClickOverlay :actions="columns" title="请选择"
			@close="show = false" @select="leavaType1">

		</u-action-sheet>
		<u-action-sheet :show="show1" keyName="name" :actions="columns1" title="请选择" @close="show1 = false"
			@select="leavaType2">
		</u-action-sheet>
		<u-action-sheet :show="show2" keyName="name" :actions="columns2" title="请选择" @close="show2 = false"
			@select="leavaType3">
		</u-action-sheet>
		<u-action-sheet :show="show3" keyName="name" :actions="columns3" title="请选择" @close="show3 = false"
			@select="leavaType4">
		</u-action-sheet>
		<u-action-sheet :show="show4" keyName="name" :actions="columns4" title="请选择" @close="show4 = false"
			@select="leavaType5">
		</u-action-sheet>
		<u-action-sheet :show="show5" keyName="name" :actions="columns5" title="请选择" @close="show5 = false"
			@select="leavaType6">
		</u-action-sheet>
		<!-- <view class="up-img confim-btn">
		+上传播种图片
	</view> -->
		<view class="confirm">
			<view class="confirm-btn" style="color: white;background-color: #0AA565;" @click="addFn">
				完成添加
			</view>

		</view>
		<!-- <view class="today-btn confim-btn" @tap="sowFn">
			今日播种
		</view> -->


	</view>

</template>

<script setup>
	import uplodeImg from "@/utils/uplodeImg.js"
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		 onReady
	} from "@dcloudio/uni-app"


	import {
		addland,
		province,
		city,
		county,
		towns,
		villages,
		groups
	} from '@/api/file.js'

	const form = ref(null);
	const formData = ref({
		title: '',
		area: '',
		province_code: '',
		city_code: '',
		county_code: '',
		code: '',
		village_code: '',
		group_code: '',
		master_name: '',
		master_phone: ''
	})
	const rules = reactive({
		title: {
			type: 'string',
			required: true,
			message: '请填写土地名称',
			trigger: ['blur']
		},
		area: {
			type: 'string',
			required: true,
			message: '请填写土地面积',
			trigger: ['blur', 'change']
		},
		province_code: {
			type: 'string',
			required: true,
			message: '请请选择所在省份',
			trigger: ['blur', 'change']
		},
		city_code: {
			type: 'string',
			required: true,
			message: '请选择所在城市',
			trigger: ['blur', 'change']
		},
		county_code: {
			type: 'string',
			required: true,
			message: '请选择所在区县',
			trigger: ['blur', 'change']
		},
		town_code: {
			type: 'string',
			required: true,
			message: '请选择所在镇街',
			trigger: ['blur', 'change']
		},
		village_code: {
			type: 'string',
			required: true,
			message: '请选择所在乡村',
			trigger: ['blur', 'change']
		},
		group_code: {
			type: 'string',
			required: true,
			message: '请选择小队',
			trigger: ['blur', 'change']
		},
		master_name: {
			type: 'string',
			required: true,
			message: '请天下负责人',
			trigger: ['blur', 'change']
		},
		master_phone: [{
				required: true,
				message: '请输入手机号',
				trigger: ['change', 'blur'],
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// this.$u.test.mobile()就是返回true或者false的
					// return this.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				// 触发器可以同时用blur和change
				trigger: ['change', 'blur'],
			}
		],
	})
	
	
	const province_name = ref(null)
	const city_name = ref(null)
	const county_name = ref(null)
	const town_name = ref(null)
	const village_name = ref(null)
	const group_name = ref(null)
	const show = ref(false)
	const show1 = ref(false)
	const show2 = ref(false)
	const show3 = ref(false)
	const show4 = ref(false)
	const show5 = ref(false)
	const columns = reactive([])
	const columns1 = reactive([])
	const columns2 = reactive([])
	const columns3 = reactive([])
	const columns4 = reactive([])
	const columns5 = reactive([])
	const provincen = () => {
		province().then((res) => {
			columns.splice(0, columns.length, ...res.data.map((step, index) => {
				return {
					name: step.province_name,
					id: step.province_code,
				};
			}));

		});
	}

	const cityn = (id) => {
		console.log(id)
		city({
			province_code: id
		}).then((res) => {
			columns1.splice(0, columns.length, ...res.data.map((step, index) => {
				return {
					name: step.city_name,
					id: step.city_code,
				};
			}));

		});
	}
	const countyn = (id) => {
		county({
			city_code: id

		}).then((res) => {
			columns2.splice(0, columns.length, ...res.data.map((step, index) => {
				return {
					name: step.county_name,
					id: step.county_code,

				};
			}));

		});
	}



	const townsn = (id) => {
		towns({
			county_code: id
		}).then((res) => {
			columns3.splice(0, columns.length, ...res.data.map((step, index) => {
				return {
					name: step.town_name,
					id: step.town_code,

				};
			}));

		});
	}


	const villagesn = (id) => {
		villages({
			town_code: id
		}).then((res) => {
			columns4.splice(0, columns.length, ...res.data.map((step, index) => {
				return {
					name: step.village_name,
					id: step.village_code,

				};
			}));

		});
	}

	const groupsn = () => {
		groups().then((res) => {
			columns5.splice(0, columns.length, ...res.data.map((step, index) => {
				return {
					name: step.group_name,
					id: step.group_code,
				};
			}));

		});
	}
	// 地址  省 市  街道 乡村 小队

	const isshow1 = () => {
		show.value = true
	}
	const isshow2 = () => {

		show1.value = true
	}
	const isshow3 = () => {
		show2.value = true
	}
	const isshow4 = () => {
		show3.value = true
	}
	const isshow5 = () => {
		show4.value = true

	}
	const isshow6 = () => {
		show5.value = true
	}

	const leavaType1 = (e) => {
		console.log('Received value:', e)
		province_name.value = e.name
		formData.province_code = e.id
		cityn(e.id)

	}
	const leavaType2 = (e) => {
		city_name.value = e.name
		formData.city_code = e.id
		countyn(e.id)
	}

	const leavaType3 = (e) => {
		county_name.value = e.name
		formData.county_code = e.id
		townsn(e.id)
	}
	const leavaType4 = (e) => {
		town_name.value = e.name
		formData.town_code = e.id
		villagesn(e.id)
	}
	const leavaType5 = (e) => {
		village_name.value = e.name
		formData.village_code = e.id
		groupsn()
	}
	const leavaType6 = (e) => {
		group_name.value = e.name
		formData.group_code = e.id

	}






	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const addFn = () => {
		console.log('11111');
		form.value.validate((valid) => {
			console.log(valid);
			if (valid) {
				uni.showToast({
					icon: "none",
					title: "表单验证通过"
				})

				addland(this.formData).then((res) => {
					console.log(res)
				})
			} else {
				uni.$u.toast('校验失败')
			}
		})
		// form.value.validate().then(res => {
		// 	console.log(6)
		// }).catch(errors => {
		// 	uni.$u.toast('校验失败')
		// })
		// console.log()
		// return
		// this.$refs.form.validate(valid).then(res => {
		// 	console.log(valid)
		// 	uni.$u.toast('校验通过')
		// }).catch(errors => {
		// 	uni.$u.toast('校验失败')
		// })
		// navgo('/pages/index/index')
	}

	const updateImgFn = async () => {
		let res = await uplodeImg()
		formData.buy_cert = res.data.image
	}
	onLoad((options) => {

		provincen()
	})
</script>

<style lang='scss' scoped>
	.tit {
		display: flex;
		justify-content: space-between;
	}

	.card-li-tit {
		margin-bottom: 20rpx;
	}

	.confim-btn {
		margin: 0 auto;
		width: 196.26rpx;
		height: 66.59rpx;
		/* border: ; */
		border: #00A15E 1px solid;
		color: #00A15E;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
	}

	.up-img {
		width: 341.71rpx
	}

	.today-btn {
		width: 588.79rpx;
		background-color: #00A15E;
		color: white;
		position: fixed;
		bottom: 40rpx;
		/* transform: ; */
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(to right, #00A15E, #4CC593);
		/* margin: 0 auto; */
	}

	.code-img {
		background-color: #F4F4F4;
		height: 350.47rpx;
		position: relative;
		margin-bottom: 100rpx;

		.carime-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
		}

	}

	.confirm {
		position: fixed;
		height: 84.11rpx;
		display: flex;
		bottom: 30rpx;
		width: 750rpx;

		.confirm-btn {
			width: 315.42rpx;
			height: 84.11rpx;
			border: #00A15E 1px solid;
			margin: 0 auto;
			border-radius: 80rpx;
			text-align: center;
			line-height: 84rpx;
		}
	}
</style>