<!--日降雨量-->
<template>
    <div class="comp-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="params.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="params.appTypeList"
                    @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
            stripe
            size="mini"
            :data="filterData"
            :height="tableHeight"
            highlight-current-row
			 @row-click="rowClick"
        >
            <el-table-column
                label="排行"
                type="index"
                align="center"
                width="50"
            >
            </el-table-column>
            <el-table-column
                label="测站名称"
                prop="stnm"
                align="center"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                label="日降雨量(mm)"
                prop="dyp"
                align="center"
                show-overflow-tooltip
            ></el-table-column>
        </el-table>
		<DailyModel
		    ref="DailyModel"
		    :currentPoint="currentPoint"
		    v-show="showInfo"
		></DailyModel>
    </div>
</template>

<script>
import * as d3 from 'd3'
import {gisCompMixin} from '@/mixins/gisCompMixin.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import DailyModel from '@/views/frontScreens/components/gisTabComponents/module/DailyModel'
import gisMap from '@/api/frontScreen/gisMap.js'
export default {
    name: 'DailyRainfall',
    mixins: [gisCompMixin],
	components: {DailyModel},
    data() {
        return {
            // 指定坐标字段
            lg: 'lgtd',
            lt: 'lttd',
            czyyfl: [],
			currentPoint: {},
            params: {
                appTypeList: [],
                stnm: '',
            },
			showInfo:false,
            filterData: [],
            barOverLayer: null,
			refreshData:null,
        }
    },
    inject: ['mapData'],
    created() {
        let mapData = this.mapData()
        this.L = mapData.L
        this.map = mapData.map
        this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')
    },
    mounted() {
        this.$nextTick(async () => {
            await this.getFindResList()
            // this.initZhu()
            this.initBar()
            this.initMarkers()
        })
		this.refreshData=setInterval(()=>{
		this.getFindResList()
		this.updateMarkers()
		},1000*60*10);
    },
	beforeDestroy(){
	clearInterval(this.refreshData);
	this.refreshData=null;
	},
    methods: {
        initBar() {
            let map = this.map
            let width = 6
            let height = 1
            let tableData = this.filterData
            let sels
            this.barOverLayer = this.L.d3SvgOverlay(function (sel, proj) {
                sels = sel
                let citiesUpd = sel.selectAll('rect').data(tableData)
                citiesUpd
                    .enter()
                    .append('rect')
                    .attr('class', 'rect')
                    .attr('x', width / 2)
                    .attr('y', function (d2, i) {
                        if (d2.dyp > 100) {
                            return -d2.dyp * (height / 2)
                        } else {
                            return -d2.dyp * height
                        }
                    })
                    .attr('width', width)
                    .attr('height', function (d2, i) {
                        if (d2.dyp > 100) {
                            return d2.dyp * (height / 2)
                        } else {
                            return d2.dyp * height
                        }
                    })
                    .attr('fill', '#1451a0')
                    .attr('transform', function (d2, i) {
                        let _latlng = new L.latLng(d2.lttd, d2.lgtd)
                        return (
                            'translate(' +
                            map.latLngToLayerPoint(_latlng).x +
                            ',' +
                            map.latLngToLayerPoint(_latlng).y +
                            ')'
                        )
                    })
                    .attr('stroke', '#409eff')
                    .attr('stroke-width', 1)
            })

            this.barOverLayer.addTo(this.map)
            
            
            function update(sel, proj) {
                sel.selectAll('rect').each(function (d, i) {
                    if (d && d.lgtd && d.lttd) {
                        var _latlng = new L.latLng(d.lttd, d.lgtd)
                        d3.select(this).attr(
                            'transform',
                            'translate(' +
                                map.latLngToLayerPoint(_latlng).x +
                                ',' +
                                map.latLngToLayerPoint(_latlng).y +
                                ')'
                        )
                    }
                })
            }
        },
        async changeStation(val) {
            // this.params.appList = val
            await this.getFindResList()
            this.searchClear = true
            this.clearMarkers()
            this.searchClear = false
            this.initBar()
            this.initMarkers()
        },
        async changeSearch(val) {
            // this.params.stnm = val
            await this.getFindResList()
            this.searchClear = true
            this.clearMarkers()
            this.searchClear = false
            this.initBar()
            this.initMarkers()
        },
        updateMarkers() {
            // 获得新的列表数据后清除旧的标点、重新创建地图标点
            this.searchClear = true
            this.clearMarkers()
            this.searchClear = false
            this.initBar()
            this.initMarkers()
        },
        getFindResList() {
            return new Promise((resolve, reject) => {
                gisMap.dayYlList(this.params, (res) => {
                    if (res.state) {
                        this.filterData = res.value
                        resolve()
                    }
                    reject()
                })
            })
        },
        customClear() {
            if (this.barOverLayer) {
                this.map.removeLayer(this.barOverLayer)
                this.barOverLayer = null
            }
        },
        initZhu() {
            let map = this.map
            let tableData = this.filterData
            var svg = d3
                .select(map.getPanes().overlayPane)
                .append('svg')
                .attr('class', 'leaflet-zoom-hide')
            function drawRect() {
                let width = 4
                let height = 1
                var rects = svg
                    .selectAll('g.rectg')
                    .data(tableData)
                    .enter()
                    .append('g')
                    .attr('class', 'rectg')

                rects.each(function (d1, i) {
                    if (d1.dyp) {
                        let data = [d1.dyp]
                        d3.select(this)
                            .selectAll('g.rect')
                            .data(data)
                            .enter()
                            .append('rect')
                            .attr('class', 'rect')
                            .attr('x', width / 2)
                            .attr('y', function (d2, i) {
                                if (d2 > 100) {
                                    return -d2 * (height / 2)
                                } else {
                                    return -d2 * height
                                }
                            })
                            .attr('width', 10)
                            .attr('height', function (d2, i) {
                                if (d2 > 100) {
                                    return d2 * (height / 2)
                                } else {
                                    return d2 * height
                                }
                            })

                            .attr('fill', '#4db7ff')
                    }
                })
            }
            function update() {
                svg.selectAll('g.rectg').each(function (d, i) {
                    if (d && d.lgtd && d.lttd) {
                        var _latlng = new L.latLng(d.lttd, d.lgtd)
                        d3.select(this).attr(
                            'transform',
                            'translate(' +
                                map.latLngToLayerPoint(_latlng).x +
                                ',' +
                                map.latLngToLayerPoint(_latlng).y +
                                ')'
                        )
                    }
                })
            }

            function initial() {
                svg.attr('width', 1920).attr('height', 2000)
                drawRect()
            }
            //初始化画图的函数
            initial()
            update()
            //事件响应
            map.on('zoom', update)
        },
        infoWindow() {
            let sContent = this.$refs.DailyModel.$el
            var infoWin = new L.popup({
                autoPan: true,
                maxHeight: 500,
                maxWidth: 600,
                minWidth: 500,
            }).setContent(sContent)
            return infoWin
        },
		// 点击列表行创建对应标点
		rowClick(row) {
		  if (!row[this.lt] || !row[this.lg]) {
		    this.$message.warning('暂无点位数据')
		    return
		  }
		  this.currentPoint = row
		  
		  
		  let latlng = new L.latLng(row[this.lt], row[this.lg])
		  this.initMark(latlng, row)
		  this.inits(row)
		},
		inits(row) {
		   let map = this.map
		   let width = 6
		   let height = 1
		   let tableData = []
		   tableData.push(row)
		   let sels
		   this.barOverLayer = this.L.d3SvgOverlay(function (sel, proj) {
		       sels = sel
		       let citiesUpd = sel.selectAll('rect').data(tableData)
		       citiesUpd
		           .enter()
		           .append('rect')
		           .attr('class', 'rect')
		           .attr('x', width / 2)
		           .attr('y', function (d2, i) {
		               if (d2.dyp > 100) {
		                   return -d2.dyp * (height / 2)
		               } else {
		                   return -d2.dyp * height
		               }
		           })
		           .attr('width', width)
		           .attr('height', function (d2, i) {
		               if (d2.dyp > 100) {
		                   return d2.dyp * (height / 2)
		               } else {
		                   return d2.dyp * height
		               }
		           })
		           .attr('fill', '#1451a0')
		           .attr('transform', function (d2, i) {
		               let _latlng = new L.latLng(d2.lttd, d2.lgtd)
		               return (
		                   'translate(' +
		                   map.latLngToLayerPoint(_latlng).x +
		                   ',' +
		                   map.latLngToLayerPoint(_latlng).y +
		                   ')'
		               )
		           })
		           .attr('stroke', '#409eff')
		           .attr('stroke-width', 1)
		   })
		   
		   this.barOverLayer.addTo(this.map)
		   
		   
		   function update(sel, proj) {
		       sel.selectAll('rect').each(function (d, i) {
		           if (d && d.lgtd && d.lttd) {
		               var _latlng = new L.latLng(d.lttd, d.lgtd)
		               d3.select(this).attr(
		                   'transform',
		                   'translate(' +
		                       map.latLngToLayerPoint(_latlng).x +
		                       ',' +
		                       map.latLngToLayerPoint(_latlng).y +
		                       ')'
		               )
		           }
		       })
		   }
		},
		initMark(latlng,row){
			this.updateMarkers()
			this.LayerGroup = null
			this.markerslayer = []
			const label = new L.divIcon({
			    html: `<div style="color:#BBFFFF">${
			        row.stnm + '-' 
			    }
				<span style="color:#ffcc00">
				${
					 row.dyp + 'mm'
				}
				</span>
				<div>`,
			    className: 'my-divIcon',
			    iconSize: 75,
			    iconAnchor: L.point(20, 0),
			})
			let sectionMarker = new L.marker(latlng, {
			    icon: label,
			})
			let infoWin = this.infoWindow()
			sectionMarker.addEventListener('click', () => {
				this.currentPoint = row
				infoWin.update()
				this.showInfo = true
			  
			})
			this.currentPoint = row
			this.markerslayer.push(sectionMarker)
			sectionMarker.addTo(this.map).bindPopup(infoWin)
			this.LayerGroup = new L.layerGroup(this.markerslayer)
			this.map.addLayer(this.LayerGroup)
			this.showInfo = true
			sectionMarker.bindPopup(infoWin).openPopup()
			this.map.setView(sectionMarker.getLatLng(), 14)
		},
		
		updateMarkers() {
			// 获得新的列表数据后清除旧的标点、重新创建地图标点
			this.searchClear = true
			this.clearMarkers()
			
		},
		initMarkers() {
            this.LayerGroup = null
            this.markerslayer = []
            this.filterData.forEach((item) => {
                if (item.dyp) {
                    let latlng = new L.latLng(item.lttd, item.lgtd)
                    const label = new L.divIcon({
                        html: `<div style="color:#BBFFFF">${
                            item.stnm + '-' 
                        }
						<span style="color:#ffcc00">
						${
							 item.dyp + 'mm'
						}
						</span>
						<div>`,
                        className: 'my-divIcon',
                        iconSize: 75,
                        iconAnchor: L.point(20, 0),
                    })
                    let sectionMarker = new L.marker(latlng, {
                        icon: label,
                    })
					let infoWin = this.infoWindow()
					sectionMarker.addEventListener('click', () => {
						this.currentPoint = item
						infoWin.update()
						this.showInfo = true
					  
					})
                    this.markerslayer.push(sectionMarker)
					sectionMarker.addTo(this.map).bindPopup(infoWin)
                }
            })
            this.LayerGroup = new L.layerGroup(this.markerslayer)
            this.map.addLayer(this.LayerGroup)
			
        },
    },
}
</script>

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