namespace APPMAP {
    // 对城市信息初始化
    // 对inpout初始化
    class base {
        // 当前地图经纬度
        protected mapLng: string = '116.395645'
        protected mapLat: string = '39.929986'
        // 当前地图的经纬度对象
        protected mapPoints: object = {}

        // input值
        protected inputLng: string = ''
        protected inputLat: string = ''
        // input值对象
        protected inputPoints: object = {}
        // input生成标注点对象,跟模态框同步的对象标注点
        protected cacheMarker: object = {}

        // 城市信息
        protected allCity: string = ''
        protected selectProv: string = ''
        protected selectCity: string = ''
        protected selectDist: string = ''
        protected address: string = ''

        // dom
        private lngDom: any = {}
        private latDom: any = {}

        constructor() {

            this.mapLng = CL.c.maplng || this.mapLng
            this.mapLat = CL.c.maplat || this.mapLat

            // 若是inputLng值变化同步到input输入框
            this.watch(this, 'inputLng', () => {
                this.setInputLng()
            })
            // 若是inputLat值变化同步到input输入框
            this.watch(this, 'inputLat', () => {
                this.setInputLat()
            })

            this.initHtmlDom()
            // 进行初始化
            this.getInputLngLat()
            // 判断input是否有值，有的话直接传递给默认值
            this.syncMapLngLat()
            // 获取城市信息
            this.getCity()

            // 城市信息
            $(document).on('change keyup', '.city-js select', () => {
                // 清空详细地址
                if ($(".city-mapjs-address").length) $(".city-mapjs-address").val('')
            });
            // 包含详细地址的变化
            $(document).on('change keyup', '.city-js select, .city-mapjs-address', () => {
                this.getCity()
            });
        }

        // 全局dom
        initHtmlDom() {
            // 经纬度
            this.lngDom = $(".city-mapjs-lng")
            this.latDom = $(".city-mapjs-lat")
        }

        // 判断是否为空
        isEmpty(val: any) {
            switch (val) {
                case ',':
                    return true
                case '请选择':
                    return true
                case '请选择所在地区':
                    return true
            }
            return APPFUN.isEmpty(val)
        }

        // 获取经纬度
        getInputLngLat() {
            this.inputLng = this.lngDom.val()
            this.inputLat = this.latDom.val()
        }

        // 同步到地图经纬度
        syncMapLngLat() {
            if (!this.isEmpty(this.inputLng) && !this.isEmpty(this.inputLat)) {
                this.mapLng = this.inputLng
                this.mapLat = this.inputLat
            }
        }

        // 对input赋值
        setInputLngLat() {
            this.setInputLng()
            this.setInputLat()
        }

        setInputLng() {
            this.lngDom.val(this.inputLng)
            this.lngDom.trigger('input')
        }

        setInputLat() {
            this.latDom.val(this.inputLat)
            this.latDom.trigger('input')
        }

        // 获取地址信息
        getCity() {
            //获取城市信息
            this.selectProv = this.isCity($(".city-js select.prov").find("option:selected").val())
            this.selectCity = this.isCity($(".city-js select.city").find("option:selected").val())
            this.selectDist = this.isCity($(".city-js select.dist").find("option:selected").val())
            this.address = this.isCity($(".city-mapjs-address").val())
            // 拼装一个除了省信息以外的地址字符串
            this.allCity = this.selectCity + this.selectDist + this.address;
        }

        // 判断城市信息是否为空
        isCity(string: string) {
            return !this.isEmpty(string) ? string : ''
        }

        // 根据城市信息判断地图级别
        level() {
            let level = 12
            // 省份 20km
            if (!this.isEmpty(this.selectProv)) level = 10
            // 市区 5km
            if (!this.isEmpty(this.selectCity)) level = 12
            // 县市区 500M
            if (!this.isEmpty(this.selectDist)) level = 14
            // 详细地址 200M
            if (!this.isEmpty(this.selectDist) && !this.isEmpty(this.address)) level = 15
            return level;
        }

