<!--水电站-->
<template>
	<div class="comp-container hydropower-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="form.hystName"
                    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.appType1" @change="changeY">
					<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>
			<el-row class="search-row">
				<el-tag size="mini" class="label" effect="dark">
					生态站类型
				</el-tag>
				<el-checkbox-group v-model="form.sstp" @change="hljbChange">
					<el-checkbox class="check-item" v-for="item in sstpList" :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" width="130" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="水位" prop="zz" align="center" min-width="60" show-overflow-tooltip></el-table-column>
			<el-table-column label="流量" prop="q" align="center" min-width="60" show-overflow-tooltip></el-table-column>
			<el-table-column label="时间" prop="tm" align="center" min-width="140" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="报警等级" prop="level" align="center" width="80" show-overflow-tooltip>
			</el-table-column>
		</el-table>
		<!-- <el-table
            :data="filterData"
            :height="tableHeight"
            stripe
            size="mini"
            highlight-current-row
            @row-click="rowClick"
        >
            <el-table-column
                label="名称"
                prop="hystName"
                align="center"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="类型"
                prop="hystType"
                align="center"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="工程规模"
                prop="engScal"
                align="center"
                show-overflow-tooltip
            ></el-table-column> 
        </el-table> -->
		<EcologicalFlowModel ref="EcologicalFlowModel" v-show="showInfo" :currentPoint="currentPoint">
		</EcologicalFlowModel>
	</div>
</template>

<script>
import EcologicalFlowModel from './module/EcologicalFlowModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import { gisCompMixin } from '@/mixins/gisCompMixin.js'
export default {
	name: 'Hydropower',
	components: { EcologicalFlowModel },
	mixins: [gisCompMixin],
	data() {
		return {
			// 指定坐标字段
			lg: 'siteLong',
			lt: 'siteLat',
			// 是否需要区别icon
			typeIcon: true,
			// 不同类型icon的key
			iconTypeKey: 'warnGrade',
			modelName: 'EcologicalFlowModel',
			form: {
				hystName: '',
				appType1: [],
				sstp: []
			},
			iconUrl0: require('./../../../../assets/img/gis_waterlevel.png'),
			iconUrl1: require('./../../../../assets/img/gis_waterlevel1.png'),
			iconUrl2: require('./../../../../assets/img/gis_waterlevel2.png'),
			iconUrl3: require('./../../../../assets/img/gis_waterlevel3.png'),
			filterData: [],
			sstpList: [
			],
			params: {
				appTypeList: [],
				endTime: "",
				id: "",
				mpcd: "",
				periodTime: "",
				rscd: "",
				startTime: "",
				stcd: "",
				stlc: "",
				stnm: "",
				sttp: "",
				sttpList: ['SS'],
				usfl: ""
			},
			originData: [

			],
			sdzlx: [],
			gcgm: [],
			gcjsqk: [],
			currentPoint: {
				hystName: '',
			},
			czyyfl: []
		}
	},
	created() {
		// this.getFindResList()
		// this.filterData = this.originData
		this.sdzlx = dictUtils.getDictItemsFromCache('sdzlx')
		this.gcgm = dictUtils.getDictItemsFromCache('gcgm')
		this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
		this.sstpList = dictUtils.getDictItemsFromCache('czlb-stzlx')
		this.yjdj = dictUtils.getDictItemsFromCache('yjdj')
	},
	mounted() {
		this.$nextTick(async () => {
			// 异步请求数据 等待数据获取 再initMarkers
			await this.getFindResList()
			this.initMarkers()
			// this.initReservoir()
		})
		//自动刷新获取数据(1000*60*10=>毫秒*秒*分钟，此时表示为10分钟)
		this.refreshData = setInterval(() => {
			this.getFindResList()
			this.updateMarkers()
		}, 1000 * 60 * 10);
	},
	//生命周期若已设置定时器，需清空定时器beforeDestroy()
	beforeDestroy() {
		clearInterval(this.refreshData);
		this.refreshData = null;
	},
	methods: {
		//选中的工程规模
		async gsgmChange(val) {
			this.params.hystTypeList = val
			await this.getFindResList()
			this.updateMarkers()
		},
		async changeY(val) {
			this.params.appTypeList = val
			await this.getFindResList()
			this.updateMarkers()
		},
		tableRowClassName(row) {
			if (row.row.usfl == 0) {
				return 'warning-row';
			}
		},
		//获取水电站列表
		getFindResList() {
			return new Promise((resolve, reject) => {
				gisMap.waterRegime(this.params, res => {
					if (res.state) {
						this.filterData = res.value
						this.filterData.forEach(e => {
							e.siteLong = e.lgtd
							e.siteLat = e.lttd
							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
							}
						})
						resolve()
					}
					reject()
				})
			})
		},
		async changeSearch(val) {
			this.params.stnm = val
			await this.getFindResList()
			this.updateMarkers()
			// if (!val) {
			//     this.districtData = this.originData
			//     return
			// }
			// this.districtData = this.originData.filter(
			//     (item) => item.name == val
			// )
		},
		async hljbChange(val) {
			console.log(val);
			this.params.sstp = val
			await this.getFindResList()
			this.updateMarkers()
		},
		updateMarkers() {
			// 获得新的列表数据后清除旧的标点、重新创建地图标点
			this.searchClear = true
			this.clearMarkers();
			this.searchClear = false
			this.initMarkers();
		},

		infoWindow() {
			let sContent = this.$refs.EcologicalFlowModel.$el
			var infoWin = new L.popup({
				autoPan: true,
				maxHeight: 300,
				minWidth: 420,
				maxWidth: 600,
			}).setContent(sContent)
			return infoWin
		},
	},
}
</script>

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

.hydropower-container {
	/deep/ .el-table .warning-row {
		color: #999999 !important;

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