<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['cannonHoleArrayNum']" :localdata="selectListLv3" :clear="false"
							@change="changeLv3"></uni-data-select>
					</uni-col>
				</uni-row>
			</view>
			<view class="demo-uni-row unboder">
				<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['cannonHoleNum']" :localdata="selectListLv4" :clear="false"
							@change="changeLv4"></uni-data-select>
					</uni-col>
				</uni-row>
			</view>

			<view class="only-read-row unboder">
				<uni-row class="demo-uni-row mb-10">
					<uni-col :span="7" class="_title">
						<view>设计孔深</view>
					</uni-col>
					<uni-col :span="15">
						<view class="_content">
							{{form['expectedDepth'] || '-'}}
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="demo-uni-row unboder">
				<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['status']" :localdata="zhuangyaoDict" @change="change"
							:clear="false"></uni-data-select>
					</uni-col>
				</uni-row>
			</view>
			<view class="only-read-row unboder">
				<uni-row class="demo-uni-row mb-10">
					<uni-col :span="7" class="_title">
						<view>测量孔深度</view>
					</uni-col>
					<uni-col :span="15">
						<view class="_content">
							{{actualDepth || '-'}}
						</view>
					</uni-col>
				</uni-row>
			</view>

			<view class="only-read-row unboder">
				<uni-row class="demo-uni-row mb-10 demo-uni-row-unborder">
					<uni-col :span="7" class="_title">
						<view>测量孔水位</view>
					</uni-col>
					<uni-col :span="15">
						<view class="_content">
							<view>{{actualWaterLevel || '-'}}</view>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="demo-uni-row unboder">
				<uni-row class="demo-uni-row mb-10">
					<uni-col :span="7" class="_title">
						<view>备注</view>
					</uni-col>
					<uni-col :span="15">
						<input class="uni-input inputEle" v-model="form.remark" placeholder="请输入" />
					</uni-col>
				</uni-row>
			</view>
		</view>
		<view class="footer-wrapper">
			<view class="funcBtn end" @tap="gobackDeal">
				取消
			</view>
			<view class="funcBtn save" @tap="saveData">
				保存
			</view>
		</view>

		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<image src="../../static/image/paokong/close.png" mode="" class="closeBtn" @click="closePopup"></image>
				<view class="_body">
					<view class="popup-content">
						<image src="../../static/image/paokong/success.png" mode=""></image>
						<p>保存成功</p>
					</view>
				</view>
				<view class="funcBtn _btn" @click="closePopup">
					关闭
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import CustomNavbar from '@/pages/component/CustomNavbar.vue';
	import {
		stringToBytes,
		getCurrentTime,
		showCustomToast,
		showCustomModal,
		pager
	} from '../../common/util.js'
	import {
		getSelectList,
		getDetailInfo,
		saveData,
		getDict
	} from '../../api/blueToothMeasure.js'

	import {
		mapState
	} from "vuex";
	export default {
		components: {
			CustomNavbar,
		},
		data() {
			return {
				navBarTitle: '炮孔测量',
				redirectUrl: '/pages/home/blueSearch?refer=blueMeasure',
				// 表单数据相关
				zhuangyaoDict: [],
				form: {
					'productName': '',
					'artilleryAreaName': '',
					'cannonHoleArrayNum': '',
					'cannonHoleNum': '',
					'status': '0',
					'expectedDepth': '',
					'actualDepth': '',
					'actualWaterLevel': '',
					remark: ''
				},
				dataList: [],
				selectListLv1: [],
				selectListLv2: [],
				selectListLv3: [],
				selectListLv4: [],
				selectListLv5: [],
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			uni.hideLoading()
			this.resetForm()
			this.getDictInfo()
		},
		computed: {
			...mapState(['actualDepth', 'actualWaterLevel'])
		},
		methods: {
			openPopup() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center');
			},
			closePopup() {
				this.$refs.popup.close();
			},
			change(e) { // 是否装药获取详情
				console.log("e:", e);
				this.getDetailInfo()
			},
			resetForm() {
				for (let key in this.form) {
					this.form[key] = ''
				}
				this['form']['status'] = '0'
				this.$store.commit('setMeasureVal', { // 清空测量值
					actualDepth: '',
					actualWaterLevel: ''
				})
			},
			gobackDeal() {
				// this.resetForm()
				pager.relaunchTo('/pages/home/home')
			},
			async getDictInfo() {
				let res = await getDict({
					type: 'zhuangyao_type'
				})
				if (res) {
					this.zhuangyaoDict = res.map((item) => {
						return {
							text: item.dictLabel,
							value: item.dictValue
						}
					})

					this.getSelectListLv1() // 获取以及下拉列表
				}
			},
			changeLvCommonReset(lvNum) { // 下拉列表值改变，清空级联数据公共方法
				let newFildArr = []
				let newDataListSelectArr = []

				let formFieldArr = [
					'productName', 'artilleryAreaName', 'cannonHoleArrayNum',
					'cannonHoleNum',
				]


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

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

			},
			async getSelectListLv1() {
				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 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 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 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)
			},

			async getDetailInfo(prevLvVal) {
				let res = await getDetailInfo({
					productName: this.form.productName,
					artilleryAreaName: this.form.artilleryAreaName,
					cannonHoleArrayNum: this.form.cannonHoleArrayNum,
					cannonHoleNum: prevLvVal || this.form.cannonHoleNum,
					status: this.form.status
				})
				if (res) {
					this.form['expectedDepth'] = res['expectedDepth']
					this.$store.commit('setMeasureVal', {
						actualDepth: res['actualDepth'],
						actualWaterLevel: res['actualWaterLevel']
					})
					return
				}
				showCustomToast({
					title: '暂无详情信息'
				})

			},
			async saveData() { // 保存当前表单数据到本地
				let formFieldArr = [
					'productName', 'artilleryAreaName', 'cannonHoleArrayNum',
					'cannonHoleNum', 'expectedDepth'
				]
				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
				}

				if (!this.actualDepth || !this.actualWaterLevel) {
					showCustomModal({
						content: `孔深水位不能为空`
					})
					return
				}

				this.form['actualDepth'] = this.actualDepth
				this.form['actualWaterLevel'] = this.actualWaterLevel


				let res = await saveData({
					...this.form
				})
				if (res) {
					// showCustomToast({
					// 	title: '保存成功',
					// })
					this.openPopup()
					this.resetForm()
				}
			},
		}
	};
</script>

<style lang="scss">
	
	::v-deep .uni-popup .uni-popup__wrapper{
	    display: block;
	    position: relative;
	    width: 80vw;
		border-radius: 10rpx;
		.closeBtn{
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			width: 23rpx !important;
			height: 23rpx !important;
		}
		.popup-content{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding-top: 40rpx;
			image{
				width: 390rpx;
				height: 308rpx;
			}
			p{
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #007AFF;
			}
		}
		._btn{
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}
	}
	
	::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;
		}
	}

	.unboder {
		.uni-row::after {
			border-bottom: none;
		}
	}

	.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;
		margin-top: 20rpx;
		.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;
		}
	}

	._content {
		// border: 1px solid lightgray;
		height: 110rpx;
		line-height: 110rpx;
		padding-left: 50rpx;
		position: relative;
		font-size: 29rpx;
	}

	.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;
		}
		&.save {
			background: #007AFF;
			color: #fff;
		}

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