        // 对参数进行监听,做出对应的操作
        watch(JsonObj: any, key: string, closure?: any) {
            // 缓存值
            let cacheData: any = {};
            cacheData[key] = JsonObj[key];
            Object.defineProperty(JsonObj, key, {
                enumerable: true, // 该属性可被枚举
                configurable: true, // 该属性可以被删除以及属性描述符可以被改变
                get() {
                    // 需要从缓存值获取，不能直接obj获取
                    return cacheData[key]
                },
                set(newValue) {
                    const oldValue = cacheData[key];
                    // 改变原来的值，也就是修改JsonObj的值
                    cacheData[key] = newValue;
                    if (typeof closure === 'function' && oldValue !== newValue) closure(newValue, oldValue)
                }
            })
        }
    }

    // 初始一个地图并返回本地图对象
    class initialMap extends base {
        // 展示类型的地图对象缓存
        protected showMap: any = {}
        // 模态框地图对象缓存
        protected modalMap: any = {}
        // 地图模式
        protected mapType: boolean = false
        protected myGeos: any = {}

        // 缓存ajax查询结果
        protected mapLngLatList: any = {}
        protected mapCacheMarker: any = {}

        constructor() {
            super()
            this.myGeos = new BMapGL.Geocoder();
            // 将input信息转为对象,若是input有值 直接初始化后传递给地图
            if (!this.isEmpty(this.inputLng) && !this.isEmpty(this.inputLat)) {
                this.inputPoints = this.mapPoints = this.lnglatToPoints(this.inputLng, this.inputLat)
            } else {
                // 若是经纬度不存在，则城市信息存在则以城市信息为准，但是城市信息获取对象有延迟，则需要调整到后面
                // 使用默认值对地图的经纬度转成对象
                this.mapPoints = this.lnglatToPoints(this.mapLng, this.mapLat)
            }
        }

        // 将字符串经纬度转换成经纬度对象
        lnglatToPoints(lng: string, lat: string) {
            let point = {}
            if (!this.isEmpty(lng) && !this.isEmpty(lat)) point = new BMapGL.Point(lng, lat)
            return point
        }

        // 初始化一个地图
        initMap(domId: string, level?: any) {
            const map = new BMapGL.Map(domId, {enableMapClick: false});
            // 初始化地图,设置中心点坐标和地图级别
            map.centerAndZoom(this.mapPoints, level || this.level());
            // 开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
            // 地图配置
            map.setDisplayOptions({
                // 隐藏POI文字
                // poiText: false,
                // 隐藏POI的Icon
                poiIcon: false
            })
            return map
        }

        // 旋转地图角度
        setHeadingTilt(map: any) {
            // 地图当前旋转角度
            // map.setHeading(64.5);
            // 地图当前状态倾斜角度
            map.setTilt(65);
        }

        // 将城市信息转化为经纬度，并根据经纬度调整地图
        citySyncMap(mapOjb: any, level?: number) {
            // 异步执行建议在地图加载完成(tilesloaded)后再进行地图调整，否则无效
            this.myGeos.getPoint(this.allCity || this.selectProv, (point: any) => {
                if (point) {
                    this.mapPoints = point
                    this.mapLng = point.lng
                    this.mapLat = point.lat
                    mapOjb.panTo(point);
                    // 让他自动调整地图
                    if (level && level > 0) mapOjb.setZoom(level);
                } else {
                    console.log("您选择地址没有解析到结果!")
                }
            }, this.selectProv);
        }

        // 获取经纬度列表
        ajaxlnglatList(map: any, formJson: object, clickEvent: boolean = false, closure?: any) {
            $.getJSON(M.url.own_name + "c=ajax&a=doallmap", formJson, (listJson: any) => {
                this.mapLngLatList = listJson
                $.each(listJson, (i: number, val: any) => {
                    // 值的转换为了后面统一使用，对应后期数据库的值
                    val.maplng = val.v_maplng
                    val.maplat = val.v_maplat
                    // 根据clickEvent 判断是否要启用标注点的信息提示
                    const clickClosure = clickEvent ? this.addOpenInfo(map, val) : ''
                    if (!this.isEmpty(val.maplng) && !this.isEmpty(val.maplat)) this.addMapOverlay(map, val.maplng, val.maplat, false, val.id, clickClosure);
                    // 暂时考虑加入一个回调
                    // if (typeof closure === 'function') closure(val);
                })
            })
        }

