<!--实时雨情-->
<template>
	<div class="comp-container water-rain-container">
		<!-- <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick" class="tab-inner"> -->
		<div :label="tab.name" :name="tab.value" v-for="tab in tabType" :key="tab.value"
			:ref="`comContainer_${tab.value}`" class="data-rain">
			<div class="search-container" :ref="`searchPanle_${tab.value}`">
				<el-row class="search-row" v-if="tab.value == 'realTime'">
					<el-tag size="mini" class="label" effect="dark">时段</el-tag>
					<el-radio-group v-model="form.time" size="mini" @change="timeChange">
						<el-radio-button :label="op.label" v-for="op in timeOptions" :key="op.label">{{ op.name }}
						</el-radio-button>
					</el-radio-group>
				</el-row>
				<el-row class="search-row" v-if="tab.value == 'history'">
					<el-tag size="mini" class="label" effect="dark">时间</el-tag>
					<el-date-picker size="mini" v-model="form.timeRange" type="datetimerange"
						:picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" value-format="yyyy-MM-dd" align="right" @change="timeChangeSj">
					</el-date-picker>
				</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="form.stnm" 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-checkbox-group v-model="form.appType" @change="changeStation">
						<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>
			</div>
			<el-table :data="filterData" :height="tableHeight" stripe size="mini" highlight-current-row
				:cell-class-name="tableRowClassName" @row-click="rowClick">
				<template v-if="tab.value == 'realTime'">
					<!-- <el-table-column v-for="item in realTimeColumn" :key="item.prop" :label="item.label"
							:prop="item.prop" :width="item.width" align="center" show-overflow-tooltip>
						</el-table-column> -->
					<el-table-column prop="stnm" label="测站名称" min-width="100" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="雨量" width="60" show-overflow-tooltip align="center">
						<template slot-scope="scope">
							{{
									params.periodTime == 'p1'
										? scope.row.p1
										: params.periodTime == 'p3'
											? scope.row.p3
											: params.periodTime == 'p6'
												? scope.row.p6
												: params.periodTime == 'p12'
													? scope.row.p12
													: params.periodTime == 'pd'
														? scope.row.pd
														: ''
							}}
						</template>
					</el-table-column>
					<el-table-column prop="dyp" label="日降雨量" min-width="70" show-overflow-tooltip align="center">
					</el-table-column>
					<el-table-column align="center" prop="tmMonth" label="时间" min-width="100" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="level" label="报警等级" width="80" align="center" show-overflow-tooltip>
					</el-table-column>
				</template>
				<template v-else>
					<el-table-column v-for="item in historyColumn" :key="item.prop" :label="item.label"
						:prop="item.prop" :width="item.width" align="center" show-overflow-tooltip>
					</el-table-column>
				</template>
			</el-table>
		</div>
		<!-- </el-tabs> -->
		<RealTimeRainModel ref="RealTimeRainModel" v-show="showInfo" :currentPoint="currentPoint" :frameTime="form.time"
			:times="form.timeRange" :stationType="activeName"></RealTimeRainModel>
	</div>
</template>

