<!--水雨情测站-->
<template>
	<div class="infoWindow-model">
		<div class="model-title">{{ currentPoint.stnm }}</div>
		<!-- <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
			<el-tab-pane label="测站详情" name="测站详情"> -->
				<div class="section-container">
					<div class="section-item">
						<span class="text">测站名称</span>
						<span class="content"> {{currentPoint.stnm}}</span>
					</div>
					<div class="section-item">
						<span class="text">测站代码</span>
						<span class="content"> {{currentPoint.stcd}} </span>
					</div>
					<div class="section-item">
						<span class="text">应用分类</span>
						<span class="content"> {{currentPoint.appType}}</span>
					</div>
					<div class="section-item">
						<span class="text">运行状态</span>
						<span class="content"
							:style="{color:(currentPoint.usfl==0?'red':'')}">{{currentPoint.usfl==0?'异常':currentPoint.usfl==1?'正常':''}}
						</span>
					</div>
				</div>
			<!-- </el-tab-pane>
			<el-tab-pane v-if="stationType=='PP'||stationType=='RR'" label="雨情数据" name="雨情数据">
				<div class="section-container">
					<el-table :data="tableData" height="100%" style="width: 100%" stripe border size="mini"
						:row-class-name="tableRowClassName">
						<el-table-column prop="level" width="65" label="报警等级" show-overflow-tooltip>
						</el-table-column>
						<el-table-column width="135" prop="tm" label="时间" show-overflow-tooltip>
						</el-table-column>
						<el-table-column width="65" prop="p1" label="时段雨量" show-overflow-tooltip> </el-table-column>
						<el-table-column width="80" prop="dyp" label="日累计雨量" show-overflow-tooltip></el-table-column>
						<el-table-column width="65" prop="dyp" label="警戒阈值" show-overflow-tooltip>
							<template slot-scope="scope">
								{{scope.row.thresholdData?scope.row.thresholdData[0].yjz:''}}
							</template>
						</el-table-column>
						</el-table-column>
						<el-table-column width="65" prop="dyp" label="危险阈值" show-overflow-tooltip>
							<template slot-scope="scope">
								{{scope.row.thresholdData?scope.row.thresholdData[1].yjz:''}}
							</template>
						</el-table-column>
						</el-table-column>
					</el-table>
				</div>
			</el-tab-pane>
			<el-tab-pane v-else-if="stationType=='RR'||stationType=='ZZ'||stationType=='SS'" label="水情数据" name="水情数据">
				<div class="section-container">
					<el-table :data="tableData1" height="100%" style="width: 100%" stripe border size="mini"
						:row-class-name="tableRowClassName">

						<el-table-column width="160" prop="tm" label="时间" show-overflow-tooltip>
						</el-table-column>
						<el-table-column width="90" prop="zz" label="水位" show-overflow-tooltip> </el-table-column>
						<el-table-column width="90" prop="q" label="流量" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="level" label="报警等级" show-overflow-tooltip>
						</el-table-column>
					</el-table>
				</div>
			</el-tab-pane>
		</el-tabs> -->
	</div>
</template>

<script>
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import gisMap from '@/api/frontScreen/gisMap.js'
	export default {
		name: 'WRStationModel',
		props: {
			currentPoint: {
				type: Object,
				default: () => {
					return {}
				},
			},
			stationType: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				activeName: '测站详情',
				params: {
					appTypeList: [],
					endTime: "",
					id: "",
					mpcd: "",
					periodTime: "",
					rscd: "",
					startTime: "",
					stcd: "",
					stlc: "",
					stnm: "",
					sttp: "",
					sttpList: [],
					usfl: ""

				},
				tableData: [],
				tableData1: [],
				column: [],
				yjdj: [],
				// 雨量站
				columnPP: [{
						label: '报警等级',
						prop: 'warnGrade',
					},
					{
						label: '时间',
						prop: 'tm',
						width: 160,
					},
					{
						label: '时段雨量',
						prop: 'drp',
					},
					{
						label: '日累计雨量',
						prop: 'dyp',
						width: 90,
					},
				],
				// 河道水位站
				columnZZ: [{
						label: '报警等级',
						prop: 'level',
					},
					{
						label: '时间',
						prop: 'time',
						width: 160,
					},
					{
						label: '水位',
						prop: 'a',
					},
					{
						label: '流量',
						prop: 'b',
					},
				],
				// 水库水文站
				columnRR: [{
						label: '报警等级',
						prop: 'level',
					},
					{
						label: '时间',
						prop: 'time',
						width: 160,
					},
					{
						label: '水位',
						prop: 'a',
					},
					{
						label: '流量',
						prop: 'b',
					},
				],
			}
		},
		inject: ['mapData'],
		created() {
			let mapData = this.mapData()
			this.districtData = this.originData
			this.L = mapData.L
			this.map = mapData.map
			// this.getGisPptnLatestList()
			this.yjdj = dictUtils.getDictItemsFromCache('yjdj')
		},
		watch: {
			stationType: {
				handler: function(newVal, oldVal) {
					if (newVal) {
						this.column = this[`column${this.stationType}`]
					}
				},
				immediate: true, // immediate选项可以开启首次赋值监听
			},
			currentPoint: {
				handler(newVal) {
					// if (this.stationType == 'RR') {
					// 	this.getWaterRegimesk()
					// 	this.getGisPptnLatestList()
					// } else if (this.stationType == 'PP') {
					// 	this.getGisPptnLatestList()
					// } else {
					// 	this.getHdswLatestList()
					// }
					// this.activeName = '测站详情'
				},
			}
		},
		mounted() {},
		beforeDestroy() {},
		methods: {
			handleClick(tab, event) {},
			getHdswLatestList() {
				this.params.stcd = this.currentPoint.stcd
				this.params.sttp = this.currentPoint.sttp
				gisMap.hdswLatestList(this.params, res => {
					if (res.state) {
						this.tableData1 = res.value
						this.tableData1.forEach(e => {
							this.yjdj.forEach(c => {
								if (e.warnGrade == c.value) {
									e.level = c.name
								}
							})
						})
					}
				})
			},
			getGisPptnLatestList() {
				this.params.stcd = this.currentPoint.stcd
				this.params.sttp = this.currentPoint.sttp
				this.params.tmOrderASC = false
				gisMap.gisPptnLatestList(this.params, res => {
					if (res.state) {
						this.tableData = res.value
						this.tableData.forEach(e => {
							this.yjdj.forEach(c => {
								if (e.warnGrade == c.value) {
									e.level = c.name
								}
							})
						})
					}
				})
			},
			getWaterRegimesk() {
				this.params.stcd = this.currentPoint.stcd
				this.params.sttp = this.currentPoint.sttp
				gisMap.waterRegimesk(this.params, res => {
					if (res.state) {
						this.tableData1 = res.value
						this.tableData1.forEach(e => {
							this.yjdj.forEach(c => {
								if (e.warnGrade == c.value) {
									e.level = c.name
								}
							})
						})
					}
				})
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.warnGrade == 2) {
					return 'orange-row';
				} else if (row.warnGrade == 1) {
					return 'alert-row';
				} else if (row.warnGrade == 3) {
					return 'warning-row';
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import './../../../css/model.scss';

	.section-container {
		width: 480PX;
	}

	/deep/ .el-table .warning-row {
		color: red !important;

		div {
			color: red !important;
		}
	}

	/deep/ .el-table .warning-yellow {
		color: yellow !important;

		div {
			color: yellow !important;
		}
	}

	/deep/ .el-table .orange-row {
		color: #FFAE00 !important;

		div {
			color: #FFAE00 !important;
		}
	}
</style>