        // 标注图标样式
        myIcon() {
            return new BMapGL.Icon(
                // 图片地址
                M.url.own_tem + "/img/markers.png",
                // 标注的大小，跟图片上的标注图样大小一致
                new BMapGL.Size(21, 25),
                // 其他参数
                {
                    // 图片的大小
                    imageSize: new BMapGL.Size(42, 325),
                    // 指定定位位置。
                    // 当标注显示在地图上时，其所指向的地理位置距离图标左上
                    // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
                    // 图标中央下端的尖角位置。
                    anchor: new BMapGL.Size(10, 25),
                    // 设置图片偏移。
                    // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
                    // 需要指定大图的偏移位置，此做法与css sprites技术类似。
                    // 设置图片偏移
                    imageOffset: new BMapGL.Size(0, 300)
                }
            );
        }

        // 地图点的标注
        addMapOverlay(appmapl: any, lng: string, lat: string, icons: boolean = false, listId?, clickClosure?: any) {
            if (this.isEmpty(lng)) return false;
            //  获取经纬度 创建标注
            const points = this.lnglatToPoints(lng, lat)
            const marker = new BMapGL.Marker(points);
            // 给标注点添加点击回调
            if (typeof clickClosure === 'function') {
                marker.addEventListener("click", (e: any) => {
                    clickClosure(e)
                })
                // 因为marker不会直接存在dom，地图打开后才会生成dom
                // 将所有的标注点缓存，方便手动触发标注点的点击事件
                this.watch(marker, 'domElement', () => {
                    this.mapCacheMarker[listId] = $(marker.domElement)
                })
            }
            // 标注图标，需要单独标注的颜色，则进行缓存
            if (icons) {
                // 缓存一下
                this.cacheMarker = marker
                marker.setIcon(this.myIcon());
            }

            // 添加到地图
            appmapl.addOverlay(marker);
            return points
        }

        // 添加标注信息窗口
        addOpenInfo(map: any, value: any) {
            const opts = {
                // width: 250,     // 信息窗口宽度
                // height: 80,     // 信息窗口高度
                maxWidth: 350,
                enableAutoPan: true,
                title: value.v_name // 信息窗口标题，设置为小区名称
            };
            // 组织内容
            // let content = `<p>类型：${value.}</p>`
            let content = `<p>${value.v_province}${value.v_city}${value.v_district}${value.v_address}</p>`
            // 返回一个函数方便点击事件二次调用
            return (e: any) => {
                const p = e.target;
                const point = this.lnglatToPoints(p.getPosition().lng, p.getPosition().lat);
                const infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            }
        }
    }

    // 展示型的地图动作操作
    class showMap extends initialMap {
        constructor() {
            super();
            // 获取地图状态
            this.getMapType()
            // 初始化
            this.showInitMap()
            // 启动城市信息监听
            this.watchCity()
        }

        showInitMap() {
            // 初始化地图
            this.showMap = this.initMap("showmap")
            // 旋转地图角度
            this.setHeadingTilt(this.showMap)
            // 地图初始化完成后，若是没有input的值，且又存在城市信息则按照城市信息调整地图
            if (this.isEmpty(this.inputLng) && this.isEmpty(this.inputLat) && !this.isEmpty(this.allCity)) this.citySyncMap(this.showMap)
            // 根据地图状态处理标记
            if (this.mapType) this.addMapOverlay(this.showMap, this.inputLng, this.inputLat, true)
        }

        getMapType() {
            // true 则进行标记
            // false 不进行地图标记
            return this.mapType = $('#showmap').data('type') === 'showmap' ? false : true;
        }