<script>
import RealTimeRainModel from './module/RealTimeRainModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import { gisCompMixin } from '@/mixins/gisCompMixin.js'
import gisMap from '@/api/frontScreen/gisMap.js'
// RealTimeRain
export default {
	name: 'RealTimeRain',
	components: {
		RealTimeRainModel
	},
	mixins: [gisCompMixin],
	data() {
		return {
			title: '实时',
			params: {
				appTypeList: [],
				endTime: '',
				id: '',
				mpcd: '',
				periodTime: 'p1',
				rscd: '',
				startTime: '',
				stcd: '',
				stlc: '',
				stnm: '',
				sttp: '',
				sttpList: [],
				tm: '',
				usfl: '',
				warnGrade: ''
			},
			yjdj: [],
			tabComp: true,
			// 指定坐标字段
			lg: 'lgtd',
			lt: 'lttd',
			modelName: 'RealTimeRainModel',
			activeName: 'realTime',
			form: {
				appType: [],
				stnm: '',
				time: 'p1',
				timeRange: []
			},
			typeIcon: true,
			iconTypeKey: 'warnGrade',
			pickerOptions: {
				shortcuts: [
					{
						text: '最近一周',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', [start, end])
						}
					},
					{
						text: '最近一个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit('pick', [start, end])
						}
					},
					{
						text: '最近三个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit('pick', [start, end])
						}
					}
				]
			},
			iconUrl3: require('./../../../../assets/img/gis_rain1.png'),
			iconUrl2: require('./../../../../assets/img/gis_rain3.png'),
			iconUrl1: require('./../../../../assets/img/gis_rain2.png'),
			iconUrl0: require('./../../../../assets/img/gis_rain.png'),
			timeOptions: [
				{
					label: 'p1',
					name: '1小时'
				},
				{
					label: 'p3',
					name: '3小时'
				},
				{
					label: 'p6',
					name: '6小时'
				},
				{
					label: 'p12',
					name: '12小时'
				},
				{
					label: 'pd',
					name: '24小时'
				}
			],
			filterData: [],
			originData: [
				{
					stnm: '测站1',
					appType: '山洪',
					lgtd: '106.484406',
					lttd: '29.831273',
					num1: '1',
					num2: '50',
					time: '2022-02-03'
				},
				{
					stnm: '测站2',
					appType: '山洪',
					lgtd: '106.367665',
					lttd: '29.762964',
					num1: '1',
					num2: '50',
					time: '2022-02-03'
				},
				{
					stnm: '测站3',
					appType: '山洪',
					lgtd: '106.448409',
					lttd: '29.68299',
					num1: '1',
					num2: '50',
					time: '2022-02-03'
				},
				{
					stnm: '测站4',
					appType: '水文',
					lgtd: '106.448509',
					lttd: '29.68239',
					num1: '1',
					num2: '50',
					time: '2022-02-03'
				},
				{
					stnm: '测站5',
					appType: '水文',
					lgtd: '106.434606',
					lttd: '29.837273',
					num1: '1',
					num2: '50',
					time: '2022-02-03'
				},
				{
					stnm: '测站6',
					appType: '水文',
					lgtd: '106.388665',
					lttd: '29.767964',
					num1: '1',
					num2: '50',
					time: '2022-02-03'
				},
				{
					stnm: '测站7',
					appType: '水文',
					lgtd: '106.398409',
					lttd: '29.78399',
					num1: '1',
					num2: '50',
					time: '2022-02-03'
				},
				{
					stnm: '测站8',
					appType: '水库',
					lgtd: '106.598709',
					lttd: '29.89799',
					num1: '1',
					num2: '50',
					time: '2022-02-03'
				},
				{
					stnm: '测站9',
					appType: '水库',
					lgtd: '106.498709',
					lttd: '29.69799',
					num1: '1',
					num2: '50',
					time: '2022-02-03'
				}
			],
			//类型 实时 历史
			tabType: [
				{
					name: '实时',
					value: 'realTime'
				}
				// {
				// 	name: '历史',
				// 	value: 'history'
				// },
			],
			czyyfl: [], //测站应用分类
			column: [],
			realTimeColumn: [
				{
					label: '测站名称',
					prop: 'stnm',
					width: 120
				},
				{
					label: '雨量',
					prop: 'dyp',
					width: 40
				},
				{
					label: '时间',
					prop: 'moditime',
					width: 150
				},
				{
					label: '报警等级',
					prop: 'level',
					width: 80
				}
			],
			historyColumn: [
				{
					label: '测站名称',
					prop: 'stnm'
				},
				{
					label: '时段雨量',
					prop: 'drp'
				},
				{
					label: '时间',
					prop: 'moditime',
					width: 140
				}
			],
			currentPoint: {
				stnm: ''
			}
		}
	},
	created() {
		this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
		this.czzl = dictUtils.getDictItemsFromCache('czzl')
		this.yjdj = dictUtils.getDictItemsFromCache('yjdj')
		this.column = this.realTimeColumn
	},
	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'
			}
		},
		async timeChangeSj(val) {
			this.params.startTime = val[0]
			this.params.endTime = val[1]
			await this.getFindResList()
			this.updateMarkers()
		},
		async timeChange(val) {
			this.params.periodTime = val
			await this.getFindResListOne()
			// let list = JSON.parse(JSON.stringify(this.filterData))
			// list.forEach(e => {
			// 	switch (val) {
			// 		case '':
			// 			e.timeName = e.drp
			// 			break
			// 		case 'pn10':
			// 			e.timeName = e.pn10
			// 			break
			// 		case 'pn30':
			// 			e.timeName = e.pn30
			// 			break
			// 		case 'p1':
			// 			e.timeName = e.p1
			// 			break
			// 		case 'p3':
			// 			e.timeName = e.p3
			// 			break
			// 		case 'p6':
			// 			e.timeName = e.p6
			// 			break
			// 		case 'p12':
			// 			e.timeName = e.p12
			// 			break
			// 		case 'p24':
			// 			e.timeName = e.p24
			// 			break
			// 		case 'drp':
			// 			e.timeName = e.drp
			// 			break
			// 	}
			// })
			// this.filterData = list
			this.updateMarkers()
		},
		updateMarkers() {
			// 获得新的列表数据后清除旧的标点、重新创建地图标点
			this.searchClear = true
			this.clearMarkers()
			this.searchClear = false
			this.initMarkers()
		},
		async changeStation(val) {
			this.params.appTypeList = val
			await this.getFindResList()
			this.updateMarkers()
		},
		getFindResListOne() {
			return new Promise((resolve, reject) => {
				gisMap.RealTimeRain(this.params, res => {
					if (res.state) {
						this.filterData = res.value
						this.filterData.forEach(e => {
							if(e.tm){
								e.tmMonth = e.tm
									.replace('-', '/')
									.split('/')[1]
									.slice(0, 11)
									.replace('-', '/')
							}
						

							if (this.params.periodTime == e.warnSd) {
								if (e.warnGrade == 2 || e.warnGrade == 1) {
								} else {
									e.warnGrade = 0
								}
							} else {
								e.warnGrade = 0
							}
							if (e.warnGrade) {
								this.yjdj.forEach(c => {
									if (e.warnGrade == c.value) {
										e.level = c.name
									}
								})
							}
						})
						resolve()
					}
					reject()
				})
			})
		},
		getFindResList() {
			return new Promise((resolve, reject) => {
				if (this.title == '实时') {
					//   console.log(111)
					gisMap.RealTimeRain(this.params, res => {
						if (res.state) {
							this.params.periodTime = this.form.time
							res.value.forEach(e => {
								if(e.tm){
								e.tmMonth = e.tm
									.replace('-', '/')
									.split('/')[1]
									.slice(0, 11)
									.replace('-', '/')
									}
								if (this.params.periodTime == e.warnSd) {
									if (e.warnGrade == 2 || e.warnGrade == 1) {
									} else {
										e.warnGrade = 0
									}
								} else {
									e.warnGrade = 0
								}
								if (e.warnGrade) {
									this.yjdj.forEach(c => {
										if (e.warnGrade == c.value) {
											e.level = c.name
										}
									})
								}
							})
							this.filterData = res.value
							resolve()
						}
						reject()
					})
				}
				if (this.title == '历史') {
					gisMap.waterHistoryList(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
								}
							})
							resolve()
						}
						reject()
					})
				}
			})
		},
		async changeSearch(val) {
			this.params.stnm = val
			await this.getFindResList()
			this.updateMarkers()
			// if (!val) {
			//   this.filterData = this.filterData
			//   return
			// }
			// this.filterData = this.filterData.filter(item => item.stnm == val)
		},
		async handleTabClick(key) {
			this.calcTableHeight()
			this.map.closePopup()
			this.form.timeRange = []
			this.title = key.label
			this.params = {}
			await this.getFindResList()
			this.updateMarkers()
		}
	}
}
</script>

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

.water-rain-container {
	.data-rain {
		height: 100%;
	}

	/deep/ .el-radio-group {
		display: block;
	}

	/deep/ .el-radio-button--mini .el-radio-button__inner {
		padding: 6px;
		background-color: #1c2330;
		border-color: #576580;
	}

	/deep/ .el-radio-button__inner {
		color: #dddddd;
	}

	/deep/ .el-radio-button__inner:hover {
		color: #409eff;
	}

	/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
		color: #ffffff;
		background-color: #409eff;
		border-color: #409eff;
		box-shadow: -1px 0 0 0 #409eff;
	}

	/deep/ .el-date-editor--datetimerange.el-input,
	/deep/ .el-date-editor--datetimerange.el-input__inner {
		width: 98%;
		padding: 3px 4px;
		box-sizing: border-box;
	}

	/deep/ .el-input__inner,
	/deep/ .el-range-editor--mini .el-range-input {
		background-color: $section-bg;
		border-color: $border-color;
		color: $text-main;
	}

	/deep/ .el-date-editor .el-range-separator {
		color: $text-main;
	}

	/deep/ .el-table {
		height: 60% !important;
	}

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