<template>
	<div>
		<el-dialog :types="types" :visible.sync="showFormDia" width="70%" height="600px" :title="title"
			:before-close="handleClose">


			<!-- <el-form :model="paramsYq" ref="formInfo" label-width="150px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="报警测站编码：" prop="STCD">
							{{paramsYq.STCD}}
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="数据上报时间：" prop="TM">
							{{formatDate(paramsYq.TM)}}
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="报警等级：" prop="warnGrade">
							{{paramsYq.warnGradesss}}
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="报警时段：" prop="warnSd">
							{{paramsYq.warnSdsss}}
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="报警雨量：" prop="warnVal">
							{{paramsYq.warnVal}}
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="日降雨量：" prop="DYP">
							{{paramsYq.currentValue}}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form> -->

			<el-row v-if="TwoData" class="row-content" :gutter="30">
				<el-col :span="24" style="overflow-y: auto; height: 100%">
					<el-row :gutter="2">
						<el-col class="detail-item" :span="8">
							<div class="label">蓄水量(百万m³)::</div>
							<div class="value">{{ tableDataTwo.w || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">库下水位(m):</div>
							<div class="value">{{ tableDataTwo.blrz || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">入库流量(m³/s):</div>
							<div class="value">{{ tableDataTwo.inq || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">出库流量(m³/s):</div>
							<div class="value">{{ tableDataTwo.otq || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">库水位(m):</div>
							<div class="value">{{ tableDataTwo.rz || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">测流方法:</div>
							<div class="value">{{ tableDataTwo.inqdr || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">库水水势:</div>
							<div class="value">{{ tableDataTwo.rwptn || '--' }}</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<!-- 弹框固定内容 -->
			<el-row  class="row-content" :gutter="30">
				<el-col :span="24" style="overflow-y: auto; height: 100%">
					<el-row :gutter="2">
						<el-col class="detail-item" :span="8">
							<div class="label">报警测站编码:</div>
							<div class="value">{{ paramsYq.STCD || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">数据上报时间:</div>
							<div class="value">{{ formatDate(paramsYq.tm) || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">报警等级:</div>
							<div class="value">{{ paramsYq.warnGradesss || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8" v-if="this.info.warnType==1">
							<div class="label">报警时段:</div>
							<div class="value">{{ paramsYq.warnSdsss || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8" v-if="this.info.warnType==1">
							<div class="label">预警阈值:</div>
							<div class="value">{{ paramsYq.warnVal  || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8" v-if="this.info.warnType==1">
							<div class="label">报警雨量:</div>
							<div class="value">{{ this.paramsYq[this.paramsYq.warnSd] || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8" v-if="this.info.warnType==3||this.info.warnType==2">
							<div class="label">当前水位:</div>
							<div class="value">{{ paramsYq.currentValue || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8" v-if="this.info.warnType==3||this.info.warnType==2">
							<div class="label">水位阈值:</div>
							<div class="value">{{ paramsYq.warnVal  || '--' }}</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<el-row v-if="FourData" class="row-content" :gutter="30">
				<el-col :span="24" style="overflow-y: auto; height: 100%">
					<el-row :gutter="2">
						<el-col class="detail-item" :span="8">
							<div class="label">渗流量(L/s):</div>
							<div class="value">{{ tableDataFour.spqn || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">标准水温渗流量(L/s):</div>
							<div class="value">{{ tableDataFour.stspqn || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">时间:</div>
							<div class="value">{{ tableDataFour.tm || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">报警等级:</div>
							<div class="value">{{ tableDataFour.warnGrade || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">报警阈值:</div>
							<div class="value">{{ tableDataFour.warnVal || '--' }}</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<el-row v-if="FiveData" class="row-content" :gutter="30">
				<el-col :span="24" style="overflow-y: auto; height: 100%">
					<el-row :gutter="2">
						<el-col class="detail-item" :span="8">
							<div class="label">测压管水位(m):</div>
							<div class="value">{{ tableDataFive.pztbwl || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">渗流压力水位(m):</div>
							<div class="value">{{ tableDataFive.spprwl || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">时间:</div>
							<div class="value">{{ tableDataFive.mstm || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">报警等级:</div>
							<div class="value">{{ tableDataFive.warnGrade || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">报警阈值:</div>
							<div class="value">{{ tableDataFive.warnVal || '--' }}</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<el-row v-if="SixData" class="row-content" :gutter="30">
				<el-col :span="24" style="overflow-y: auto; height: 100%">
					<el-row :gutter="2">
						<el-col class="detail-item" :span="8">
							<div class="label">X方向水平位移速度(mm/h):</div>
							<div class="value">{{ tableDataSix.dx || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">Y方向水平位移速度(mm/h):</div>
							<div class="value">{{ tableDataSix.dy || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">垂直方向水平位移速度(mm/h):</div>
							<div class="value">{{ tableDataSix.dz || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">X向水平位移(mm):</div>
							<div class="value">{{ tableDataSix.xrds || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">Y向水平位移(mm):</div>
							<div class="value">{{ tableDataSix.yrds || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">垂直向水平位移(mm):</div>
							<div class="value">{{ tableDataSix.zrds || '--' }}</div>
						</el-col>
						<el-col class="detail-item" :span="8">
							<div class="label">时间:</div>
							<div class="value">{{ tableDataSix.tm || '--' }}</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="handleClose">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import req from '@/request.js'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	export default {
		name: 'deviceForm-dialog',
		props: {
			showFormDia: {
				type: Boolean,
				default: false
			},
			types: {
				type: Object,
				defalut: {}
			}
		},
		data() {
			return {
				warnSds: [{
						value: 'pn10',
						warnSdMsg: '10分钟时段降水量'
					},
					{
						value: 'pn30',
						warnSdMsg: '30分钟时段降水量'
					},
					{
						value: 'p1',
						warnSdMsg: '1小时时段降水量'
					},
					{
						value: 'p3',
						warnSdMsg: '3小时时段降水量'
					},
					{
						value: 'p6',
						warnSdMsg: '6小时时段降水量'
					},
					{
						value: 'p12',
						warnSdMsg: '12小时时段降水量'
					},
					{
						value: 'dyp',
						warnSdMsg: '日降雨量'
					}
				],
				info: this.types,
				tableDataOne: [], //雨情列表
				tableDataTwo: [], //水库水位列表
				tableDataThree: [], //河道水位列表
				tableDataFour: [], //渗流列表
				tableDataFive: [], //渗压列表
				tableDataSix: [], //位移列表
				oneData: false,
				TwoData: false,
				ThreeData: false,
				FourData: false,
				FiveData: false,
				SixData: false,
				params: {},
				title: null,
				inqdrs: [], //测流方法2
				rwptns: [], //水势2
				warnGrades: [], //报警等级
				paramsYq: {
					// STCD: null, //报警测站编码
					// TM: '', //数据上报时间
					// DYP: '', //日降雨量
					// warnGradesss: '', //报警等级
					// warnSdsss: '', //报警时段
					// warnVal: '' //报警雨量
				}
			}
		},
		created() {
			
			this.warnGrades = dictUtils.getDictItemsFromCache('yjdj')
			this.getData()
			this.getSysDict()//字典

		},
		mounted() {},
		methods: {
			formatDate(timestamp) {
				var date = new Date(timestamp)
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
				var H = date.getHours() + ':'
				var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
				var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
				return Y + M + D + H + M2 + S
			},
			getData() {
				this.title="详情"
				this.tableDataOne = [this.types]
				console.log(this.tableDataOne);
				this.paramsYq = this.tableDataOne[0]
				this.warnSds.forEach(w => {
					if (this.tableDataOne[0].warnSd == w.value) {
						this.paramsYq.warnSdsss = w.warnSdMsg
					}
				})
				this.warnGrades.forEach(d => {
					if (this.tableDataOne[0].warnGrade == parseInt(d.value)) {
						this.paramsYq.warnGradesss = d.name
					}
				})
				// switch (this.info.warnType) {
				// 	case '1':
				// 		this.oneData = true
				// 		this.TwoData = false
				// 		this.ThreeData = false
				// 		this.FourData = false
				// 		this.FiveData = false
				// 		this.SixeData = false
				// 		this.$nextTick(() => {
				// 			// this.types={
				// 			// 	currentValue:41,
				// 			// 	dyp:0,
				// 			// 	p1:41,
				// 			// 	p3:42,
				// 			// 	p6:43,
				// 			// 	p12:44,
				// 			// 	warnSd:'p3',
				// 			// 	tm:1655955600000,
				// 			// 	warnGrade:1,
				// 			// 	warnType:1,
				// 			// 	warnVal:22
				// 			// }
				// 			console.log(this.types);
				// 			this.tableDataOne = [this.types]
				// 			console.log(this.tableDataOne);
				// 			this.paramsYq = this.tableDataOne[0]
				// 			this.warnSds.forEach(w => {
				// 				if (this.tableDataOne[0].warnSd == w.value) {
				// 					this.paramsYq.warnSdsss = w.warnSdMsg
				// 				}
				// 			})
				// 			this.warnGrades.forEach(d => {
				// 				if (this.tableDataOne[0].warnGrade == parseInt(d.value)) {
				// 					this.paramsYq.warnGradesss = d.name
				// 				}
				// 			})



				// 		})
				// 		break
				// 	case '2':
				// 		this.TwoData = true
				// 		this.oneData = false
				// 		this.ThreeData = false
				// 		this.FourData = false
				// 		this.FiveData = false
				// 		this.SixeData = false
				// 		this.$nextTick(() => {
				// 			this.tableDataTwo = [this.types]
				// 			this.paramsYq = this.tableDataThree[0]
				// 			this.warnSds.forEach(w => {
				// 				if (this.tableDataThree[0].warnSd == w.value) {
				// 					this.paramsYq.warnSdsss = w.warnSdMsg
				// 				}
				// 			})
				// 			this.warnGrades.forEach(d => {
				// 				if (this.tableDataThree[0].warnGrade == d.value) {
				// 					this.paramsYq.warnGradesss = d.name
				// 				}
				// 			})
				// 		})
				// 		break
				// 	case '3':
				// 		// this.ThreeData = true
				// 		// this.TwoData = false
				// 		// this.oneData = false
				// 		// this.FourData = false
				// 		// this.FiveData = false
				// 		// this.SixeData = false
				// 		// this.$nextTick(() => {
				// 		// 	this.tableDataThree = [this.types]
				// 		// 	this.paramsYq = this.tableDataThree[0]
				// 		// 	this.warnSds.forEach(w => {
				// 		// 		if (this.tableDataThree[0].warnSd == w.value) {
				// 		// 			this.paramsYq.warnSdsss = w.warnSdMsg
				// 		// 		}
				// 		// 	})
				// 		// 	this.warnGrades.forEach(d => {
				// 		// 		if (this.tableDataThree[0].warnGrade == d.value) {
				// 		// 			this.paramsYq.warnGradesss = d.name
				// 		// 		}
				// 		// 	})
				// 		// })
				// 		break
				// 	case '4':
				// 		this.FourData = true
				// 		this.ThreeData = false
				// 		this.TwoData = false
				// 		this.oneData = false
				// 		this.FiveData = false
				// 		this.SixeData = false
				// 		this.$nextTick(() => {
				// 			this.tableDataFour = this.types
				// 		})
				// 		break
				// 	case '5':
				// 		this.FiveData = true
				// 		this.FourData = false
				// 		this.ThreeData = false
				// 		this.TwoData = false
				// 		this.oneData = false
				// 		this.SixeData = false
				// 		this.$nextTick(() => {
				// 			this.tableDataFive = this.types
				// 		})
				// 		break
				// 	case '6':
				// 		this.SixData = true
				// 		this.FiveData = false
				// 		this.FourData = false
				// 		this.ThreeData = false
				// 		this.TwoData = false
				// 		this.oneData = false
				// 		this.$nextTick(() => {
				// 			this.tableDataSix = this.types
				// 		})
				// 		break
				// 	default:
						
				// }
			},
			getSysDict() {
				let portal = window.context.portal
				return new Promise((resolve, reject) => {
					req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
						response => {
							this.inqdrs = response.data.clff //2预警等级
							this.rwptns = response.data.ss //2水势
							this.flwchrcds = response.data.hstzm
							if (this.types.warnType === '2') {
								this.inqdrs.forEach(e => {
									if (e.value === this.types.inqdr) {
										this.types.inqdr = e.name
									}
								})
								this.rwptns.forEach(e => {
									if (e.value === this.types.rwptn) {
										this.types.rwptn = e.name
									}
								})
							} else if (this.types.warnType === '3') {
								this.flwchrcds.forEach(e => {
									if (e.value === this.types.flwchrcd) {
										this.types.flwchrcd = e.name
									}
								})
								this.rwptns.forEach(e => {
									if (e.value === this.types.rwptn) {
										this.types.rwptn = e.name
									}
								})
							} else if (this.types.warnType === '4') {
								this.warnGrades.forEach(e => {
									if (e.value === this.types.warnGrade) {
										this.types.warnGrade = e.name
									}
								})
							} else if (this.types.warnType === '5') {
								this.warnGrades.forEach(e => {
									if (e.value === this.types.warnGrade) {
										this.types.warnGrade = e.name
									}
								})
							}
						},
						error => {
							reject(error)
						}
					)
				})
			},
			handleClose() {
				this.$emit('closeFormDiao')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.row-content {
		min-height: 200px;
	}

	.text {
		color: #333;
		font-weight: bold;
		height: 100%;
	}

	.text:before {
		content: '';
		display: inline-block;
		vertical-align: top;
		margin-right: 8px;
		height: 15px;
		width: 4px;
		background-color: #3088e0;
	}

	.title {
		font-size: 18px;
		margin: 15px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		font-weight: bold !important;
	}

	.row-content {
		padding: 5px 10px;

		.detail-item {
			display: flex;
			margin-bottom: 20px;

			.label {
				min-width: 130px;
				color: #999999;
			}

			.long-label {
				width: 220px;
			}
		}
	}

	.no-date {
		text-align: center;
		min-height: 30px;
	}
</style>