        watchCity() {
            const $fun = () => {
                this.citySyncMap(this.showMap)
            }
            // 监听指定的参数
            this.watch(this, 'selectProv', $fun)
            this.watch(this, 'allCity', $fun)
            // 只是针对纯展示型地图，不带标记的
            if (!this.mapType) {
                // 禁止拖拽
                // this.showMap.disableDragging()
                // 若是地图经纬度变化时，是否同步给input
                this.watch(this, 'mapLng', () => {
                    this.inputLng = this.mapLng
                })
                this.watch(this, 'mapLat', () => {
                    this.inputLat = this.mapLat
                })
            }

        }
    }

    // 模态框地图动作操作
    class modalMap extends showMap {
        // 模态框的缓存信息
        protected modalLng: string = ''
        protected modalLat: string = ''
        // input值对象
        protected modalPoints: object = {}

        constructor() {
            super();

            //验证信息
            $('#mapmodal').on('click', () => {
                // 获取城市信息
                // this.getCity()
                if (this.isEmpty(this.selectCity)) {
                    $.include(M['url']['static2_vendor'] + 'alertify/alertify.js', function () {
                        alertify.logPosition("右下角");
                        alertify.error("请选择城市。");
                    })
                } else {
                    const html = '范围：' + this.selectProv + '<small style="padding-left:15px;">' + this.allCity + '</small>';
                    $('h4.modal-title').html(html)
                    // 打开模态框
                    $('#appmaps').modal('show')
                }
            });

            //模态框
            $('#appmaps').on('shown.bs.modal', () => {
                // 延迟效果可以让模态框加载时看起来没有卡的感觉
                setTimeout(() => {
                    // 解决因页面产品滚动条导致的点击地图获取的经纬度不准确问题
                    // 让滚动条回滚到顶部
                    document.body.scrollTop = document.documentElement.scrollTop = 0
                    // 初始化模态框
                    this.modalInitMap()
                    // 主要是用来排除掉当前小区的标记
                    const mapId = $('#modalmap').data('mapid') || '';
                    // // ajax查找 当前地区点的标注并添加在地图上
                    this.ajaxlnglatList(this.modalMap, {
                        id: mapId,
                        province: this.selectProv,
                        city: this.selectCity,
                        district: this.selectDist
                    })

                    //点击百度地图时触发
                    this.modalMap.addEventListener("click", (e: any) => {
                        //清除单个标注
                        this.modalMap.removeOverlay(this.cacheMarker);
                        //赋值给输入框
                        this.modalLng = e.latlng.lng
                        this.modalLat = e.latlng.lat;
                        // 他变化时要同时针对多个地图直接变化
                        this.modalPoints = this.addMapOverlay(this.modalMap, this.modalLng, this.modalLat, true)
                    });
                }, 200)

            });

            // 保存
            $('#appmaps .button-save').on('click', () => {
                //判断是否同步信息到展示地图
                if (!this.isEmpty(this.modalLng) && !this.isEmpty(this.modalLat)) {
                    //返回值
                    this.inputLng = this.modalLng
                    this.inputLat = this.modalLat
                    //展示图的操作
                    if (!this.isEmpty(this.showMap)) {
                        //清除展示地图的标注
                        this.showMap.clearOverlays();
                        //地图显示
                        this.mapPoints = this.inputPoints = this.modalPoints
                        this.showMap.panTo(this.mapPoints)
                        //对地图一进行标注
                        this.addMapOverlay(this.showMap, this.inputLng, this.inputLat, true);
                    }
                }
                //关闭对话框
                $('#appmaps').modal('hide');
            });

            // 关闭
            $('#appmaps').on('hidden.bs.modal', () => {
                //清除标注
                this.modalMap.clearOverlays()
                // 还原信息
                this.modalLng = this.modalLat = ''
                this.modalPoints = {}
                //清除模态框数据
                $('#appmaps').removeData("bs.modal")
                // 销毁地图
                this.modalMap.destroy()
            });
        }

        modalInitMap() {
            // 初始化地图
            this.modalMap = this.initMap("modalmap")
            // 添加当前经纬度标记
            if (!this.isEmpty(this.inputLng) && !this.isEmpty(this.inputLat)) this.addMapOverlay(this.modalMap, this.inputLng, this.inputLat, true);

        }

    }

