var me = new Vue({
    el: '#mapVue',
    data: {
        map: null, //map
        getdata: null,
        marker: null,
        layuiLayer: null,
        nowIndex: null,

        LXdhStart: null,
        LXdhEnd: null,
        LxdhLine: null,
        snumber: '',
        activeName: 'first',

        //基础路径
        // pathUrl: "http://localhost:89",
        pathUrl: this.$store.state.piAPI + "",

        // move: null, //存放移动实例

        //存放实时坐标
        lat: "",
        lng: "",
        seedata: '',
        nowPosition: '',
        shipingPopupShow: false,
        shipingM3u8Url: '',
        resultFeedbackPopupShow: false,
        popupDisplay: "none",

        haveShishiweizhi: 1,
        isFromJQ: false,
        chulijieguo: '',
        wentifankui: '',
        oldlat: '',
        oldlng: '',
        haveJDWD: true,
        // 1 代表巡逻路线，2代表巡逻区域
        tab: 1,

        //路线数据
        routeName: "",
        lxbz: "",

        //区域数据
        regionName: "",
        qybz: ""

    },
    methods: {
        getDataList() {
            var that = this;
            that.beginCome();
        },
        beginCome() {
            //url解码
            this.snumber = this.getQueryVariable('snumber');
            this.map = this.beginMap(this.map); //创建并接受map
            this.map.invalidateSize(true); //应用地图高度
        },
        //url解码
        getQueryVariable(variable) {
            var that = this;
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) {
                    that.isFromJQ = true; //确认是警情进来
                    return JSON.parse(decodeURI(pair[1]));
                } //解码url 和 JSON
            }
            return (false);
        },
        beginMap(map) {
            var createMap = () => {
                map = L.map('map', { //初始化地图
                    center: [28.7012481186582, 115.852228372357],
                    zoom: 20,
                    minZoom: 2,
                    maxZoom: 17,
                    attributionControl: false, //去掉右下角
                    zoomControl: false, //去掉缩放
                });
                L.tileLayer( //添加切片图层
                    // "https://webmap-tile.sf-express.com/MapTileService/rt?x={x}&y={y}&z={z}", {//顺丰地图
                    "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal", { //顺丰地图
                    }
                ).addTo(map);
            }
            createMap();
            var markers = L.markerClusterGroup();
            var transportIcon = L.Icon.extend({ //图标初始化
                options: {
                    iconSize: [50, 30], // 图标尺寸
                }
            });

            //画巡逻路线
            this.showPolyLine(map);
            return map; //抛出map
        },
        Submit() {
            var data = this.getdata[0];
            // console.log(data)
            // receives() {// 接受任务
            var url = data.url,
                Pid = data.id,
                id = data.userid, //警察id
                name = data.username, //警察id
                datas = {
                    id: Pid,
                    securityId: id,
                    alarmPeople: name
                };
            // console.log(datas);
            axios({
                    url: url +
                        `?securityId=${datas.securityId}&id=${datas.id}&alarmPeople=datas.alarmPeople`,
                    // data: datas,
                    header: {
                        "content-type": "application/x-www-form-urlencoded"
                    },
                    method: 'POST',

                }).then(res => {
                    // console.log(res, 123);

                    $('#loding').show();
                    var time = setTimeout(() => {
                        $('#loding').hide();
                    }, 1000)
                    $('#jieshou').hide();
                    $('#wanchen').show();
                    $('#um-m-t-states').empty();
                    $('#um-m-t-states').append('处理中');
                })
                // console.log( 123);

        },
        //巡逻路线
        showPolyLine(map) {
            var that = this;
            //获取巡逻路线信息
            $.ajax({
                url: that.pathUrl + '/duty/duty/selectInfo',
                type: 'POST',
                dataType: 'JSON',
                data: {
                    snumber: that.snumber
                },
                success: function(result) {
                    //如果巡逻路线信息，展示
                    if (result.code == 200) {
                        if (JSON.stringify(result.data) != "{}") {
                            var entityArr = [];
                            var coordinate = result.data[0].routeInfo.match(/\(([^)]*)\)/).toString();
                            var a = coordinate.indexOf("(");
                            var b = coordinate.indexOf(")");
                            coordinate = coordinate.substring(a + 1, b) + "";
                            if (coordinate && coordinate != '') {
                                coordinate = coordinate.split(',');
                                for (var i = 0; i < coordinate.length; i++) {
                                    entityArr.push([Number(coordinate[i].split(' ')[1]), Number(coordinate[i].split(' ')[0])]);
                                }
                            }
                            if (that.index == 2) {
                                map.removeLayer(that.layer);
                            }
                            that.routeName = result.data[0].routeName;
                            that.lxbz = result.data[0].lxbz;
                            that.layer = L.polyline(entityArr, { color: 'red' }).addTo(map);
                            map.addLayer(that.layer);
                            that.index = 2;
                            // zoom the map to the polyline
                            map.fitBounds(that.layer.getBounds());
                        }
                    }
                }
            });

        },
        //巡逻区域
        showPolygon(map) {
            var that = this;
            $.ajax({
                url: that.pathUrl + '/duty/duty/selectInfo',
                type: 'POST',
                dataType: 'JSON',
                data: {
                    snumber: that.snumber
                },
                success: function(result) {
                    //如果巡逻区域信息，展示
                    if (result.code == 200) {
                        if (JSON.stringify(result.data) != "{}") {
                            var entityArr = [];
                            var coordinate = result.data[0].coordinater.match(/\(([^)]*)\)/).toString();
                            var a = coordinate.indexOf("(");
                            var b = coordinate.indexOf(")");
                            coordinate = coordinate.substring(a + 1, b) + "";
                            if (coordinate && coordinate != '') {
                                coordinate = coordinate.split(',');
                                for (var i = 0; i < coordinate.length; i++) {
                                    entityArr.push([Number(coordinate[i].split(' ')[1]), Number(coordinate[i].split(' ')[0])]);
                                }
                            }
                            if (that.nowIndex == 2) {
                                map.removeLayer(that.layer);
                            }
                            that.layer = L.polygon(entityArr, { color: 'red' }).addTo(map);
                            that.regionName = result.data[0].regionName;
                            that.qybz = result.data[0].qybz;
                            map.addLayer(that.layer);
                            that.nowIndex = 2;
                            // zoom the map to the polygon
                            map.fitBounds(that.layer.getBounds());
                        }
                    }
                }
            });

        },
        //巡逻路线区域切换
        showPatrol(tab) {
            if (tab == 1) {
                this.tab = 1;
                //切换到巡逻路线
                this.showPolyLine(this.map);
            }
            if (tab == 2) {
                this.tab = 2;
                //切换到巡逻区域
                this.showPolygon(this.map);
            }
        },
        SubmitDown() {
            // $('#SubmitDown').show();
            // console.log(uni.navigateTo)
            uni.navigateTo({
                url: '/pages/poput/mapJQtijiao/mapJQtijiao/mapJQtijiao?id=' + this.getdata[0].id
            });
        },
        SubmitSD() {
            console.log(this.chulijieguo, 'chulijieguo')
            console.log(this.wentifankui, 'wentifankui')
        },

        //定位当前位置
        locationMap() {
            this.map.setView([this.lat, this.lng], 20);
        },
        //定位巡逻路线或者区域
        toJQposition() {
            if (this.tab == 1) {
                //切换到巡逻路线
                this.showPolyLine(this.map);
            }
            if (this.tab == 2) {
                //切换到巡逻区域
                this.showPolygon(this.map);
            }
        },
        // 获取实时位置
        getLocationData() {
            var that = this;
            var geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");
            var positionNum = 0;
            var options = {
                timeout: 8000
            };

            function showPosition(position) {
                var adCode = position.adCode; //邮政编码
                var nation = position.nation; //中国
                var city = position.city; //城市
                var addr = position.addr; //详细地址
                that.lat = position.lat; //
                that.lng = position.lng; //火星坐标 //TODO 实现业务代码逻辑 

                if (that.LXdhStart != null) {
                    that.map.removeLayer(that.LXdhStart);
                }

                //绘制起点和终点
                that.LXdhStart = L.markerClusterGroup();

                var transportIcon = L.Icon.extend({ //图标初始化
                    options: {
                        iconSize: [50, 50], // 图标尺寸
                    }
                });

                var qd = new transportIcon({
                    iconUrl: './img/dingw.gif'
                });

                that.LXdhStart.addLayer(L.marker([that.lat, that.lng], {
                    icon: qd,
                }));

                that.map.addLayer(that.LXdhStart);

            };

            function showErr() {
                //TODO 如果出错了调用此方法 
            };

            geolocation.getLocation(showPosition, showErr, options);
        },
        getDHLine(x, y) {

            var that = this;

            //获取导航信息
            axios({
                method: "get",
                url: `https://web.byisf.com/sf/rp/v2/api`,
                params: {
                    ak: "1986afc8a5744263971b7f2482253dfc",
                    x1: that.lng,
                    y1: that.lat,
                    x2: x,
                    y2: y,
                    type: "1",
                    strategy: "0",
                    opt: "sf2"
                },
            }).then((res) => {
                if (res.data.result.coords == undefined) {
                    // console.log('目标太远 或不存在路径')
                } else {

                    var resdata = res.data.result.coords;
                    // console.log(res)
                    var data = [];
                    for (var i = 0; i < resdata.length; i++) {
                        var xy = [];
                        xy.push(resdata[i][1]);
                        xy.push(resdata[i][0]);
                        data.push(xy);
                    }
                    // var w = resdata[0][0] - resdata[resdata.length - 1][0];
                    // w = Math.abs(w);
                    // w = w / 0.00000899;
                    // w = w.toFixed(2);
                    // console.log(w);
                    $('#t-mi').empty();
                    $('#t-mi').append(res.data.result.dist + '米');
                    $('#t-fz').empty();
                    $('#t-fz').append(res.data.result.flen + '分钟');

                    if (that.LXdhEnd != null) {
                        that.map.removeLayer(that.LXdhEnd);
                    }
                    if (that.LxdhLine != null) {
                        that.map.removeLayer(that.LxdhLine);
                    }

                    //绘制起点和终点
                    that.LXdhEnd = L.markerClusterGroup();

                    var transportIcon = L.Icon.extend({ //图标初始化
                        options: {
                            iconSize: [56, 32], // 图标尺寸
                        }
                    });

                    var zd = new transportIcon({
                        iconUrl: './img/zd2.png'
                    });
                    // var qd = new transportIcon({
                    // 	iconUrl: './img/qd.png'
                    // });

                    var qdzb = res.data.result.query;

                    var x = resdata[resdata.length - 1][0];
                    var y = resdata[resdata.length - 1][1];

                    // that.LXdhEnd.addLayer(L.marker([y, x], {//不要图标
                    // 	icon: zd,
                    // }));
                    // markers.addLayer(L.marker([qdzb.start.y, qdzb.start.x], {
                    // 	icon: qd,
                    // }));

                    that.map.addLayer(that.LXdhEnd);

                    // that.showPolyLine(data);
                }
            });
        },
        refreshMap() {
            console.log('shuaxin')
        },
    },
    created() {},
    mounted() {
        this.getDataList();
        //获取当前定位
        this.getLocationData();
        // var time = setInterval(() => {
        //     if (this.haveShishiweizhi == 1) {
        //         this.getLocationData();
        //     } else if (this.haveShishiweizhi == 2) {
        //         clearInterval(time);
        //         time = null;
        //     }
        // }, 3000)
    },
    wacth: {}
})