<!--水库-->
<template>
	<div class="comp-container reservoir-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.rsnm" 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.prsc" @change="gsgmChange">
					<el-checkbox class="check-item" v-for="item in gcgm" :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.prst" @change="gcjsqkChange">
					<el-checkbox class="check-item" v-for="item in gcjsqk" :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">
			<el-table-column label="水库名称" prop="rsnm" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column label="水库类型" prop="prsc" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column label="工程状态" prop="prst" align="center" show-overflow-tooltip></el-table-column>
		</el-table>
		<ReservoirModel ref="ReservoirModel" :isShow="showInfo" :currentPoint="currentPoint"></ReservoirModel>
	</div>
</template>

<script>
	import ReservoirModel from './module/ReservoirModel.vue'
	import reservoirs from '@/views/frontScreens/js/reservoirs'
	import dictUtils from '@/components/dict/DictSelectUtils.js'
	import gisMap from '@/api/frontScreen/gisMap.js'
	import {
		gisCompMixin
	} from '@/mixins/gisCompMixin.js'
	export default {
		name: 'Reservoir',
		components: {
			ReservoirModel
		},
		mixins: [gisCompMixin],
		data() {
			return {
				// 指定坐标字段
				lg: 'eslg',
				lt: 'nrlt',
				modelName: 'ReservoirModel',
				form: {
					prst: [],
					prsc: [],
					rsnm: ''
				},
				iconUrl: require('./../../../../assets/img/gis_reservoir.png'),
				filterData: [],
				originData: [{
						rsnm: '水库1',
						prsc: '小(1)型',
						prst: '在建',
						eslg: '106.66351',
						nrlt: '30.04658'
					},
					{
						rsnm: '水库2',
						prsc: '中型',
						prst: '已建',
						eslg: '106.53769',
						nrlt: '29.87165'
					},
					{
						rsnm: '水库3',
						prsc: '小(1)型',
						prst: '规划',
						eslg: '106.57228',
						nrlt: '29.92822'
					},
					{
						rsnm: '水库4',
						prsc: '中型',
						prst: '其他',
						eslg: '106.50876',
						nrlt: '29.82376'
					},
					{
						rsnm: '水库5',
						prsc: '中型',
						prst: '在建',
						eslg: '106.35542',
						nrlt: '29.89494'
					},
					{
						rsnm: '水库6',
						prsc: '小(2)型',
						prst: '已建',
						eslg: '106.47606',
						nrlt: '29.76402'
					},
					{
						rsnm: '水库7',
						prsc: '小(2)型',
						prst: '规划',
						eslg: '106.38206',
						nrlt: '29.79405'
					},
					{
						rsnm: '水库8',
						prsc: '小(2)型',
						prst: '其他',
						eslg: '106.44721',
						nrlt: '29.69563'
					}
				],
				sklx: [],
				gcgm: [],
				gcjsqk: [],
				currentPoint: {
					rsnm: ''
				},
				// infoWin: null,
				reservoirsOverlay: null,
				// reservoirsTextOverlay:null
				params: {
					eslg: 0,
					id: "",
					nrlt: 0,
					prscList: [],
					prstList: [],
					rscd: "",
					rsnm: "",
					stationList: [{
						code: "",
						id: "",
						parentId: "",
						pkVal: "",
						reCode: "",
						reType: "",
						stcd: "",
						stnm: "",
						sttp: ""
					}],
					videoVoList: [],
					refreshData: null
				}
			}
		},
		created() {

			// this.filterData = this.originData
			this.sklx = dictUtils.getDictItemsFromCache('sklx')
			this.gcgm = dictUtils.getDictItemsFromCache('gcgm')
			this.gcjsqk = dictUtils.getDictItemsFromCache('gcjsqk')
		},
		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: {
			customClear() {
				if (this.searchClear) return
				this.map.removeLayer(this.reservoirsOverlay)
			},
			async changeSearch(val) {
				this.params.rsnm = val
				await this.getFindResList()
				this.updateMarkers()
			},
			updateMarkers() {
				// 获得新的列表数据后清除旧的标点、重新创建地图标点
				this.searchClear = true
				this.clearMarkers();
				this.searchClear = false
				this.initMarkers();
			},
			//获取水库列表
			getFindResList() {
				return new Promise((resolve, reject) => {
					gisMap.findResList(this.params, res => {
						if (res.state) {
							this.filterData = res.value
							this.filterData.forEach(e => {
								this.gcgm.forEach(g => {
									if (e.prsc == g.value) {
										e.prsc = g.name
									}
								})
								this.gcjsqk.forEach(c => {
									if (e.prst == c.value) {
										e.prst = c.name
									}
								})
							})
							resolve()
						}
						reject()
					})
				})

			},
			//选中的工程规模
			async gsgmChange(val) {
				this.params.prscList = val
				await this.getFindResList()
				this.updateMarkers()
			},
			//选中的工程工程状态
			async gcjsqkChange(val) {
				this.params.prstList = val
				await this.getFindResList()
				this.updateMarkers()
			},


			infoWindow(
				maxHeight = 300,
				minWidth = 400,
				maxWidth = 400,
				minHeight = null
			) {
				let sContent = this.$refs[this.modelName].$el
				var infoWin = new this.L.popup({
					autoPan: true,
					maxHeight,
					minWidth,
					maxWidth
				}).setContent(sContent)
				return infoWin
			},
			initReservoir() {
				let countries = []
				//   this.reservoirsOverlay = new this.T.D3Overlay(init, redraw)

				let reservoirStyle = {
					color: '#409eff',
					weight: 2,
					opacity: 1,
					fillColor: '#409eff',
					fillOpacity: 0.6
				}
				countries = reservoirs.features
				this.reservoirsOverlay = new L.geoJSON(countries, {
					style: reservoirStyle
				})

				this.map.addLayer(this.reservoirsOverlay)

				this.reservoirsOverlay.bringToFront()

				//   function init(sel, transform) {
				//     var upd = sel.selectAll('path.geojson').data(countries)
				//     upd
				//       .enter()
				//       .append('path')
				//       .attr('class', 'geojson')
				//       .attr('fill', '#409eff')
				//       .attr('fill-opacity', '1')
				//   }
				//   function redraw(sel, transform) {
				//     console.log(transform, sel)
				//     sel.selectAll('path.geojson').each(function(d, i) {
				//       d3.select(this).attr('d', transform.pathFromGeojson)
				//     })
				//   }
			}
		}
	}
</script>

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

	.reservoir-container {
		/deep/ .el-form-item--small.el-form-item {
			margin-bottom: 0px;
		}
	}
</style>