    // 通过地图选择
    class selectMap extends initialMap {
        // 目前的形式地图只初始化一次，模态框关闭不影响二次打开继续之前的操作
        protected selectMapInitType = false
        // 地图实例对象
        public selectMap: any = {}
        // 地图工具对象
        protected drawingManager: any = {}

        //本次覆盖物对象缓存
        protected overlaysCache = {
            overlays: {},
            hashCode: '',
            drawingMode: ''
        }
        // 绘制覆盖物缓存 hashCode = 覆盖物对象
        protected overlays = {}
        // 绘制覆盖物类型对照 hashCode = 类型
        // Marker 点 || Circle 圆 || Polyline 线 || Polygon 多边 || rectangle 矩形
        protected hashCode = {}
        // 绘制覆盖物选中的小区对照 hashCode = 小区ID
        protected markerID = {
            marker: [],
            polyline: [],
            circle: [],
            rectangle: [],
            polygon: []
        }
        // 选中小区缓存过渡 初次筛选
        protected villageFilterList = {}
        // 选中的小区数组 id = 小区对象
        protected villageList = {}

        constructor() {
            super();

            // 在地图弹窗内进行小区条件筛选
            $(document).on('change', 'select[name="vtype"]', () => {
                this.filter()
            })
            this.watch(this, 'selectProv', () => {
                this.filter()
            })
            this.watch(this, 'selectCity', () => {
                this.filter()
            })
            this.watch(this, 'selectDist', () => {
                this.filter()
            })

            //模态框
            $('#selectMapId').on('shown.bs.modal', () => {
                if (this.selectMapInitType) return false
                // 设置地图高度，达到满屏效果
                this.setHeight()
                // 延迟效果可以让模态框加载时看起来没有卡的感觉
                setTimeout(() => {
                    // 解决因页面产品滚动条导致的点击地图获取的经纬度不准确问题
                    // 让滚动条回滚到顶部
                    document.body.scrollTop = document.documentElement.scrollTop = 0
                    // 初始化模态框
                    this.selectInitMap()
                    // ajax查找 当前地区点的标注并添加在地图上
                    this.ajaxlnglatList(this.selectMap, {
                        id: '',
                        province: this.selectProv,
                        city: this.selectCity,
                        district: this.selectDist,
                        allinfo: 'all'
                    }, true)
                    // 初始化绘制工具
                    this.drawingManagerInit()
                    // 绘制结束后的回调
                    this.drawingManager.addEventListener("overlaycomplete", (e) => {
                        let overlay = e.overlay
                        let hashCode = overlay.hashCode
                        let drawingMode = e.drawingMode
                        this.overlays[hashCode] = overlay
                        this.hashCode[hashCode] = drawingMode
                        // 本次操作的值缓存
                        this.overlaysCache = {
                            overlays: overlay,
                            hashCode: hashCode,
                            drawingMode: drawingMode
                        }

                        // 筛选选中的小区
                        let latLngNum = 0
                        // 初始化
                        this.villageFilterList = {}
                        $.each(this.mapLngLatList, (i: number, val: any) => {
                            latLngNum++
                            // 值的转换为了后面统一使用，对应后期数据库的值
                            let points = this.lnglatToPoints(val.v_maplng, val.v_maplat)
                            let result = false
                            // 只有矩形需要获取覆盖物的范围，其他的直接将覆盖物对象传入即可
                            switch (drawingMode) {
                                case 'polyline':
                                    // 折线
                                    result = BMapGLLib.GeoUtils.isPointOnPolyline(points, overlay)
                                    break;
                                case 'circle':
                                    // 圆
                                    result = BMapGLLib.GeoUtils.isPointInCircle(points, overlay)
                                    break;
                                case 'rectangle':
                                    // 矩形
                                    let bounds = overlay.getBounds()
                                    result = BMapGLLib.GeoUtils.isPointInRect(points, bounds)
                                    break;
                                case 'polygon':
                                    // 多边形
                                    result = BMapGLLib.GeoUtils.isPointInPolygon(points, overlay)
                                    break;
                                default:
                                    break;
                            }

                            if (result == true) {
                                if (!this.markerID[drawingMode][hashCode]) this.markerID[drawingMode][hashCode] = []
                                this.markerID[drawingMode][hashCode].push(val.id)
                                // 缓存本次的值
                                this.villageFilterList[val.id] = val
                            }

                            // 打开弹窗 选中小区缓存筛选
                            if (latLngNum === Object.keys(this.mapLngLatList).length) this.confirmOperate()
                        })
                    });
                    // 标记为已经初始化过
                    if (this.selectMapInitType === false) this.selectMapInitType = true
                }, 100)
            });

            // 清空
            $('#selectMapId .mapreset').on('click', (e: any) => {
                // 重置
                this.mapreset()
                this.listNum('selectMapId')
                this.input()
            })
            // 删除指定小区
            $('#selectMapId').on('click', 'li button', (e) => {
                const domLi = $(e.target).parents('li')
                this.delFilterList(domLi.data('id'))
                domLi.remove()
            })

            // 保存
            $('#selectMapId .button-save').on('click', () => {
                // 将ID写入某个input
                let keysArr = Object.keys(this.villageList)
                let keysStr = keysArr.toString()
                this.input(keysStr)
                //关闭对话框
                $('#selectMapId').modal('hide');
            });

            // 关闭
            $('#selectMapId').on('hidden.bs.modal', () => {
                //清除标注
                // this.modalMap.clearOverlays()
                //清除模态框数据
                // $('#selectMapId').removeData("bs.modal")
                // 销毁地图
                // this.selectMap.destroy()
            });

            // 点击LI地图上打开对应的标注
            $('.villageList ul').on('click', 'li[data-id] h5', (e) => {
                let id = $(e.target).parents('li').data('id')
                let listInfo = this.villageList[id]
                // 转移地图核心为标注点
                let point: any = this.lnglatToPoints(listInfo.maplng, listInfo.maplat)
                this.selectMap.panTo(point);
                // 触发标注点的点击事件
                this.mapCacheMarker[id].trigger('click')
            })
        }

