<!--水雨情测站-->
<template>
	<div class="comp-container water-rain-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 czzl.slice(0,-1)" :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-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="czyyflChange">
							<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">
					<el-table-column label="测站名称" prop="stnm" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column label="应用分类" prop="appType" align="center" show-overflow-tooltip></el-table-column>
					<el-table-column label="运行状态" prop="usfl" align="center" show-overflow-tooltip>
						<template  slot-scope="scope">
							{{scope.row.usfl==0?'异常':scope.row.usfl==1?'在线':''}}
						</template>
					</el-table-column>
				</el-table>
				<!-- </div> -->
			</el-tab-pane>
			<!-- <el-tab-pane label="河道水位站" name="河道水位站">
                <div class="section-container">
                    <div id="rainChart" class="full"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="测站水位站" name="测站水位站">
                <div class="section-container">
                    <div id="waterChart" class="full"></div>
                </div>
            </el-tab-pane> -->
		</el-tabs>
		<WRStationModel ref="WRStationModel" v-show="showInfo" :currentPoint="currentPoint" :stationType="activeName">
		</WRStationModel>
	</div>
</template>

<script>
	import WRStationModel from './module/WRStationModel.vue'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import gisMap from '@/api/frontScreen/gisMap.js'
	import {
		gisCompMixin
	} from '@/mixins/gisCompMixin.js'
	export default {
		name: 'WaterRainStation',
		components: {
			WRStationModel
		},
		mixins: [gisCompMixin],
		data() {
			return {
				tabComp: true,
				// 指定坐标字段
				lg: 'lgtd',
				lt: 'lttd',
				modelName: 'WRStationModel',
				// 是否需要区别icon
				typeIcon: true,
				// 不同类型icon的key
				iconTypeKey: 'usfl',
				activeName: '',
				form: {
					appType: [],
					stnm: '',
				},
				iconUrl0: require('./../../../../assets/img/gis_station_1.png'),
				iconUrl1: require('./../../../../assets/img/gis_station_2.png'),
				filterData: [],
				params: {
					appTypeList: [],
					endTime: "",
					id: "",
					mpcd: "",
					periodTime: "",
					rscd: "",
					startTime: "",
					stcd: "",
					stlc: "",
					stnm: "",
					sttp: "",
					sttpList: [],
					usfl: ""
				},
				originData: [{
						stnm: '测站1',
						appType: '山洪',
						lgtd: '106.484406',
						lttd: '29.831273',
						usfl: 'g',
					},
					{
						stnm: '测站2',
						appType: '山洪',
						lgtd: '106.367665',
						lttd: '29.762964',
						usfl: 'g',
					},
					{
						stnm: '测站3',
						appType: '山洪',
						lgtd: '106.448409',
						lttd: '29.68299',
						usfl: 'g',
					},
					{
						stnm: '测站4',
						appType: '水文',
						lgtd: '106.448509',
						lttd: '29.68239',
						usfl: 'g',
					},
					{
						stnm: '测站5',
						appType: '水文',
						lgtd: '106.434606',
						lttd: '29.837273',
						usfl: 'g',
					},
					{
						stnm: '测站6',
						appType: '水文',
						lgtd: '106.388665',
						lttd: '29.767964',
						usfl: 'b',
					},
					{
						stnm: '测站7',
						appType: '水文',
						lgtd: '106.398409',
						lttd: '29.78399',
						usfl: 'b',
					},
					{
						stnm: '测站8',
						appType: '水库',
						lgtd: '106.598709',
						lttd: '29.89799',
						usfl: 'g',
					},
					{
						stnm: '测站9',
						appType: '水库',
						lgtd: '106.498709',
						lttd: '29.69799',
						usfl: 'b',
					},
				],
				czzl: [], //测站站类
				czyyfl: [], //测站应用分类
				currentPoint: {
					stnm: '',
				},
			}
		},
		created() {
			// this.filterData = this.originData
			this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
			// this.czzl = dictUtils.getDictItemsFromCache('czzl')
			// this.activeName = this.czzl[0].value
		},
		mounted() {
			this.$nextTick(async() => {
				this.czzl = dictUtils.getDictItemsFromCache('czzl')
				this.params.sttp = this.czzl[0].value
				this.activeName = this.czzl[0].value
				await this.getFindStList()
				this.initMarkers()
			})
		//自动刷新获取数据(1000*60*10=>毫秒*秒*分钟，此时表示为10分钟)
			this.refreshData=setInterval(()=>{
			this.getFindStList()
			this.updateMarkers()
			},1000*60*10);
		},
		//生命周期若已设置定时器，需清空定时器beforeDestroy()
		beforeDestroy(){
			clearInterval(this.refreshData);
			this.refreshData=null;
		},
		// beforeDestroy() {
		//     this.clearMarkers()
		// },
		methods: {
			getFindStList() {
				return new Promise((resolve, reject)=>{
					gisMap.findStList(this.params, res => {
						if (res.state) {
							this.filterData = res.value
							this.filterData.forEach(e => {
								this.czyyfl.forEach(g => {
									if (e.appType == g.value) {
										e.appType = g.name
									}
								})
							})
							resolve()
						}
						reject()
					})
				})
				
			},
			tableRowClassName(row) {
				if (row.row.usfl == 0) {
					return 'warning-row';
				} 
			},
			updateMarkers(){
			  // 获得新的列表数据后清除旧的标点、重新创建地图标点
			  this.searchClear = true
			  this.clearMarkers();
			  this.searchClear = false
			  this.initMarkers();
			},
			async changeSearch(val) {
				this.params.stnm=val
				await this.getFindStList()
				this.updateMarkers()
			},
			async czyyflChange(val) {
				this.params.appTypeList = val
				await this.getFindStList()
				this.updateMarkers()
			},
			async handleTabClick(key) {
				console.log(key.name);
				if(key.name=='PP'){
					this.iconUrl0=require('./../../../../assets/img/gis_station_1.png')
					this.iconUrl1=require('./../../../../assets/img/gis_station_2.png')
				}else if(key.name=='ZZ'){
					this.iconUrl0=require('./../../../../assets/img/gis_station_3.png')
					this.iconUrl1=require('./../../../../assets/img/gis_station_4.png')
				}else if(key.name=='RR'){
					this.iconUrl0=require('./../../../../assets/img/gis_station_5.png')
					this.iconUrl1=require('./../../../../assets/img/gis_station_6.png')
				}
				// else{
				// 	this.iconUrl0=require('./../../../../assets/img/gis_station_g.png')
				// 	this.iconUrl1=require('./../../../../assets/img/gis_station_b.png')
				// }
				this.calcTableHeight()
				this.map.closePopup()
				this.params.sttp = key.name
				await this.getFindStList()
				this.updateMarkers()
			},
			infoWindow() {
				let sContent = this.$refs.WRStationModel.$el
				var infoWin = new L.popup({
					autoPan: true,
					maxHeight: 300,
					minWidth: 480,
					maxWidth: 600,
				}).setContent(sContent)
				return infoWin
			},

		},
	}
</script>

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

	.water-rain-container {}
	/deep/ .el-table .warning-row {
		color: #999999 !important;
	
		div {
			color: #999999 !important;
		}
	}
</style>
