<!--取水监测-->
<template>
	<div class="comp-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="params.waterSourceList" @change="sylxChange">
					<el-checkbox class="check-item" v-for="item in sylx" :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="params.waterPurposeList" @change="qsytChange">
					<el-checkbox class="check-item" v-for="item in qsyt" :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-click="rowClick" :cell-class-name="tableRowClassName">

			<el-table-column label="取水许可证" prop="paperName" align="center" min-width="140" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="测站名称" prop="stnm" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="累计流量" prop="flow" align="center" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="报警等级" prop="level" align="center" show-overflow-tooltip></el-table-column>
		</el-table>
		<WaterIntakeModel ref="WaterIntakeModel" v-show="showInfo" :currentPoint="currentPoint"></WaterIntakeModel>
	</div>
</template>

<script>
	import WaterIntakeModel from './module/WaterIntakeModel.vue'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import gisMap from '@/api/frontScreen/gisMap.js'
	import {
		gisCompMixin
	} from '@/mixins/gisCompMixin.js'
	export default {
		name: 'WaterUser',
		components: {
			WaterIntakeModel
		},
		mixins: [gisCompMixin],
		data() {
			return {
				// 指定坐标字段
				lg: 'lgtd',
				lt: 'lttd',
				// 信息窗model的ref
				modelName: 'WaterIntakeModel',
				form: {
					monitorLevel: [],
					waterType: [],
					waterName: '',
				},
				params: {
					id: "",
					monitorLevelList: [],
					stcd: "",
					stnm: "",
					waterCode: "",
					waterName: "",
					waterPurposeList: [],
					waterSourceList: [],
					waterTypeList: []

				},
				iconUrl: require('./../../../../assets/img/gis_waterUser.png'),
				filterData: [],
				originData: [{
						waterName: '取水户1',
						waterType: 1,
						monitorLevel: 1,
						eslg: '106.484406',
						nrlt: '29.831273',
					},
					{
						waterName: '取水户2',
						waterType: 2,
						monitorLevel: 2,
						eslg: '106.367665',
						nrlt: '29.762964',
					},
					{
						waterName: '取水户3',
						waterType: 3,
						monitorLevel: 3,
						eslg: '106.448409',
						nrlt: '29.68299',
					},
					{
						waterName: '取水户4',
						waterType: 1,
						monitorLevel: 4,
						eslg: '106.448509',
						nrlt: '29.68239',
					},
					{
						waterName: '取水户5',
						waterType: 2,
						monitorLevel: 9,
						eslg: '106.434606',
						nrlt: '29.837273',
					},
					{
						waterName: '取水户6',
						waterType: 3,
						monitorLevel: 1,
						eslg: '106.388665',
						nrlt: '29.767964',
					},
					{
						waterName: '取水户7',
						waterType: 3,
						monitorLevel: 3,
						eslg: '106.498409',
						nrlt: '29.78399',
					},
					{
						waterName: '取水户8',
						waterType: 3,
						monitorLevel: 2,
						eslg: '106.498709',
						nrlt: '29.69799',
					},
				],
				sylx: [],
				yjdj: [],
				qsyt: [{
						name: '生活用水',
						value: 1,
					},
					{
						name: '工业用水',
						value: 2,
					},
					{
						name: '发电用水',
						value: 3,
					},
					{
						name: '农业用水',
						value: 4,
					},
					{
						name: '河道类生产用水',
						value: 5,
					},
					{
						name: '其他用水',
						value: 6,
					},
				],
				currentPoint: {
					waterName: '',
				},
			}
		},
		created() {
			// this.filterData = this.originData
			this.sylx = dictUtils.getDictItemsFromCache('sylx')
			this.yjdj = dictUtils.getDictItemsFromCache('yjdj')
		},
		mounted() {
			this.$nextTick(async () => {
				await this.getWaterPaperList()
				this.initMarkers()
			})
		//自动刷新获取数据(1000*60*10=>毫秒*秒*分钟，此时表示为10分钟)
			this.refreshData=setInterval(()=>{
			this.getWaterPaperList()
			this.updateMarkers()
			},1000*60*10);
		},
		//生命周期若已设置定时器，需清空定时器beforeDestroy()
		beforeDestroy(){
			clearInterval(this.refreshData);
			this.refreshData=null;
		},
		methods: {
			getWaterPaperList() {
				return new Promise((resolve, reject) => {
					gisMap.waterPaperList(this.params, res => {
						if (res.state) {
							this.filterData = res.value
								this.filterData.forEach(e => {
									this.yjdj.forEach(y => {
										if (e.warnGrade == y.value) {
											e.level = y.name
										}
									})
								})
							resolve()
						}
						reject()
					})
				})

			},
			tableRowClassName(row) {
				if (row.row.warnGrade == 2) {
					return 'warning-row';
				} else if (row.row.warnGrade == 1) {
					return 'alert-row';
				}
			},
			async sylxChange() {
				await this.getWaterPaperList()
				this.updateMarkers()
			},
			async qsytChange() {
				await this.getWaterPaperList()
				this.updateMarkers()
			},
			updateMarkers(){
			  // 获得新的列表数据后清除旧的标点、重新创建地图标点
			  this.searchClear = true
			  this.clearMarkers();
			  this.searchClear = false
			  this.initMarkers();
			},
		},
	}
</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 !important;

		div {
			color: red !important;
		}
	}

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

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