<template>
	<view class="pageWrapper">
		<!-- <uni-combox label="engineeringName" :candidates="selec
		tListLv1" placeholder="请选择engineeringName" v-model="form['engineeringName']"></uni-combox> -->
		<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>
		<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">
			<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">
			<uni-col :span="6" class="_title">
				<view>实测时间</view>
			</uni-col>
			<uni-col :span="16">
				<view class="_content">
					<view>{{form['realTestTime'] || '-'}}</view>
				</view>
			</uni-col>
		</uni-row>
		<uni-row class="demo-uni-row mb-10">
			<uni-col :span="22"  style="border: 1px solid gainsboro;">
					<switch checked style="transform:scale(0.7)" />不显示实测结果直接保存
			</uni-col>
		</uni-row>
		<uni-row class="demo-uni-row mb-10">
			<uni-col :span="6" class="_title">
				<view class="">
					开始测量
				</view>
			</uni-col>
			<uni-col :span="6" :push="10">
				<view class="_title">
					<view class="">
						结束测量
					</view>
				</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				form:{
					'engineeringName': '',
					'middleSectionName': '',
					'segmentName': '',
					'alignmentLineName': '',
					'boreholeNumber': '',
					'throughHole': '',
					'designHoleDepth': '',
					'designInclination': '',
					'realTestHoleDepth': '',
					'realTestInclination': '',
					'realTestTime': '2024-11-21 14:08',
				},
				dataList: [],
				selectListLv1: [],
				selectListLv2: [],
				selectListLv3: [],
				selectListLv4: [],
				selectListLv5: [],
			}
		},
		onLoad() {
			this.dataList = uni.getStorageSync('importDataList')
			this.getSelectListLv1()
		},
		methods: {
			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.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.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.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){
				 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
					}
				})
				// const dataArr = this.dataList
				// // 获取第一个数据列表
				// this.selectListLv5 =  getCascadeList(dataArr, 'alignmentLineName', prevLvVal, 'boreholeNumber').map((item)=>{
				// 	return {
				// 		text: item,
				// 		value: item
				// 	}
				// })
			},
			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']
				})
				if(selectedRows.length === 1){
					this.form['throughHole'] = selectedRows[0]['throughHole']
					this.form['designHoleDepth'] = selectedRows[0]['designHoleDepth']
					this.form['designInclination'] = selectedRows[0]['designInclination']
				}
			},
		}
	}
	
	/**
	 * 处理级联数据方法
	 */
	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">
.pageWrapper{
	width: 100vw;
	height: 90vh;
	padding: 20rpx;
	background-color: #fff;
}
.mb-10{
	margin-bottom: 10rpx;
}
._title{
	border: 1px solid lightgray; height: 70rpx; text-align: center;line-height: 70rpx;margin-right: 10rpx;
}

._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: 0;
		top: 0;
		text-align: center;
		line-height: 70rpx;
	}
}
.angle{
	&:after{
		content: '°';
	}
}
.unaffix{
	&:after{
		display: none;
	}
}
</style>