<template>
    <div class="mapCom">
        <div id="map"></div>
    </div>
</template>
<script>
    import httpRequest from '@/utils/request.js'
    import './leaflet.canvas-markers.js'
    export default {
        props: {
            ids: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            windList: {
                type: Array,
                default: () => {
                    return [];
                },
            },
        },
        data() {
            return {
                map: null,
                DefaultIcon1: null,
                layerGroup: [],
                layers: [],
                rightObj: {},
                areaLayer: null,
                tilsUrl: "./static/kMapTiles/{z}/{x}/{y}.jpg",
                ciLayer: null
            }
        },
        watch: {
            ids(val) {


                this.funStationPos(val)
            },
        },
        mounted() {
            this.initMap();
        },
        methods: {
            initMap() {
                this.map = L.map("map", {
                    // center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
                    // center: [38.44673272215545, 106.27624511718751], // 地图中心--银川
                    // center: [108.953939, 34.266611], // 地图中心--陕西
                    // center: [109.470962, 34.520632], // 地图中心--渭南
                    zoom: 16, //缩放比列
                    zoomControl: false, //禁用 + - 按钮
                    doubleClickZoom: true, // 禁用双击放大
                    attributionControl: false, // 移除右下角leaflet标识
                    preferCanvas: true,
                    contextmenu: true,
                    contextmenuWidth: 140,
                    contextmenuItems: [{
                            text: '功率曲线拟合',
                            callback: this.powerLine
                        },
                        {
                            text: '对风偏差分析',
                            callback: this.windAny
                        }
                    ]
                });
                let name = L.tileLayer(
                    "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
                ).addTo(this.map)

                // let name = L.tileLayer(this.tilsUrl, {
                //     minZoom: 1,
                //     maxZoom: 16
                // }).addTo(this.map)

                this.setAreaLayer('db', true)
                this.setAreaLayer('jb', true)

            },
            async funStationPos(ids) {
                let res = null
                if (ids.length > 0) {
                    res = await httpRequest.get('/base/location', {
                        params: {
                            ids: this.ids.join(","),
                        },
                    })
                } else {
                    res = await httpRequest.get('/base/station', {
                        params: {},
                    })
                }
                if (res.code === 200) {
                    if (res.data && res.data.length) {

                        this.layers = []
                        if (this.ciLayer !== null) {
                            this.ciLayer.clearLayers();
                            this.ciLayer = L.canvasIconLayer({}).addTo(this.map)
                        } else {
                            this.ciLayer = L.canvasIconLayer({}).addTo(this.map)
                        }

                        let iconUrl = require(`@/assets/images/indexCom/fengji.png`)

                        for (let i = 0; i < res.data.length; i++) {
                            let item = res.data[i]

                            let marker = L.marker([Number(item.latitude), Number(item.longitude)], {
                                // title: item.name,
                                icon: L.divIcon({
                                    // html: `<div style="position:relative;top:40px;left:5px">${item.aname}</div>`,
                                    className: 'iconSty',
                                    iconUrl: iconUrl,
                                    iconSize: [30, 39],
                                    iconAnchor: [15, 12.5]
                                }),
                                data: item
                            }).bindTooltip(`
                                <div class="tip-box-top">
                                    <div class="item">${item.name}</div>
                                    <div class="item">经度：${item.latitude}°</div>
                                    <div class="item">纬度：${item.longitude}°</div>
                                    <div class="item">海拔高度:${item.altitude}km</div>
                                </div>`).addTo(this.map);

                            this.ciLayer.addLayer(marker)
                            this.layers.push(marker)

                            let that = this
                            marker.on('mouseover', function onmouseover(e) {
                                console.log('map', item)
                                that.rightObj = item
                            })

                        }
                        let center = this.map.getCenter()
                        this.map.panTo([center.lat, center.lng], {
                            animate: true
                        })
                        this.map.setView(this.layers[0].getLatLng(), 13);

                    }
                }
            },

            setAreaLayer(jsonName, isBounds) {
                const wfAllGeoJson = require(`@/assets/${jsonName}.json`)
                this.areaLayer = L.geoJSON(wfAllGeoJson, {
                    style: feature => {
                        return {
                            fillOpacity: 0.1,
                            fillColor: 'rgb(27, 242, 245)',
                            weight: 2,
                            color: 'rgb(27, 242, 245)'
                        }
                    }
                })
                this.map.addLayer(this.areaLayer)
                if (isBounds) {
                    this.map.fitBounds(this.areaLayer.getBounds())
                }
            },
            powerLine(e) {
                console.log('2221111', this.layers)
                console.log('ceeeee', e)
                if (!this.rightObj.latitude && !this.rightObj.longitude) {
                    this.$message({
                        message: '该坐标系下暂无功率曲线拟合',
                        type: 'error'
                    });
                } else {
                    this.layers.forEach(item => {
                        if (item.options.data) {
                            if (item.options.data.name.indexOf('风电场') === -1) {
                                if (item.options.data.latitude === this.rightObj.latitude && item
                                    .options.data
                                    .longitude === this.rightObj.longitude) {
                                    this.$emit('rightClick', {
                                        menuIndex: 0,
                                        current: this.rightObj
                                    })
                                }
                            } else {
                                if (item.options.data.name === this.rightObj.name) {
                                    this.$message({
                                        message: '风场暂无功率曲线拟合功能',
                                        type: 'error'
                                    });
                                }
                            }
                        }
                    })
                }
            },
            windAny(e) {
                if (!this.rightObj.latitude && !this.rightObj.longitude) {
                    this.$message({
                        message: '该坐标系下暂无对风偏差分析',
                        type: 'error'
                    });
                } else {
                    this.layers.forEach(item => {
                        if (item.options.data) {
                            if (item.options.data.name.indexOf('风电场') === -1) {
                                if (item.options.data.latitude === this.rightObj.latitude && item
                                    .options.data
                                    .longitude === this.rightObj.longitude) {
                                    this.$emit('rightClick', {
                                        menuIndex: 1,
                                        current: this.rightObj
                                    })
                                }
                            } else {
                                if (item.options.data.name === this.rightObj.name) {
                                    this.$message({
                                        message: '风场暂无对风偏差分析功能',
                                        type: 'error'
                                    });

                                }
                            }
                        }
                    })
                }
            }
        }
    };
</script>
<style scoped lang="less">
    .mapCom {
        height: 100%;

        .iconLabel {
            width: 80px !important;
        }

        .iconSty {
            .iconStyClass {
                width: 50px;
                height: 100px;
                position: relative;
                top: 40px;
            }
        }
    }



    #map {
        width: 100%;
        height: 100%;
    }



    .lmap-image {
        width: 32px;
        height: 32px;
    }

    .lmap-span {
        display: inline-block;
        margin-left: 5px;
        padding: 5px;
        font-weight: bold;
        line-height: 20px;
        font-size: 14px;
        color: #fff;
        white-space: nowrap;
    }

    .lmap-text {
        display: inline-block;
        margin-left: 5px;
        padding: 5px;
        font-weight: bold;
        line-height: 20px;
        font-size: 16px;
        color: #fff;
        width: 500px;
        white-space: nowrap;
        position: absolute;
        text-align: center;
        top: 25px;
        left: -250px;
    }
</style>