<!--实时工情-->
<template>
	<div class="comp-container engineer-container">
		<el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick" class="tab-inner">
			<el-tab-pane :label="tab.name" :name="tab.value" v-for="tab in gqsslx" :key="tab.value"
				:ref="`comContainer_${tab.value}`">
				<!-- <div class="section-container"> -->
				<div class="search-container" :ref="`searchPanle_${tab.value}`">
					<el-row class="search-row">
						<el-tag size="mini" class="label" effect="dark">
							水库名称
						</el-tag>
						<el-select style="width: 98%" size="mini" filterable v-model="params.rscd" clearable
							placeholder="请选择水库名称" @change="changeSearch">
							<el-option v-for="item in rsnms" :key="item.id" :label="item.rsnm" :value="item.rscd">
							</el-option>
						</el-select>
					</el-row>
					<el-row class="search-row" v-if="activeName == 1">
						<el-tag size="mini" class="label" effect="dark">
							测点名称
						</el-tag>
						<el-input style="width: 98%" clearable v-model="params.stnm" placeholder="请输入测点名称" size="mini"
							@change="changeSearch">
						</el-input>
					</el-row>
					<el-row class="search-row" v-if="activeName == 4">
						<el-tag size="mini" class="label" effect="dark">
							测点名称
						</el-tag>
						<el-input style="width: 98%" clearable v-model="params.mpnm" placeholder="请输入测点名称" size="mini"
							@change="changeSearch">
						</el-input>
					</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="测站名称" v-if="tab.value == 1" prop="stnm" align="center" min-width="130"
						show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="测站名称" v-if="tab.value == 4" prop="mpnm" align="center" min-width="130"
						show-overflow-tooltip>
					</el-table-column>
					<!-- <el-table-column label="所属水库" prop="rsnm" align="center" min-width="100" show-overflow-tooltip></el-table-column> -->
					<el-table-column v-if="tab.value == 1" label="X向值" prop="dx" align="center" min-width="80"
						show-overflow-tooltip></el-table-column>
					<el-table-column v-if="tab.value == 1" label="Y向值" prop="dy" align="center" min-width="80"
						show-overflow-tooltip></el-table-column>
					<el-table-column v-if="tab.value == 1" label="垂直位移值" prop="dz" align="center" min-width="110"
						show-overflow-tooltip></el-table-column>
					<el-table-column v-if="tab.value == 2" label="渗流量" prop="spqn" align="center" min-width="80"
						show-overflow-tooltip></el-table-column>
					<el-table-column v-if="tab.value == 3" label="渗流压力水位" prop="spprwl" align="center" min-width="110"
						show-overflow-tooltip></el-table-column>
					<el-table-column v-if="tab.value == 4" label="测压管水位" prop="pztbwl" align="center" min-width="110"
						show-overflow-tooltip></el-table-column>
					<el-table-column v-if="tab.value == 4" label="时间" prop="mstm" min-width="140" align="center"
						show-overflow-tooltip></el-table-column>
					<el-table-column v-if="tab.value != 4" label="时间" prop="tm" min-width="140" align="center"
						show-overflow-tooltip></el-table-column>

					<el-table-column label="报警等级" prop="level" align="center" min-width="80" show-overflow-tooltip>
					</el-table-column>
				</el-table>
				<!-- </div> -->
			</el-tab-pane>
		</el-tabs>
		<RealTimeEngineerModel ref="RealTimeEngineerModel" v-show="showInfo" :currentPoint="currentPoint"
			:stationType="activeName"></RealTimeEngineerModel>
	</div>
</template>

