<template>
    <div class="mapCom">
        <div id="map"></div>
    </div>
</template>
<script>
    import httpRequest from '@/utils/request.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",
            }
        },
        watch: {
            ids(val) {

                if (this.layers.length > 0) {
                    this.map.removeLayer(this.layerGroup)
                    // this.layerGroup.clearLayers();
                }
                this.funStationPos(val)
            },
        },
        mounted() {
            this.initMap();
        },
        methods: {
            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 = []

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


                            let DefaultIcon1 = L.icon({
                                html: item.name,
                                iconUrl: this.icoName,
                                //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
                                // iconSize: [24, 41],
                                //  影子的大小    【值1，值2】 为具体你自定义阴影图标的尺寸，比如我图标尺寸是41×41，表示该图标：宽度41像素，高度：41像素，那么值1:就是41，值2：就是41
                                // shadowSize: [41, 41],
                                //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
                                iconAnchor: [24, 41],
                                // shadowAnchor: [4, 62], // 相同的影子
                                // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
                                // popupAnchor: [1, -24]
                            })

                            let iconLabel = L.divIcon({
                                html: item.aname,
                                className: 'iconLabel',
                                // iconSize: 50
                            })

                            var marker = null
                            var marker1 = null
                            marker = L.marker([item.latitude, item.longitude], {
                                title: item.name,
                                icon: DefaultIcon1,
                                data: item
                            }).addTo(this.map)


                            // marker.on('mousemove', function (e) {
                            //     console.log('2323', e)
                            //     let data = e.target.options.data
                            //     // var buttonDiv = document.createElement('div');
                            //     // var commitButton = document.createElement('input');
                            //     // commitButton.type = 'button';
                            //     // commitButton.value = "功率曲线拟合";
                            //     // commitButton.onclick = function () {
                            //     //     console.log('功率曲线拟合', data)
                            //     //     e.target.closePopup()
                            //     //     marker(e.latlng, {
                            //     //         title: item.name,
                            //     //         icon: DefaultIcon1,
                            //     //         data: item
                            //     //     }).addTo(this.map)
                            //     // };
                            //     // buttonDiv.appendChild(commitButton);

                            //     // var deleteButton = document.createElement('input');
                            //     // deleteButton.type = 'button';
                            //     // deleteButton.value = "对风偏差分析";
                            //     // deleteButton.onclick = function () {
                            //     //     console.log('对风偏差分析', data)
                            //     // };
                            //     // buttonDiv.appendChild(deleteButton);

                            //     // var parentDiv = document.createElement('div');
                            //     // var commentDiv = document.createElement('div');
                            //     // // 区域名称
                            //     let name = e.target.options.data.name
                            //     // var nameSpan = document.createTextNode(name + ':');
                            //     // commentDiv.appendChild(nameSpan);
                            //     // parentDiv.appendChild(commentDiv);
                            //     // parentDiv.appendChild(buttonDiv);
                            //     // e.target.bindPopup(e.latlng, parentDiv).openPopup();
                            //     e.target.bindPopup(name).openPopup();
                            // })
                            let that = this
                            marker.on('mousemove', function (e) {
                                console.log('map', item)
                                that.rightObj = item
                            })

                            marker1 = new L.marker([item.latitude, item.longitude], {
                                icon: iconLabel,
                            }).addTo(this.map)

                            this.map.panTo({
                                lat: Number(item.latitude),
                                lng: Number(item.longitude)
                            });
                            this.layers.push(marker)
                            this.layers.push(marker1)
                        }
                        this.layerGroup = L.layerGroup(this.layers)
                        this.map.addLayer(this.layerGroup)
                    }
                }
            },
            cesss(e) {
                console.log('11000001222', e)
            },

            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标识
                    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)

            },
            setAreaLayer(jsonName, isBounds) {
                // if (this.areaLayer) {
                //     this.map.removeLayer(this.areaLayer)
                // }
                // const wfAllGeoJson = require(`./static/geoJson/${jsonName}.json`)
                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)
                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;
        }
    }



    #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>