<!--实时水情-->
<template>
	<div class="comp-container reservoir-container" ref="comContainer">
		<div class="search-container" ref="searchPanle">
			<el-row class="search-row">
				<el-tag size="mini" class="label" effect="dark">业务类型</el-tag>
				<el-checkbox-group v-model="form.appType1" @change="changeY">
					<el-checkbox class="check-item" v-for="item in czyyfl" :key="item.value" :label="item.value">
						{{ item.name }}</el-checkbox>
				</el-checkbox-group>
			</el-row>
			<el-row class="search-row">
				<el-tag size="mini" class="label" effect="dark">测站类型</el-tag>
				<el-checkbox-group v-model="form.appType2" @change="changeStation">
					<el-checkbox class="check-item" v-for="item in czzl.slice(1).slice(0, -1)" :key="item.value"
						:label="item.value">
						{{ item.name }}</el-checkbox>
				</el-checkbox-group>
			</el-row>
		</div>
		<el-table :data="filterData" :height="tableHeight" stripe size="mini" highlight-current-row
			:row-class-name="tableRowClassName" @row-click="rowClick">

			<el-table-column label="测站名称" prop="stnm" align="center" width="130" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="水位" prop="zz" align="center" min-width="60" show-overflow-tooltip></el-table-column>
			<el-table-column label="时间" prop="tm" align="center" min-width="140" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="报警等级" prop="level" align="center" width="80" show-overflow-tooltip>
			</el-table-column>
		</el-table>
		<RealTimeWaterModel ref="RealTimeWaterModel" v-show="showInfo" :currentPoint="currentPoint">
		</RealTimeWaterModel>
	</div>
</template>

<script>
import RealTimeWaterModel from './module/RealTimeWaterModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import {
	gisCompMixin
} from '@/mixins/gisCompMixin.js'
import req from '@/request.js'
export default {
	stnm: 'RealTimeWater',
	components: {
		RealTimeWaterModel
	},
	mixins: [gisCompMixin],
	data() {
		return {
			// 指定坐标字段
			lg: 'siteLong',
			lt: 'siteLat',
			// 信息窗model的ref
			modelName: 'RealTimeWaterModel',
			form: {
				appType1: [],
				appType2: []
			},
			typeIcon: true,
			iconTypeKey: 'warnGrade',
			iconUrl0: require('./../../../../assets/img/gis_waterlevel.png'),
			iconUrl1: require('./../../../../assets/img/gis_waterlevel1.png'),
			iconUrl2: require('./../../../../assets/img/gis_waterlevel2.png'),
			iconUrl3: require('./../../../../assets/img/gis_waterlevel3.png'),
			filterData: [],
			originData: [{
				stnm: '测站1',
				appType: '2',
				level: 1,
				num1: '120',
				num2: '100',
				siteLong: '106.484406',
				siteLat: '29.831273'
			},
			{
				stnm: '测站2',
				appType: '2',
				level: 1,
				num1: '120',
				num2: '100',
				siteLong: '106.367665',
				siteLat: '29.762964'
			},
			{
				stnm: '测站3',
				appType: '2',
				level: 1,
				num1: '120',
				num2: '100',
				siteLong: '106.448409',
				siteLat: '29.78299'
			},
			{
				stnm: '测站4',
				appType: '3',
				level: 1,
				num1: '120',
				num2: '100',
				siteLong: '106.598509',
				siteLat: '29.908239'
			},
			{
				stnm: '测站5',
				appType: '3',
				level: 1,
				num1: '120',
				num2: '100',
				siteLong: '106.434606',
				siteLat: '29.837273'
			},
			{
				stnm: '测站6',
				appType: '3',
				level: 1,
				num1: '120',
				num2: '100',
				siteLong: '106.388665',
				siteLat: '29.767964'
			},
			{
				stnm: '测站7',
				appType: '2',
				level: 1,
				num1: '120',
				num2: '100',
				siteLong: '106.498409',
				siteLat: '29.78399'
			},
			{
				stnm: '测站8',
				appType: '2',
				num1: '120',
				warnGrade: 1,
				num2: '100',
				siteLong: '106.498709',
				siteLat: '29.69799'
			}
			],
			czyyfl: [],
			czzl: [],
			currentPoint: {
				stnm: ''
			},

			params: {
				appTypeList: [],
				endTime: null,
				id: null,
				mpcd: null,
				periodTime: null,
				rscd: null,
				startTime: null,
				stcd: null,
				stlc: null,
				stnm: null,
				sttp: null,
				sttpList: [],
				usfl: null
			},
			yjdj: []
		}
	},
	created() {
		this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
		this.czzl = dictUtils.getDictItemsFromCache('czzl')
		this.yjdj = dictUtils.getDictItemsFromCache('yjdj')
	},
	mounted() {
		this.$nextTick(async () => {
			// 异步请求数据 等待数据获取 再initMarkers
			await this.getFindResList()
			this.initMarkers()
		})
		//自动刷新获取数据(1000*60*10=>毫秒*秒*分钟，此时表示为10分钟)
		this.refreshData = setInterval(() => {
			this.getFindResList()
			this.updateMarkers()
		}, 1000 * 60 * 10);
	},
	//生命周期若已设置定时器，需清空定时器beforeDestroy()
	beforeDestroy() {
		clearInterval(this.refreshData);
		this.refreshData = null;
	},
	methods: {
		tableRowClassName(row) {
			if (row.row.warnGrade == 2) {
				return 'orange-row';
			} else if (row.row.warnGrade == 1) {
				return 'alert-row';
			} else if (row.row.warnGrade == 3) {
				return 'warning-row';
			}

		},
		updateMarkers() {
			// 获得新的列表数据后清除旧的标点、重新创建地图标点
			this.searchClear = true
			this.clearMarkers()
			this.searchClear = false
			this.initMarkers()
		},
		async changeY(val) {
			this.params.appTypeList = val
			await this.getFindResList()
			this.updateMarkers()
		},
		async changeStation(val) {
			this.params.sttpList = val
			await this.getFindResList()
			this.updateMarkers()
		},
		getFindResList() {
			return new Promise((resolve, reject) => {
				gisMap.waterRegime(this.params, res => {
					if (res.state) {
						this.filterData = res.value
						this.filterData.forEach(e => {
							e.siteLong = e.lgtd
							e.siteLat = e.lttd
							if(e.tm){
								e.tm = e.tm.replace('-', '/').split('/')[1].slice(0, 11).replace('-', '/')
							}
							if (e.warnGrade) {
								this.yjdj.forEach(c => {
									if (e.warnGrade == c.value) {
										e.level = c.name
									}
								})
							} else {
								e.warnGrade = 0
							}
						})
						resolve()
					}
					reject()
				})
			})
		},

		infoWindow() {
			let sContent = this.$refs.RealTimeWaterModel.$el
			var infoWin = new L.popup({
				autoPan: true,
				maxHeight: 350,
				minWidth: 400,
				maxWidth: 500
			}).setContent(sContent)
			return infoWin
		}
	}
}
</script>

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

.reservoir-container {
	/deep/ .el-form-item--small.el-form-item {
		margin-bottom: 0px;
	}
}

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

	div {
		color: red !important;
	}
}

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

	div {
		color: yellow !important;
	}
}

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

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