<template>
	<view class="pageWrapper">
		<CustomNavbar :title="navBarTitle" goBackUrl="/pages/home/home" @gobackDeal="gobackDeal">
		</CustomNavbar>

		<view class="body-wrapper">
			<view class="demo-uni-row">
				<uni-row>
					<uni-col :span="7" class="_title">
						<view>工程名称</view>
					</uni-col>
					<uni-col :span="15">
						<uni-data-select v-model="form.productName" :localdata="selectListLv1" :clear="false"
							@change="changeLv1"></uni-data-select>
					</uni-col>
				</uni-row>
			</view>
			<view class="demo-uni-row">
				<uni-row class="demo-uni-row mb-10">
					<uni-col :span="7" class="_title">
						<view>爆区名称</view>
					</uni-col>
					<uni-col :span="15">
						<uni-data-select v-model="form.artilleryAreaName" :localdata="selectListLv2" :clear="false"
							@change="changeLv2"></uni-data-select>
					</uni-col>
				</uni-row>
			</view>
			<view class="demo-uni-row">
				<uni-row class="demo-uni-row mb-10">
					<uni-col :span="7" class="_title">
						<view>记录时间</view>
					</uni-col>
					<uni-col :span="15">
						<uni-data-select v-model="form.artilleryAreaName" :localdata="selectListLv2" :clear="false"
							@change="changeLv2"></uni-data-select>
					</uni-col>
				</uni-row>
			</view>
		</view>


		<view class="footer-wrapper">
			<view class="funcBtn end" @tap="resetForm">
				搜索
			</view>
		</view>

		<view class="" v-show="!connected" style="text-align: center; color: darkgray; margin-top:20rpx;">
			{{ pageLoadText }}
		</view>
	</view>
</template>

