<!--实时水情-->
<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-input style="width: 98%" clearable v-model="params.name" placeholder="请输入名称" size="mini"
					@change="changeSearch"></el-input>
			</el-row>
			<el-row class="search-row">
				<el-tag size="mini" class="label" effect="dark">户主名称</el-tag>
				<el-input style="width: 98%" clearable v-model="params.householder" placeholder="请输入名称" size="mini"
					@change="changeSearch"></el-input>
			</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="name" align="center" width="130" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="户主名称" prop="householder" align="center" min-width="60" show-overflow-tooltip></el-table-column>
			<el-table-column label="总人数" prop="peopleNum" align="center" min-width="60" show-overflow-tooltip></el-table-column>
		</el-table>
		<mountainModel ref="mountainModel" v-show="showInfo" :currentPoint="currentPoint">
		</mountainModel>
	</div>
</template>

<script>
	import mountainModel from './module/mountainModel.vue'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import flashFloods from '@/api/flashFloods.js'
	import {
		gisCompMixin
	} from '@/mixins/gisCompMixin.js'
	import req from '@/request.js'
	export default {
		stnm: 'RealTimeWater',
		components: {
			mountainModel
		},
		mixins: [gisCompMixin],
		data() {
			return {
				// 指定坐标字段
				lg: 'lng',
				lt: 'lat',
				// 信息窗model的ref
				modelName: 'mountainModel',
				iconUrl: require('./../../../../assets/img/mountain.png'),
				filterData: [],
				originData: [],
				currentPoint: {
					stnm: ''
				},
				queryParam: {
					pageBean: {
						pageSize: -1,
						page: 1,
					},
					params: {},
					querys: []
				},
				params: {
					name:'',
					householder:''
				},
				buildTypes: [],
				buildStructures:[]
			}
		},
		created() {
			this.buildTypes = dictUtils.getDictItemsFromCache('shzhfz-zfjzlx')
			this.buildStructures = dictUtils.getDictItemsFromCache('shzhfz-zfjgxs')
		},
		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 'warning-row';
				} else if (row.row.warnGrade == 1) {
					return 'alert-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 changeSearch(val) {
				this.queryParam.querys = [{
						group: "main",
						operation: "LIKE",
						parentGroup: "",
						property: "p.name_",
						relation: "AND",
						value: this.params.name
					}, {
						group: "main",
						operation: "LIKE",
						parentGroup: "",
						property: "p.householder_",
						relation: "AND",
						value: this.params.householder
					}
				]
				await this.getFindResList()
				this.updateMarkers()
			},
			async changeStation(val) {
				this.params.sttpList = val
				await this.getFindResList()
				this.updateMarkers()
			},
			getFindResList() {
				return new Promise((resolve, reject) => {
					flashFloods.ListGet(this.queryParam, res => {
						if (res.state) {
							this.filterData = res.value.rows
							this.filterData.forEach(e=>{
								this.buildTypes.forEach(b=>{
									if(e.buildType==b.value){
										e.buildTypeName=b.name
									}
								})
								this.buildStructures.forEach(s=>{
									if(e.buildStructure==s.value){
										e.buildStructureName=s.name
									}
								})
								console.log(e);
								return
							})
							resolve()
						}
						reject()
					})
				})
			},

			infoWindow() {
				let sContent = this.$refs.mountainModel.$el
				var infoWin = new L.popup({
					autoPan: true,
					maxHeight: 300,
					minWidth: 400,
					maxWidth: 600
				}).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;
		}
	}
</style>
