<!--水电站-->
<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> -->
				<div class="section-container">
					<el-table :data="tableData" height="100%" style="width:100%" stripe border size="mini" :row-class-name="tableRowClassName">
						<el-table-column width="150"  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 width="90"  prop="fsltdz" label="阈值" show-overflow-tooltip>
						</el-table-column>
						<el-table-column  prop="level" label="报警等级" show-overflow-tooltip>
						</el-table-column>

					</el-table>
				</div>
	</div>
</template>

<script>
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
export default {
	name: 'EcologicalFlowModel',
	props: {
		currentPoint: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},
	data () {
		return {
			activeName: '测站详情',
			params: {
				appTypeList: [],
				endTime: "",
				id: "",
				mpcd: "",
				periodTime: "",
				rscd: "",
				startTime: "",
				stcd: "",
				stlc: "",
				stnm: "",
				sttp: "",
				sttpList: [],
				usfl: ""
				
			},
			tableData: [],
			yjdj:[]
		}
	},
	inject: ['mapData'],
	created () {
		let mapData = this.mapData()
		this.districtData = this.originData
		this.L = mapData.L
		this.map = mapData.map
		this.yjdj = dictUtils.getDictItemsFromCache('yjdj')
		// this.getFlowList()
	},
	watch: {
		currentPoint: {
			handler (newVal) {
				this.getFlowList()
				this.activeName = '测站详情'
			},
		}
	},
	mounted () { },
	beforeDestroy () { },
	methods: {
		handleClick (tab, event) {
		},
		engStat (val) {
			let name
			let gcjsqk = dictUtils.getDictItemsFromCache('gcjsqk')
			gcjsqk.forEach(e => {
				if (e.value == val) {
					name = e.name
				}
			})
			return 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';
		    }
		},
		getFlowList () {
			console.log(this.currentPoint);
			this.params.stcd = this.currentPoint.stcd
			this.params.sttp = this.currentPoint.sttp
			gisMap.hdswLatestList(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
							}
						})
					})
				}
			})
		}

	},
}
</script>

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

.section-container {
	width: 420PX;
}
/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>
