<!--行政区-->
<template>
	<div class="infoWindow-model">
		<div class="model-title">{{ currentPoint.stnm }}</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 prop="level" label="报警等级" show-overflow-tooltip>
				</el-table-column>
				<el-table-column width="160" prop="tm" label="时间" show-overflow-tooltip>
				</el-table-column>
				<el-table-column width="90" prop="drp" label="时段雨量" show-overflow-tooltip> </el-table-column>
				<el-table-column width="110" prop="dyp" 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 {
		props: {
			currentPoint: {
				type: Object,
				default: () => {
					return {}
				},
			},
		},
		name: 'districtModel',
		data() {
			return {
				activeName: 'first',
				params: {},
				tableData: [],
				stationData: [{
						name: '雨量站',
						num: 0,
						key: 1,
						icon: 'yuliang',
					},
					{
						name: '河道水位站',
						num: 0,
						key: 2,
						icon: 'shuiwei',
					},
					{
						name: '水库水文站',
						num: 0,
						key: 3,
						icon: 'shuiwen',
					},
					{
						name: '位移点',
						num: 0,
						key: 4,
						icon: 'weiyi',
					},
					{
						name: '渗流点',
						num: 0,
						key: 5,
						icon: 'shenliu',
					},
					{
						name: '渗压点',
						num: 0,
						key: 6,
						icon: 'shenya',
					},
				],
				engineerData: [{
						name: '水库',
						num: 0,
						key: 1,
						icon: 'shuiku',
					},
					{
						name: '水电站',
						num: 0,
						key: 3,
						icon: 'shuidianzhan',
					},
					{
						name: '堤防',
						num: 0,
						key: 4,
						icon: 'difang',
					},
				],
			}
		},
		inject: ['mapData'],
		created() {
			let mapData = this.mapData()
			this.districtData = this.originData
			this.T = mapData.T
			this.map = mapData.map
			this.yjdj = dictUtils.getDictItemsFromCache('yjdj')
		},
		watch: {
			currentPoint: {
				handler(newVal) {
					console.log(this.currentPoint);
					this.getGisPptnLatestList()
					this.activeName = 'first'
				},
			}
		},
		mounted() {},
		beforeDestroy() {
			if (this.sectionMarker && this.label) {
				this.map.removeLayer(this.sectionMarker)
				this.map.removeLayer(this.label)
				this.sectionMarker.closeInfoWindow()
			}
			if (this.polygon) {
				this.map.removeLayer(this.polygon)
			}
		},
		methods: {
			handleClick(tab, event) {
				console.log(tab, event)
			},
			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
								}
							})
						})
					}
				})
			},
			getCountStation() {
				this.params.addvcd = this.currentPoint.code
				gisMap.countStation(this.params, res => {
					if (res.state) {
						console.log(res.value);
						res.value.forEach(e => {
							this.stationData.forEach(s => {
								if (e.typeName == s.name) {
									s.num = e.count
								}
							})
							this.engineerData.forEach(g => {
								if (e.typeName == g.name) {
									g.num = e.count
								}
							})
						})
					}
				})
			},
			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: 100%;
		padding-top: 10px;
	}

	/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>