<script>
	import CustomNavbar from '@/pages/component/CustomNavbar.vue';
	import {
		blueToothMixin
	} from '../../common/mixin.js'
	import {
		getCurrentTime,
		showCustomToast,
		showCustomModal
	} from '../../common/util.js'
	import {
		getSelectList,
		getDetailInfo,
		saveData,
		getDict
	} from '../../api/blueToothMeasure.js'
	export default {
		mixins: [blueToothMixin],
		components: {
			CustomNavbar,
		},
		data() {
			return {
				navBarTitle: '炮孔测量',
				redirectUrl: '/pages/home/blueSearch?refer=blueMeasure',
				// 表单数据相关
				zhuangyaoDict: [],
				form: {
					'productName': '',
					'artilleryAreaName': '',
					'cannonHoleArrayNum': '',
					'cannonHoleNum': '',
					'status': '',
					'expectedDepth': '',
					'actualDepth': '',
					'actualWaterLevel': ''
				},
				dataList: [],
				selectListLv1: [],
				selectListLv2: [],
				selectListLv3: [],
				selectListLv4: [],
				selectListLv5: [],
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			uni.hideLoading()
			// this.dataList = uni.getStorageSync('importDataList') || []
			// console.log('this.dataList',JSON.stringify(this.dataList));
			this.getDictInfo()
			this.getSelectListLv1()

			// this.initLink()
		},
		methods: {
			async getDictInfo() {
				let res = await getDict({
					type: 'zhuangyao_type'
				})
				if (res) {
					this.zhuangyaoDict = res.map((item) => {
						return {
							text: item.dictLabel,
							value: item.dictValue
						}
					})
				}
			},
			changeLvCommonReset(lvNum) { // 下拉列表值改变，清空级联数据公共方法
				let newFildArr = []
				let newDataListSelectArr = []

				let formFieldArr = [
					'productName', 'artilleryAreaName', 'cannonHoleArrayNum', 'cannonHoleNum',
					'status', 'expectedDepth',
					'actualDepth', 'actualWaterLevel'
				]


				let dataListSelectArr = [
					'selectListLv1', 'selectListLv2', 'selectListLv3',
					'selectListLv4', 'selectListLv5'
				]

				// [1, 2, 3, 4, 5];  lvNum:2  => [3, 4, 5]
				newFildArr = formFieldArr.slice(lvNum);
				newFildArr.forEach((key) => {
					this['form'][key] = ''
				});
				newDataListSelectArr = dataListSelectArr.slice(lvNum);
				newDataListSelectArr.forEach((key) => {
					this[key] = []
				});

			},
			async getSelectListLv1() {
				// const dataArr = JSON.parse(JSON.stringify(this.dataList))
				// // 获取第一个数据列表
				// this.selectListLv1 = getCascadeList(dataArr, {
				// 	productName: null
				// }).map((item) => {
				// 	return {
				// 		text: item.productName,
				// 		value: item.productName
				// 	}
				// })
				const res = await getSelectList({
					productName: '',
					artilleryAreaName: '',
					cannonHoleArrayNum: '',
					cannonHoleNum: ''
				})
				console.log('响应res', res)
				this.selectListLv1 = res.map((item) => {
					return {
						text: item,
						value: item
					}
				})
			},
			changeLv1(e) {
				// console.log("e:", e);
				this.changeLvCommonReset(1)

				this.getSelectListLv2(e)

			},

			async getSelectListLv2(prevLvVal) {
				// const dataArr = JSON.parse(JSON.stringify(this.dataList))
				// this.selectListLv2 = getCascadeList(dataArr, {
				// 	productName: prevLvVal,
				// }).map((item) => {
				// 	return {
				// 		text: item.artilleryAreaName,
				// 		value: item.artilleryAreaName
				// 	}
				// })
				// //console.log('this.selectListLv2', this.selectListLv2)
				const res = await getSelectList({
					productName: prevLvVal,
					artilleryAreaName: '',
					cannonHoleArrayNum: '',
					cannonHoleNum: ''
				})
				console.log('响应res', res)
				this.selectListLv2 = res.map((item) => {
					return {
						text: item,
						value: item
					}
				})
			},
			changeLv2(e) {
				//console.log("e:", e);

				this.changeLvCommonReset(2)
				this.getSelectListLv3(e)
			},

			async getSelectListLv3(prevLvVal) {
				// const dataArr = JSON.parse(JSON.stringify(this.dataList))
				// this.selectListLv3 = getCascadeList(dataArr, {
				// 	productName: this.form.productName,
				// 	artilleryAreaName: prevLvVal
				// }).map((item) => {
				// 	return {
				// 		text: item.cannonHoleArrayNum,
				// 		value: item.cannonHoleArrayNum
				// 	}
				// })
				const res = await getSelectList({
					productName: this.form.productName,
					artilleryAreaName: prevLvVal,
					cannonHoleArrayNum: '',
					cannonHoleNum: ''
				})
				console.log('响应res', res)
				this.selectListLv3 = res.map((item) => {
					return {
						text: item,
						value: item
					}
				})
			},
			changeLv3(e) {
				//console.log("e:", e);
				this.changeLvCommonReset(3)
				this.getSelectListLv4(e)
			},

			async getSelectListLv4(prevLvVal) {
				// const dataArr = JSON.parse(JSON.stringify(this.dataList))
				// this.selectListLv4 = getCascadeList(dataArr, {
				// 	productName: this.form.productName,
				// 	artilleryAreaName: this.form.artilleryAreaName,
				// 	cannonHoleArrayNum: prevLvVal
				// }).map((item) => {
				// 	return {
				// 		text: item.cannonHoleNum,
				// 		value: item.cannonHoleNum
				// 	}
				// })
				const res = await getSelectList({
					productName: this.form.productName,
					artilleryAreaName: this.form.artilleryAreaName,
					cannonHoleArrayNum: prevLvVal,
					cannonHoleNum: ''
				})
				console.log('响应res', res)
				this.selectListLv4 = res.map((item) => {
					return {
						text: item,
						value: item
					}
				})
			},
			changeLv4(e) {
				// this.changeLvCommonReset(4)
				// //console.log("e:", e);
				// this.getSelectListLv5(e)
				this.getDetailInfo(e)
			},

			// getSelectListLv5(prevLvVal) {
			// 	const dataArr = JSON.parse(JSON.stringify(this.dataList))
			// 	this.selectListLv5 = getCascadeList(dataArr, {
			// 		productName: this.form.productName,
			// 		artilleryAreaName: this.form.artilleryAreaName,
			// 		cannonHoleArrayNum: this.form.cannonHoleArrayNum,
			// 		cannonHoleNum: prevLvVal,
			// 	}).map((item) => {
			// 		return {
			// 			text: item.boreholeNumber,
			// 			value: item.boreholeNumber
			// 		}
			// 	})
			// },
			// changeLv5(e) {
			// 	//console.log("e:", e);
			// 	this.getDetailInfo(e)
			// },
			async getDetailInfo() {
				let res = await getDetailInfo()
				if (res) {
					this.form['status'] = res['status']
					this.form['expectedDepth'] = res['expectedDepth']
					this.form['designInclination'] = res['designInclination']
					return
				}
				showCustomToast({
					title: '暂无详情信息'
				})
			},
			async saveData() { // 保存当前表单数据到本地
				let formFieldArr = [
					'productName', 'artilleryAreaName', 'cannonHoleArrayNum',
					'cannonHoleNum', 'boreholeNumber'
				]
				var validFlag = true
				for (var i = 0; i < formFieldArr.length; i++) {
					console.log('this.form[formFieldArr[i]]', i, this.form[formFieldArr[i]])
					if (!this.form[formFieldArr[i]]) {
						validFlag = false
						break;
					}
				}
				if (!validFlag) {
					showCustomModal({
						content: `手动填写数据不可为空`
					})
					return
				}
				// const index = this.dataList.findIndex((item) => {
				// 	return item.productName === this.form.productName &&
				// 		item.artilleryAreaName === this.form.artilleryAreaName &&
				// 		item.cannonHoleArrayNum === this.form.cannonHoleArrayNum &&
				// 		item.cannonHoleNum === this.form.cannonHoleNum &&
				// 		item.boreholeNumber === this.form.boreholeNumber
				// })
				if (this.form.measureDepth && this.form.shuiwei) {

					let res = await saveData({
						...this.form
					})
					// this.$set(this.dataList[index], 'actualWaterLevel', this.form.actualWaterLevel);
					// this.$set(this.dataList[index], 'actualDepth', this.form.actualDepth);
					// this.$set(this.dataList[index], 'remark', getCurrentTime());
					// uni.setStorageSync('importDataList', JSON.parse(JSON.stringify(this.dataList)))
					if (res) {
						uni.showToast({
							title: '保存成功',
							icon: false
						})
						this.resetForm()
					}
					return
				}
				showCustomModal({
					content: '孔深水位不能为空',
				})
			},
		}
	};

	/**
	 * 处理级联数据方法
	 */
	function getCascadeList(originArr = [], paramObj) {
		let sonArr = new Array()
		// let sonArr = new Set()


		if (paramObj.artilleryAreaName && paramObj.productName && paramObj.cannonHoleArrayNum && paramObj
			.cannonHoleNum) { // 返回第5级
			const tempArr = originArr.filter((item) => {
				return item.productName === paramObj.productName &&
					item.artilleryAreaName === paramObj.artilleryAreaName &&
					item.cannonHoleArrayNum === paramObj.cannonHoleArrayNum &&
					item.cannonHoleNum === paramObj.cannonHoleNum
			})
			const uniqueArray = Array.from(new Map(tempArr.map(item => [item.boreholeNumber, item])).values());
			return uniqueArray
		}

		if (paramObj.artilleryAreaName && paramObj.productName && paramObj.cannonHoleArrayNum) { // 返回第4级
			const tempArr = originArr.filter((item) => {
				return item.productName === paramObj.productName &&
					item.artilleryAreaName === paramObj.artilleryAreaName &&
					item.cannonHoleArrayNum === paramObj.cannonHoleArrayNum
			})
			const uniqueArray = Array.from(new Map(tempArr.map(item => [item.cannonHoleNum, item])).values());
			return uniqueArray
		}

		if (paramObj.artilleryAreaName && paramObj.productName) { // 返回第三级
			const tempArr = originArr.filter((item) => {
				return item.productName === paramObj.productName &&
					item.artilleryAreaName === paramObj.artilleryAreaName
			})
			const uniqueArray = Array.from(new Map(tempArr.map(item => [item.cannonHoleArrayNum, item])).values());
			return uniqueArray
		}


		if (paramObj.productName) { // 返回2级列表
			const tempArr = originArr.filter((item) => { // 二级列表基于1级选择后的值进行过滤
				return item.productName === paramObj.productName
			})
			const uniqueArray = Array.from(new Map(tempArr.map(item => [item.artilleryAreaName, item])).values());
			return uniqueArray
		}


		if (!paramObj.productName) { // 返回1级列表
			const uniqueArray = Array.from(new Map(originArr.map(item => [item.productName, item])).values());
			return uniqueArray
		}
	}
</script>

<style lang="scss">
	::v-deep .uni-select__input-placeholder {
		// placeholder样式调整
		font-size: 30rpx !important;
	}

	.inputEle {
		height: 110rpx;
		display: flex;
		align-items: center;
	}

	.uni-col-7 {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 110rpx;
	}

	.demo-uni-row {
		line-height: 70rpx;
		padding-left: 15rpx;

		.uni-select {
			height: 108rpx;
		}
	}

	.only-read-row {
		background: #E3E6EC !important;
		height: 108rpx;
		align-items: center;
		display: flex;
		line-height: 70rpx;
		position: relative;
		padding-left: 13rpx;

		&:after {
			content: '米';
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			right: 48rpx;
			top: 50%;
			transform: translateY(-50%);
			text-align: center;
			line-height: 70rpx;
			font-size: 29rpx;
			color: #000000;
		}
	}

	::v-deep .uni-row::after {
		clear: both;
		width: 608rpx;
		border-bottom: 1rpx solid #E3E6EC;
		transform: translateX(18rpx);
	}


	.pageWrapper {
		width: 100vw;
		height: calc(100vh-44rpx);
		padding-top: 44rpx;
		background: linear-gradient(180deg, #007AFF 0%, #419AFF 16%, #EFF1F4 43%);
	}

	.body-wrapper {
		margin: 0 auto;
		width: 690rpx;
		padding-top: 20rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.sumary-title {
			position: relative;
			padding-left: 50rpx;
			font-size: 32rpx;
			color: #007AFF;
			margin-top: 20rpx;
			margin-bottom: 20rpx;

			&:before {
				content: '';
				width: 16rpx;
				height: 16rpx;
				background: #007AFF;
				border-radius: 50%;
				position: absolute;
				left: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.logo-wrapper {
		display: flex;
		justify-content: center;

		image {
			width: 366rpx;
			height: 432rpx;
			margin: 0 auto;
		}
	}

	// ._title {
	// 	// border: 1px solid lightgray;
	// 	height: 70rpx;
	// 	text-align: center;
	// 	line-height: 70rpx;
	// 	margin-right: 10rpx;
	// 	font-size: 32rpx;
	// 	font-weight: bold;
	// 	color: #000000;
	// }

	._content {
		// border: 1px solid lightgray;
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 20rpx;
		position: relative;

		// &:after {
		// 	content: 'm';
		// 	width: 70rpx;
		// 	height: 70rpx;
		// 	// border-left: 1px solid lightgray;
		// 	position: absolute;
		// 	right: -12rpx;
		// 	top: 0;
		// 	text-align: center;
		// 	line-height: 70rpx;
		// 	font-size: 29rpx;
		// 	color: #000000;
		// }
	}

	.funcBtn {
		width: 280rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #007AFF;
		border-radius: 35rpx;
		text-align: center;
		font-size: 29rpx;
		color: #FFFFFF;
		border: 2px solid #007AFF;

		&.end {
			background: #FFFFFF;
			;
			color: #007AFF;
		}

		&.loading {
			opacity: 0.5;
		}
	}

	.footer-wrapper {
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
	}


	.unaffix {
		&:after {
			display: none;
		}
	}

	/**
 * 蓝牙连接互动相关
 */
	page {
		color: #333;
	}

	/*划线  */
	.line {
		background-color: blue;
		height: 5px;
		width: 100%;
	}

	.div {
		background-color: white;
		height: 10px;
		width: 10px;
	}

	.blank {
		height: 150rpx;
	}
</style>