        // 设置同步地图和选中列表展示的高度
        // outerHeight 包含padding margin border
        // height 不含padding margin border
        setHeight() {
            const headerHeight = $("#selectMapId .modal-header").outerHeight(true)
            // const footerHeight = $("#selectMapId .modal-footer").height()
            const wHeight = $(document.body).height()
            const mapHeight = wHeight - headerHeight - 15
            // 设置高度
            $(".selectMapHeight").height(mapHeight)
            // 选中内容高度
            const panelHeading = $(".selectMapHeight .panel-heading").outerHeight(true)
            const panelFooter = $(".selectMapHeight .panel-footer").outerHeight(true)
            const panelBody = $(".selectMapHeight .panel-body").outerHeight(true) - $(".selectMapHeight .panel-body").height()
            $(".selectMapHeight .panel-body").height(mapHeight - panelHeading - panelFooter - panelBody)
        }

        // 设置首次筛选列表内容高度
        setFilterModalBodyHeight() {
            // 首次筛选的内容高度
            const filterListmodalHeight = $("#filterListmodal").outerHeight(true)
            const modalHeader = $("#filterListmodal .modal-header").outerHeight(true)
            const modalFooter = $("#filterListmodal .modal-footer").outerHeight(true)
            const modalBody = $("#filterListmodal .modal-body").outerHeight(true) - $("#filterListmodal .modal-body").height()
            $("#filterListmodal .filterList").height(filterListmodalHeight - modalHeader - modalBody - modalFooter)
        }

        // 初始化地图
        selectInitMap() {
            this.selectMap = this.initMap("selectMap")
        }

