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

		<view class="body-wrapper">
			<view class="sumary-title">
				手动填写数据
			</view>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>工程名称</view>
				</uni-col>
				<uni-col :span="16">
					<uni-data-select v-model="form.engineeringName" :localdata="selectListLv1" :clear="false"
						@change="changeLv1"></uni-data-select>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>中段名称</view>
				</uni-col>
				<uni-col :span="16">
					<uni-data-select v-model="form.middleSectionName" :localdata="selectListLv2" :clear="false"
						@change="changeLv2"></uni-data-select>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>分段名称</view>
				</uni-col>
				<uni-col :span="16">
					<uni-data-select v-model="form['segmentName']" :localdata="selectListLv3" :clear="false"
						@change="changeLv3"></uni-data-select>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>排位线名称</view>
				</uni-col>
				<uni-col :span="16">
					<uni-data-select v-model="form['alignmentLineName']" :localdata="selectListLv4" :clear="false"
						@change="changeLv4"></uni-data-select>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>炮孔编号</view>
				</uni-col>
				<uni-col :span="16">
					<uni-data-select v-model="form['boreholeNumber']" :localdata="selectListLv5" :clear="false"
						@change="changeLv5"></uni-data-select>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>透孔</view>
				</uni-col>
				<uni-col :span="16">
					<view class="_content unaffix">
						{{form['throughHole'] || '-'}}
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>设计孔深</view>
				</uni-col>
				<uni-col :span="16">
					<view class="_content">
						{{form['designHoleDepth'] || '-'}}
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>设计倾角</view>
				</uni-col>
				<uni-col :span="16">
					<view class="_content angle">
						<view>{{form['designInclination'] || '-'}}</view>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<view class="body-wrapper auto">
			<view class="sumary-title">
				自动更新数据
			</view>
			<uni-row class="demo-uni-row mb-10">
				<uni-col :span="6" class="_title">
					<view>实测孔深</view>
				</uni-col>
				<uni-col :span="16">
					<view class="_content">
						{{form['realTestHoleDepth'] || '-'}}
					</view>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row mb-10 demo-uni-row-unborder">
				<uni-col :span="6" class="_title">
					<view>实测倾角</view>
				</uni-col>
				<uni-col :span="16">
					<view class="_content angle">
						<view>{{form['realTestInclination'] || '-'}}</view>
					</view>
				</uni-col>
			</uni-row>
			<!-- <uni-row class="demo-uni-row mb-10 demo-uni-row-unborder">
				<uni-col :span="6" class="_title">
					<view>实测时间</view>
				</uni-col>
				<uni-col :span="16">
					<view class="_content unaffix">
						<view>{{form['realTestTime'] || '-'}}</view>
					</view>
				</uni-col>
			</uni-row> -->

		</view>
		<!-- <view style="display: flex; justify-content: flex-end; align-items: center; margin-right: 20rpx;padding-top: 10rpx;">
			<switch checked style="transform:scale(0.7)" @change="showResultChange" />不显示实测结果直接保存
		</view> -->
		<view class="footer-wrapper" v-show="connected">
			<view class="funcBtn" :class="{loading: btnLoading}" @tap="gosend('START')">
				{{btnLoading ? '测量中':'开始测量'}}
			</view>
			<view class="funcBtn end" @tap="gosend('STOP')">
				结束测量
			</view>

		</view>

		<view class="" v-show="!connected" style="text-align: center; color: darkgray; margin-top:20rpx;">
			{{ pageLoadText }}
		</view>
		<!-- <button @click="showResultModal">点击模态框显示</button> -->
		<!-- <uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" >
				<view class="_header">
					孔实测结果
				</view>
				<view class="_body">
					<p>实测孔深： <span>{{form['realTestHoleDepth']|| '-'}}m</span></p>
					<p>实测倾角： <span>{{form['realTestInclination']|| '-'}}°</span></p>
				</view>
				<view class="funcBtn _btn" @click="saveTestResult">
					保存测量结果
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import CustomNavbar from '@/pages/component/CustomNavbar.vue';
	import { blueToothMixin } from '../../common/mixin.js'
	import {
		getCurrentTime,
		showCustomModal,
	} from '../../common/util.js'
	export default {
		mixins: [blueToothMixin],
		components: {
			CustomNavbar,
		},
		data() {
			return {
				navBarTitle: '炮孔测量',
				redirectUrl: '/pages/home/blueSearch?refer=blueMeasure',
				// 表单数据相关
				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.getSelectListLv1()
			this.initLink()
		},
		methods: {
			changeLvCommonReset(lvNum) { // 下拉列表值改变，清空级联数据公共方法
				let newFildArr = []
				let newDataListSelectArr = []

				let formFieldArr = [
					'engineeringName', 'middleSectionName', 'segmentName',
					'alignmentLineName', 'boreholeNumber',
					'throughHole', 'designHoleDepth', 'designInclination'
				]


				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] = []
				});

			},
			getSelectListLv1() {
				const dataArr = JSON.parse(JSON.stringify(this.dataList))
				// 获取第一个数据列表
				this.selectListLv1 = getCascadeList(dataArr, {
					engineeringName: null
				}).map((item) => {
					return {
						text: item.engineeringName,
						value: item.engineeringName
					}
				})
			},
			changeLv1(e) {
				// console.log("e:", e);
				this.changeLvCommonReset(1)

				this.getSelectListLv2(e)

			},

			getSelectListLv2(prevLvVal) {
				const dataArr = JSON.parse(JSON.stringify(this.dataList))
				this.selectListLv2 = getCascadeList(dataArr, {
					engineeringName: prevLvVal,
				}).map((item) => {
					return {
						text: item.middleSectionName,
						value: item.middleSectionName
					}
				})
				//console.log('this.selectListLv2', this.selectListLv2)
			},
			changeLv2(e) {
				//console.log("e:", e);

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

			getSelectListLv3(prevLvVal) {
				const dataArr = JSON.parse(JSON.stringify(this.dataList))
				this.selectListLv3 = getCascadeList(dataArr, {
					engineeringName: this.form.engineeringName,
					middleSectionName: prevLvVal
				}).map((item) => {
					return {
						text: item.segmentName,
						value: item.segmentName
					}
				})
			},
			changeLv3(e) {
				//console.log("e:", e);
				this.changeLvCommonReset(3)
				this.getSelectListLv4(e)
			},

			getSelectListLv4(prevLvVal) {
				const dataArr = JSON.parse(JSON.stringify(this.dataList))
				this.selectListLv4 = getCascadeList(dataArr, {
					engineeringName: this.form.engineeringName,
					middleSectionName: this.form.middleSectionName,
					segmentName: prevLvVal
				}).map((item) => {
					return {
						text: item.alignmentLineName,
						value: item.alignmentLineName
					}
				})
			},
			changeLv4(e) {
				this.changeLvCommonReset(4)
				//console.log("e:", e);
				this.getSelectListLv5(e)
			},

			getSelectListLv5(prevLvVal) {
				const dataArr = JSON.parse(JSON.stringify(this.dataList))
				this.selectListLv5 = getCascadeList(dataArr, {
					engineeringName: this.form.engineeringName,
					middleSectionName: this.form.middleSectionName,
					segmentName: this.form.segmentName,
					alignmentLineName: prevLvVal,
				}).map((item) => {
					return {
						text: item.boreholeNumber,
						value: item.boreholeNumber
					}
				})
			},
			changeLv5(e) {
				//console.log("e:", e);
				this.getDetailInfo(e)
			},
			getDetailInfo() {
				const selectedRows = this.dataList.filter((item) => {
					return item['engineeringName'] == this.form['engineeringName'] &&
						item['middleSectionName'] == this.form['middleSectionName'] &&
						item['segmentName'] == this.form['segmentName'] &&
						item['alignmentLineName'] == this.form['alignmentLineName'] &&
						item['boreholeNumber'] == this.form['boreholeNumber']
				})
				//console.log('selectedRows', selectedRows.length, JSON.stringify(selectedRows))
				if (selectedRows.length > 1) {
					showCustomModal({
						content: `匹配结果超过1条，请检查导入模板中的数据\n
						【工程名称：${selectedRows[0]['engineeringName']}】\n
						【中段名称：${selectedRows[0]['middleSectionName']}】\n
						【分段名称：${selectedRows[0]['segmentName']}】\n
						【排位线名称：${selectedRows[0]['alignmentLineName']}】\n
						【炮孔编号：${selectedRows[0]['boreholeNumber']}】\n
						`
					})
					return
				}
				if (selectedRows.length === 1) {
					this.form['throughHole'] = selectedRows[0]['throughHole']
					this.form['designHoleDepth'] = selectedRows[0]['designHoleDepth']
					this.form['designInclination'] = selectedRows[0]['designInclination']
					//console.log('this.form', this.form)
				}
			},
			saveFormData2Local() { // 保存当前表单数据到本地
				let formFieldArr = [
					'engineeringName', 'middleSectionName', 'segmentName',
					'alignmentLineName', '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.engineeringName === this.form.engineeringName &&
						item.middleSectionName === this.form.middleSectionName &&
						item.segmentName === this.form.segmentName &&
						item.alignmentLineName === this.form.alignmentLineName &&
						item.boreholeNumber === this.form.boreholeNumber
				})
				if (index > -1) {
					this.$set(this.dataList[index], 'realTestInclination', this.form.realTestInclination);
					this.$set(this.dataList[index], 'realTestHoleDepth', this.form.realTestHoleDepth);
					this.$set(this.dataList[index], 'realTestTime', getCurrentTime());
					uni.setStorageSync('importDataList', JSON.parse(JSON.stringify(this.dataList)))
					uni.showToast({
						title: '已保存测量结果',
						icon: false
					})
					this.resetForm()
				} else {
					showCustomModal({
						content: '保存失败，本地数据未匹配',
					})
				}
			},
		}
	};

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


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

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

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


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


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

<style lang="scss">
	::v-deep .uni-row::after {
		clear: both;
		width: 608rpx;
		border-bottom: 1rpx solid #E3E6EC;
		transform: translateX(28rpx);
	}
	
	
	.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;

		
		&.auto {
			margin-top: 30rpx;
			background-color: #D1E5FB;

			.demo-uni-row {
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				// border-bottom: 1px solid #F1F8FF;
			}
			::v-deep .uni-row::after {
				border-bottom-color: #FFFFFF;
			}
			.demo-uni-row-unborder::after{ // 特殊没有底部边线 处理
				border-bottom-color: transparent;
			}
		}

		.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;
		}
	}

	.mb-10 {
		margin-bottom: 10rpx;
	}

	._title {
		// border: 1px solid lightgray;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		margin-right: 10rpx;
		font-size: 29rpx;
		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;
	}


	.angle {
		&:after {
			content: '°';
		}
	}

	.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>