<script>
import RealTimeEngineerModel from './module/RealTimeEngineerModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import { gisCompMixin } from '@/mixins/gisCompMixin.js'
export default {
	name: 'RealTimeEngineer',
	components: {
		RealTimeEngineerModel
	},
	mixins: [gisCompMixin],
	data() {
		return {
			params: {},
			tabComp: true,
			// 指定坐标字段
			lg: 'lgtd',
			lt: 'lttd',
			modelName: 'WRStationModel',
			// 是否需要区别icon
			typeIcon: true,
			// 不同类型icon的key
			iconTypeKey: 'warnGrade',
			activeName: '',
			form: {
				rsnm: '',
				rscd: ''
			},
			rsnms: [],
			iconUrl0: require('./../../../../assets/img/gis_enginStation.png'),
			iconUrl1: require('./../../../../assets/img/gis_enginStation1.png'),
			iconUrl2: require('./../../../../assets/img/gis_enginStation2.png'),
			iconUrl3: require('./../../../../assets/img/gis_enginStation3.png'),
			filterData: [],
			originData: [
				{
					mpnm: '测站1',
					rsnm: '水库1',
					lgtd: '106.484406',
					lttd: '29.831273',
					status: 'r',
					warnGrade: 4,
					stcd: '11565'
				},
				{
					mpnm: '测站2',
					rsnm: '水库1',
					lgtd: '106.367665',
					lttd: '29.762964',
					status: 'r',
					warnGrade: 3
				},
				{
					mpnm: '测站4',
					rsnm: '水库1',
					lgtd: '106.448509',
					lttd: '29.68239',
					status: 'g',
					warnGrade: 3
				},
				{
					mpnm: '测站5',
					rsnm: '水库1',
					lgtd: '106.434606',
					lttd: '29.837273',
					status: 'g',
					warnGrade: 3
				},
				{
					mpnm: '测站6',
					rsnm: '水库1',
					lgtd: '106.388665',
					lttd: '29.767964',
					status: 'r',
					warnGrade: 4
				},
				{
					mpnm: '测站7',
					rsnm: '水库1',
					lgtd: '106.398409',
					lttd: '29.78399',
					status: 'g',
					warnGrade: 3
				},
				{
					mpnm: '测站8',
					rsnm: '水库1',
					lgtd: '106.598709',
					lttd: '29.89799',
					status: 'r',
					warnGrade: 4
				},
				{
					mpnm: '测站9',
					rsnm: '水库1',
					lgtd: '106.498709',
					lttd: '29.69799',
					status: 'g',
					warnGrade: 3
				}
			],
			gqsslx: [
				{
					name: '位移',
					value: '1'
				},
				// todo 20220607 暂时取消
				// {
				// 	name: '渗流',
				// 	value: '2',
				// },
				// {
				// 	name: '渗流压力水位',
				// 	value: '3',
				// },
				// todo 20220607 暂时取消
				{
					name: '测压管压力水位',
					value: '4'
				}
			], //工情设施类型
			currentPoint: {
				mpnm: ''
			}
		}
	},
	created() {
		this.getFindRiverList()
	},
	mounted() {
		this.$nextTick(async () => {
			this.activeName = this.gqsslx[0].value
			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: {
		getFindRiverList() {
			gisMap.geFindAll({}, res => {
				if (res.value) {
					this.rsnms = res.value
				}
			})
		},
		getFindResList() {
			return new Promise((resolve, reject) => {
				if (this.activeName == 1) {
					gisMap.dammvList(this.params, res => {
						if (res.state) {
							this.filterData = res.value
							this.filterData.forEach(e => {
								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
								}
							})
							// this.updateMarkers()
							resolve()
						}
						reject()
					})
				} else if (this.activeName == 2) {
					gisMap.damspgList(this.params, res => {
						if (res.state) {
							this.filterData = res.value
							this.filterData.forEach(e => {
								if (e.warnGrade) {
									this.yjdj.forEach(c => {
										if (e.warnGrade == c.value) {
											e.level = c.name
										}
									})
								} else {
									e.warnGrade = 0
								}
							})
							// this.updateMarkers()
							resolve()
						}
						reject()
					})
				} else if (this.activeName == 3) {
					gisMap.damspprList(this.params, res => {
						if (res.state) {
							this.filterData = res.value
							this.filterData.forEach(e => {
								if (e.warnGrade) {
									this.yjdj.forEach(c => {
										if (e.warnGrade == c.value) {
											e.level = c.name
										}
									})
								} else {
									e.warnGrade = 0
								}
							})
							this.updateMarkers()
							resolve()
						}
						reject()
					})
				} else if (this.activeName == 4) {
					if (!this.params.rscd && !this.params.mpnm) {
						var manometryData = {
							pageBean: {
								pageSize: -1,
								page: 1
							},
							querys: [],
							sorter: [
								{
									property: 'wl.mstm',
									direction: 'DESC'
								}
							]
						}
					} else {
						var manometryData = {
							groupRelation: 'AND',
							groupTree: {},
							pageBean: {
								page: 1,
								pageSize: 10,
								showTotal: true
							},
							params: {},
							querys: [
								{
									group: 'main',
									operation: 'EQUAL',
									parentGroup: '',
									property: 'bsin.rscd',
									relation: 'AND',
									value: ''
								}
							]
						}
						if (!!this.params.rscd) {
							// id精准搜索
							manometryData.querys[0].property = 'bsin.rscd'
							manometryData.querys[0].value = this.params.rscd
						}
						if (!!this.params.mpnm) {
							// 测压管名称搜索
							manometryData.querys[0].property = 'gqb.mpnm'
							manometryData.querys[0].operation = 'LIKE'
							manometryData.querys[0].value = this.params.mpnm
						}
					}
					// 测压管分页查询
					gisMap.damsppQuery(manometryData, res => {
						if (res.state) {
							this.filterData = res.value.rows
							this.filterData.forEach(e => {
								if(e.mstm){
									e.mstm = e.mstm
										.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
								}
							})
							this.updateMarkers()
							resolve()
						}
						reject()
					})
				}
			})
		},
		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'
			}
		},
		async handleTabClick(key) {
			this.params = {}
			this.calcTableHeight()
			this.map.closePopup()
			await this.getFindResList()
			this.updateMarkers()
		},
		async changeSearch() {
			await this.getFindResList()
			this.updateMarkers()
		},
		updateMarkers() {
			// 获得新的列表数据后清除旧的标点、重新创建地图标点
			this.searchClear = true
			this.clearMarkers()
			this.searchClear = false
			this.initMarkers()
		},
		infoWindow() {
			let sContent = this.$refs.RealTimeEngineerModel.$el
			var infoWin = new L.popup({
				autoPan: true,
				maxHeight: 400,
				minWidth: 500,
				maxWidth: 700
			}).setContent(sContent)
			return infoWin
		}
	}
}
</script>

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

.engineer-container {}

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

	div {
		color: red !important;
	}
}

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

	div {
		color: yellow !important;
	}
}

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

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