/*
 * @Author: Morpheus
 * @Date: 2021-08-26 16:22:11
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-08-28 15:03:25
 */
var me = new Vue({
    el: '#mapVue',
    data: {
        map: null, //map
        getdata: null,
        marker: null,
        layuiLayer: null,
        nowIndex: null,

        LXdhStart: null,
        LXdhEnd: null,
        LxdhLine: null,

        activeName: 'first',

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

        //存放实时坐标
        lat: "",
        lng: "",
        seedata: '',
        nowPosition: '',
        shipingPopupShow: false,
        shipingM3u8Url: '',
        resultFeedbackPopupShow: false,
        popupDisplay: "none",
        userId: null,
        geolocation: null
    },
    methods: {

        beginCome() {
            var resultData = []
            //url解码

            var jurisdictionId = this.GetQueryString('id')

            this.userId = this.GetQueryString('userid')

            var deptid = this.GetQueryString('deptid')

            var roleName = this.GetQueryChinese('roleName')

            console.log(roleName)

            var url = ''

            if (roleName == '保安公司管理员') {

                url = 'http://61.131.136.25:2080/api/blade-user/pages?&current=1&size=999999&deptId=' + deptid

            } else {

                url = 'http://61.131.136.25:2080/api/blade-user/pages?dispatch=0&jurisdiction=' + jurisdictionId + '&current=1&size=999999'

            }

            axios.get(url).then((res) => {

                if (res.data.data.records.length > 0) {
                    res.data.data.records.forEach(item => {
                        if (item.longitude && item.latitude && item.roleId != this.userId) {
                            resultData.push(item)
                        }
                    })
                }

                this.map = this.beginMap(this.map, resultData); //创建并接受map
                this.move = new myDomMove('#seedata', '.title', '#map');
                this.map.invalidateSize(true); //应用地图高度
                this.move.followFinger(this.map, 'down');

            })

        },
        //url解码
        GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
        GetQueryChinese(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return null;
        },
        beginMap(map, data) {
            var that = this,
                center = [28.708432053474827, 115.85883507433789];
            // url = `http://s16s652780.51mypc.cn/api/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
            // url = `http://localhost:89/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
            this.nowPosition = center;
            // axios.post(url).then((res) => {
            //     if (res.data.data.length != 0) {
            //         var dat = res.data.data[0];
            //         for (var key in dat) {
            //             if (dat[key] == null || dat[key] == '') {
            //                 dat[key] = '暂无'
            //             }
            //         }
            //         this.seedata = dat;

            //     } else {
            //         this.seedata = data[0];
            //     }
            // })

            var createMap = () => {
                map = L.map('map', { //初始化地图
                    center: center,
                    zoom: 10,
                    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: [30, 30], // 图标尺寸
                }
            });

            var wzIcon = new transportIcon({
                iconUrl: './img/wz.png'
            });

            var setData = (a) => { //定义图标
                marker = L.marker([Number(a.latitude), Number(a.longitude)], {
                    icon: wzIcon,
                    // icon: a.dtype == 0 ? carIcon : a.dtype == 1 ? planeIcon : a.dtype == 2 ? busIcon : '',
                    // title: title,
                    myData: { //自定义数据
                        ...a
                    }
                });
            }
            for (var i = 0; i < data.length; i++) {
                var a = data[i];
                if (a.jd == '' || a.wd == '') {
                    console.log('没有坐标', i)
                } else {
                    setData(a);
                    // that.getDHLine(a.jd, a.wd);
                }
                markers.addLayer(marker);
            }
            map.addLayer(markers);

            markers.on('click', function (a) {
                // that.drawer = true;
                that.seedata = a.layer.options.myData;
                that.nowPosition = [that.seedata.wd, that.seedata.jd]
                $('#seedata').css('top', '');


                $('#seedata .content').html(`<div>
                        <label for="">所属公司:</label>
                            ${that.seedata.deptName}
                    </div>
                    <div>
                        <label for="">保安姓名:</label>
                            ${that.seedata.realName}
                    </div>`);



                $('#seedata').stop().show();

                $('#seedata .clear').click(function () {

                    $('#seedata').stop().hide();

                    $('#map').css("height", (index, value) => { //改变地图高度
                        return '100%';
                    })
                })


                $('#map').css("height", (index, value) => { //改变地图高度
                    return '80%';
                })
                map.invalidateSize(true); //应用地图高度
                that.move.destruction();
                that.move.followFinger(map, 'down');

            });
            this.nowPosition = center;


            this.getLocationData(this.geolocation);

            return map; //抛出map
        },
        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) => {
                var resdata = res.data.result.coords;
                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);
                }

                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/zd.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);
            });
        },
        showPolyLine(xy) {
            var that = this;
            that.LxdhLine = L.polyline(xy, {
                color: 'red'
            }).addTo(that.map);

            // zoom the map to the polyline
            that.map.fitBounds(that.LxdhLine.getBounds())
        },
        //定位警情位置
        titleClick() {
            this.map.setView(this.nowPosition, 20);
        },
        //定位当前位置
        locationMap() {
            this.map.setView([this.lat, this.lng], 20);
        },
        shipingClick(open) { //打开视频
            if (open) {
                this.openRealVideoBox(this.seedata.serialNumber, this.seedata.channelNumber, this.seedata.deviceNumber, this.seedata.manufacturer);
            } else {
                this.shipingPopupShow = false;
            }
        },
        resultFeedbackClick() { //结果反馈跳转小程序
            uni.webView.navigateTo({
                url: `../poput/workbench/policeDetails/policeDetails?id=${this.seedata.id}`
            });
        },
        openRealVideoBox(serialNumber, channelNumber, deviceNumber, manufacturer) { //获取视频地址
            var that = this;
            if (manufacturer == "HK") {
                axios
                    .get(
                        `/api/equipment/equipment/selectEquimentPlayInfo?number=${deviceNumber}&bmp=m3u8&manufacturer=${manufacturer}`
                    )
                    .then((result) => {
                        that.videoSource = result.data.data.address;
                        that.shipingM3u8Url = decodeURIComponent(that.videoSource);
                        that.shipingPopupShow = true;
                    })
                    .ce;
            } else {
                var newAxios = axios.create({
                    baseURL: "https://web.byisf.com:18000",
                    withCredentials: false,
                    headers: {
                        "Content-type": "application/x-www-form-urlencoded",
                    },
                });
                newAxios
                    .post(
                        "/api_control", {}, {
                            params: {
                                param: JSON.stringify({
                                    PktType: "GetAccessToken"
                                }),
                            },
                        }
                    )
                    .then((res) => {
                        newAxios
                            .get(
                                `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
                            )
                            .then((result) => {
                                that.videoSource = result.data.data.m3u8;
                                that.shipingM3u8Url = decodeURIComponent(that.videoSource);
                                that.shipingPopupShow = true;
                            });
                    });
            }
        },
        upData() {
            console.log('上传信息成功')
        },
        getLocationData(geolocation) {
            var that = this;
            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);

        },

    },
    created() {},
    mounted() {
        this.geolocation = new qq.maps.Geolocation("T7RBZ-62U3X-RSQ4P-ZZVCB-WE7JT-HRBOG", "mapqq");

        this.beginCome();

        var that = this;

        setInterval(() => {

            that.getLocationData(that.geolocation);

        }, 30000);

    },
    wacth: {}
})