        // 实例化鼠标绘制工具
        drawingManagerInit() {
            // 源码:https://github.com/huiyan-fe/BMapGLLib/blob/master/DrawingManager/src/DrawingManager.js#L44
            const styleOptions = {
                strokeColor: '#5E87DB',   // 边线颜色
                fillColor: '#5E87DB',     // 填充颜色。当参数为空时，圆形没有填充颜色
                strokeWeight: 2,          // 边线宽度，以像素为单位
                strokeOpacity: 1,         // 边线透明度，取值范围0-1
                fillOpacity: 0.2          // 填充透明度，取值范围0-1
            };
            const labelOptions = {
                borderRadius: '2px',
                background: '#FFFBCC',
                border: '1px solid #E1E1E1',
                color: '#703A04',
                fontSize: '12px',
                letterSpacing: '0',
                padding: '5px'
            };

            this.drawingManager = new BMapGLLib.DrawingManager(this.selectMap, {
                // isOpen: true, //是否开启绘制模式
                enableDrawingTool: true, // 是否显示工具栏
                enableCalculate: true, // 绘制是否进行测距(画线时候)、测面(画圆、多边形、矩形)
                drawingToolOptions: {
                    enableTips: true,
                    customContainer: 'selectbox_Drawing',
                    hasCustomStyle: true,
                    anchor: BMAP_ANCHOR_TOP_RIGHT,
                    offset: new BMapGL.Size(25, 15), // 偏离值，调整工具的位置
                    scale: 1, // 工具栏缩放比例
                    drawingModes: [
                        // BMAP_DRAWING_MARKER,
                        BMAP_DRAWING_POLYLINE,
                        BMAP_DRAWING_RECTANGLE,
                        BMAP_DRAWING_POLYGON,
                        BMAP_DRAWING_CIRCLE,
                    ]
                },
                enableSorption: true, // 是否开启边界吸附功能
                sorptionDistance: 20, // 边界吸附距离
                enableGpc: true, // 是否开启延边裁剪功能
                circleOptions: styleOptions, // 圆的样式
                polylineOptions: styleOptions, // 线的样式
                polygonOptions: styleOptions, // 多边形的样式
                rectangleOptions: styleOptions, // 矩形的样式
                labelOptions: labelOptions // label的样式
            });
        }

        // 选中区域确定后的处理
        confirmOperate() {
            // 执行循环结果后的内容
            this.addHtmlShow('filterList')
            // 打开筛选模态框
            $('#filterListmodal').modal('show')
            $('#filterListmodal').on('shown.bs.modal', () => {
                this.listNum('filterListmodal')
                // 处理列表
                this.setFilterModalBodyHeight()
            })

            // 筛选中时重选
            $('#filterListmodal .mapreset').on('click', (e: any) => {
                //关闭对话框
                $('#filterListmodal').modal('hide');
                // 主要是取消选中区域覆盖物
                this.mapresetClose()
            })

            // 保存
            $('#filterListmodal .button-save').on('click', () => {
                //关闭对话框
                $('#filterListmodal').modal('hide');
                // 并将保存的结果插入到选中小区表
                this.addHtmlShow('villageList')
            })

            // 删除指定小区
            $('#filterListmodal').on('click', 'li button', (e) => {
                const domLi = $(e.target).parents('li')
                this.delFilterList(domLi.data('id'), 'filterList')
                domLi.remove()
            })

            // 关闭
            $('#selectMapId').on('hidden.bs.modal', () => {
                //清除模态框数据
                $('#selectMapId').removeData("bs.modal")
            })
        }

        // 选中区域HTML输出
        // 判断输出到哪个dom
        addHtmlShow(domclass?) {
            let dom = $(`.${domclass}`).find('ul')
            // 暂时直接输出，不考虑分页问题
            let listNum = domclass === 'filterList' ? 0 : (Object.keys(this.villageList).length || 0)
            let initListNum = 0
            $.each(this.villageFilterList, (i: number, val: any) => {
                // 组织HTML结构
                if (domclass !== 'filterList') {
                    if (this.villageList[i] && Object.keys(this.villageList[i]).length > 0) return true
                    // 赋值给最终结果
                    this.villageList[i] = val
                }
                // 输出html
                let li = this.htmlLi(i, val)
                listNum === 0 ? dom.html(li) : dom.prepend(li)
                listNum++
                initListNum++
                if (initListNum === Object.keys(this.villageFilterList).length) {
                    this.listNum('selectMapId')
                }
            })
        }

