import historyMsg from "./historyMsg";
import { createApp, nextTick } from 'vue';

export default class BNMapUtils {
    BNMap = null;
    static BNFactory = null;
    static BNMapConfig = {
        container: 'bn-map',
        legendId: 1001,
        options: {
            showLabels: true
        },
        center: {
            lng: 108.76376244519464,
            lat: 34.44248866864621,
            z: 15
        },
        mapSpatialReference: 4326, //地图使用坐标
        dataSpatialReference: 4326 // 后台数据坐标
    }

    //当前用户操作保存数据
    handle = {
        callback: {},
        mapPoint: undefined, //当前点击的经纬度坐标
        clickItem: undefined //当前点击的feature
    }

    static layers = {
        features: 'featureLayer',
        texts: 'textsLayer',
    }
    static style = {
        text: {
            type: "text",
            color: "white",
            haloColor: "black",
            haloSize: "1px",
            xoffset: 0,
            yoffset: -30,
            font: {
                size: 12,
                family: "simhei",
                weight: "bold"
            }
        },
        marker: {
            size: [18, 28]
        }
    }
    static fields = {
        site: {
            id: 'siteId',
            lng: 'pointX',
            lat: 'pointY',
            text: 'siteName',
            url: 'url',
            size: 'size',
        }
    }

    constructor(options = BNMapUtils.BNMapConfig, callback = () => {}) {
        let self = this;
        require(["js/jquery-3.2.1.min", "js/BNFactory"], requireCallBack);

        function requireCallBack($, BNFactory) {
            BNMapUtils.BNFactory = BNFactory;

            self.initBNMap();

            self.initLayers();

            self.BNDemos();

            self.mapEvents();

            callback();
        }
    }

    //初始化地图
    initBNMap() {
        let { container, legendId, options, center, mapSpatialReference } = BNMapUtils.BNMapConfig;
        this.BNMap = new BNMapUtils.BNFactory(legendId, { id: container, options });
        this.BNMap.setCenter({ type: "point", longitude: center.lng, latitude: center.lat });
        this.BNMap.setLevel(center.z);
        this.BNMap.createSpatialReference(mapSpatialReference);
    }

    setCallBack(event = 'click', callback) {
        if (!!!this.handle.callback[event]) this.handle.callback[event] = [];
        this.handle.callback[event].push(callback);
    }

    mapEvents() {
        let self = this;
        this.BNMap.bindEvent(BNMapUtils.layers.features, 'click', clickCallbak)

        function clickCallbak(clickResults) {
            let { clickResult, mapPoint } = clickResults;
            self.handle.mapPoint = mapPoint;
            self.handle.callback['click'].forEach((callback) => callback(mapPoint, self.handle.clickItem))
            //未点击到feature要素
            if (!!!clickResult) return self.BNMap.view.popup.close();
            self.handle.clickItem = clickResult.results[0].graphic;
            self.goToGraphicById(self.handle.clickItem.id);

        }
    }

    goToGraphicById(id) {
        let self = this;
        if (!!!self.BNMap.view.popup.popupVue) {
            self.BNMap.view.popup.popupVue = createApp(historyMsg);
            self.BNMap.view.popup.mount = self.BNMap.view.popup.popupVue.mount('.esri-popup');
        }
        let clickItem = self.getFeatures([id]);
        self.BNMap.view.popup.mount.updateData(clickItem[0].attributes);
        self.BNMap.view.popup.mount.getEl((content) => self.BNMap.view.popup.content = content);
        self.BNMap.view.popup.location = clickItem[0].geometry;
        self.zoomTo(id);
        if (!!!self.BNMap.view.popup.visible) self.BNMap.view.popup.open();
    }

    zoomTo(id) {
        let graphics = this.BNMap.getLayer(BNMapUtils.layers.features).graphics.items.filter(graphics => graphics.id == id);
        if (!!!graphics.length) return;
        this.BNMap.view.goTo({center: [graphics[0].geometry.longitude, graphics[0].geometry.latitude + 0.01]}, {duration: 1300});
        // if(this.BNMap.getLevel() >17 || this.BNMap.getLevel() < 15) this.BNMap.setLevel(1);
    }

    getFeatures(ids = []) {
        return this.BNMap.getLayer(BNMapUtils.layers.features).graphics.items.filter(graphic => ids.includes(graphic.id));
    }

    setFeaturesVisible(field, value, visible) {
        let features = this.BNMap.getLayer(BNMapUtils.layers.features).graphics.items;
        let texts = this.BNMap.getLayer(BNMapUtils.layers.texts).graphics.items;
        features.concat(texts).filter(feature => feature.attributes[field] == value).forEach(feature => feature.visible = visible);
    }

    addMarkerFeature(object, fields = BNMapUtils.fields.site) {
        let featureLayer = this.BNMap.getLayer(BNMapUtils.layers.features);
        let bnSymbol = new BNMapUtils.BNFactory("BNSymbol", {});
        let size = object[fields.size];
        featureLayer.add(this.BNMap.creatGraphic({
            id: object[fields.id],
            attributes: object,
            geometry: {
                type: "point",
                longitude: Number(object[fields.lng]),
                latitude: Number(object[fields.lat]),
                spatialReference: { wkid: BNMapUtils.BNMapConfig.dataSpatialReference }
            },
            symbol: bnSymbol.PictureMarkerSymbol(object[fields.url], ...(size || BNMapUtils.style.marker.size))
        }));
        if (object[fields.text]) this.addTextFeature(object, fields);
    }

    addTextFeature(object, fields = BNMapUtils.fields.site, style = BNMapUtils.style.text) {
        let textsLayer = this.BNMap.getLayer(BNMapUtils.layers.texts);
        textsLayer.add(this.BNMap.creatGraphic({
            id: object[fields.id],
            attributes: object,
            geometry: {
                type: "point",
                longitude: Number(object[fields.lng]),
                latitude: Number(object[fields.lat]),
                spatialReference: { wkid: BNMapUtils.BNMapConfig.dataSpatialReference }
            },
            symbol: {...style, text: object[fields.text] }
        }))
    }

    //初始化图层
    initLayers() {
        this.BNMap.addGraphicsLayer(this.BNMap.creatGraphicsLayer({ styling: true, id: BNMapUtils.layers.features }));
        this.BNMap.addGraphicsLayer(this.BNMap.creatGraphicsLayer({ styling: true, id: BNMapUtils.layers.texts }));
    }

    BNDemos() {
        this.BNMap.createPointBy(108.76376244519464, 34.44248866864621, this.BNMap.spatialReference);

        var BNmapUtil = new BNMapUtils.BNFactory("BNmapUtil", this.BNMap);
        this.BNMap.addDistanceMeasurement2D();

        BNmapUtil.doLatLngTransformMapXY([
            [108.76376244519464, 34.44248866864621]
        ], 4326, this.BNMap.spatialReference, function(data) {
            // alert("地图坐标 x："+data[0].x+",地图坐标 y："+data[0].y);
        }, function() {
            // alert();
        });
    }

}