        // 组织HTML结构
        htmlLi(key, val) {
            // 组织HTML结构
            let address = val.v_city + val.v_district + val.v_address
            return `<li class="list-group-item village-list-item" data-id="${key}">
                        <h5>${val.v_name}</h5>
                        <button type="button" class="float-right close">
                            <i class="icon wb-close m-0 font-danger" aria-hidden="true"></i>
                        </button>
                        <p>地址：${address}</p>
                    </li>`
        }

        // 重选，或者取消
        mapresetClose() {
            // 主要是取消选中区域覆盖物
            let hashCode = this.overlaysCache.hashCode
            let drawingMode = this.overlaysCache.drawingMode
            delete this.overlays[hashCode]
            delete this.hashCode[hashCode]
            delete this.markerID[drawingMode][hashCode]
            this.selectMap.removeOverlay(this.overlaysCache.overlays)
        }

        // 清空选中的所有内容操作
        mapreset() {
            // 无法禁止在removeOverlay删除小区标注点，换成单个删除
            $.each(this.overlays, (i, val: any) => {
                this.selectMap.removeOverlay(val)
                delete this.overlays[i]
                // 后期若是要达到精准需要单独处理
                delete this.hashCode[i]
            })
            // 全部还原
            this.markerID = {
                marker: [],
                polyline: [],
                circle: [],
                rectangle: [],
                polygon: []
            }
            // 全部还原
            this.villageList = {}
            $('.villageList ul').html(`<li class="list-group-item">没有选中小区</li>`)
        }

        // 删除指定的数据
        delFilterList(id, domclass?) {
            if (domclass === 'filterList') {
                delete this.villageFilterList[id]
                this.listNum('filterListmodal', 'del')
            } else {
                delete this.villageList[id]
                this.listNum('selectMapId', 'del')
            }
        }

        // 计算选中个数
        listNum(domclass?, type?) {
            if (domclass === 'filterListmodal') {
                let listNum = this.villageFilterList ? Object.keys(this.villageFilterList).length : 0
                $('#filterListmodal .listNum').html(listNum)
                if (listNum === 0 && type === 'del') {
                    this.mapresetClose()
                    //关闭对话框
                    $('#filterListmodal').modal('hide');
                }
            } else {
                let listNums = this.villageList ? Object.keys(this.villageList).length : 0
                $('#selectMapId .listNum').html(listNums)
                $('button[data-target="#selectMapId"] .listNum').html(listNums > 0 ? listNums : '')
                if (listNums === 0 && type === 'del') this.mapreset()
            }
        }

        // 将指传递到input
        input(keysStr?) {
            const inputVid = $('input[name="v_id"]')
            inputVid.val(keysStr)
            inputVid.trigger('change')
        }

        // 根据条件筛选小区
        filter() {
            // 获取指定的值
            let vtype = $('select[name="vtype"]').val()
            vtype = vtype ? vtype.join(',') : ''
            // 需要将缓存全部删除掉
            $('#selectMapId .mapreset').trigger('click')
            //清除标注
            this.selectMap.clearOverlays()
            // 提交后端
            this.ajaxlnglatList(this.selectMap, {
                id: '',
                province: this.selectProv,
                city: this.selectCity,
                district: this.selectDist,
                vtype: vtype,
                allinfo: 'all'
            }, true)

            // 调整地图核心位置
            this.citySyncMap(this.selectMap)
        }

    }

    // @ts-ignore
    export function bmaps() {
        // 模态框
        if ($('#modalmap').length) {
            console.log('模态框类型')
            new modalMap()
        } else if ($('#showmap').length) {
            console.log('纯展示类型')
            // 展示形式
            new showMap()
        } else if ($('#selectMap').length) {
            // 地图选择形式
            // $('button[data-target="#selectMapId"]').on('click', () => {})
            // 目前的形式地图只初始化一次，模态框关闭不影响二次打开继续之前的操作
            new selectMap()
            // 测试时自动启动模态框
            // $('button[data-target="#selectMapId"]').click()
        }
    }
}