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

        activeName: 'first',

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

        seedata: '',
    },
    methods: {
        getDataList() {
            var that = this;
            var url = 'https://web.byisf.com/api/equipment/equipment/listAll';
            axios.get(url).then((res) => {
                that.getdata = res.data.data;
                that.beginCome();
            })
        },
        beginCome() {
            // this.getdata = this.getQueryVariable('data');//url解码

            this.map = this.beginMap(this.map, this.getdata);//创建并接受map
            this.move = new myDomMove('#seedata', '.title', '#map');
            var dy = document.documentElement.clientHeight - 50;
            $('#seedata').animate({ top: dy + "px" }, 10);
            $('#map').css("height", (index, value) => {//改变地图高度
                return '100%';
            })
            this.map.invalidateSize(true);//应用地图高度
            this.move.followFinger(this.map, 'up');
        },
        // getQueryVariable(variable) {
        //     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) { return JSON.parse(decodeURI(pair[1])); }//解码url 和 JSON
        //     }
        //     return (false);
        // },
        beginMap(map, data) {
            var that = this;
            var createMap = () => {
                map = L.map('map', { //初始化地图
                    center: [28.658056100535727, 115.85803985595703],
                    zoom: 12,
                    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", {//顺丰地图
                    // "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}", {

                    // subdomains: ["1", "2", "3", "4"],
                    // attribution: "高德"
                }
                ).addTo(map);
            }
            createMap();
            var markers = L.markerClusterGroup();

            var transportIcon = L.Icon.extend({ //图标初始化
                options: {
                    iconSize: [30, 30], // 图标尺寸
                    // iconAnchor: [30, 30], // 图标偏移量
                    // popupAnchor: [-20, -20] // 弹出框偏移量
                }
            });
            var carIcon = new transportIcon({ //引入图标
                iconUrl: './img/gray.png'
            }),
                planeIcon = new transportIcon({
                    iconUrl: './img/green.png'
                }),
                busIcon = new transportIcon({
                    iconUrl: './img/red.png'
                });
            console.log(data, 43545343)
            var setData = (a) => {//定义图标
                marker = L.marker([a.wd, a.jd], {
                    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];
                var title = a.title;
                if (a.dtype == 0) {
                    setData(a);
                } else if (a.dtype == 1) {
                    setData(a);
                } else if (a.dtype == 2) {
                    setData(a);
                }
                // marker.bindPopup(title);
                markers.addLayer(marker);
            }
            map.addLayer(markers);

            markers.on('click', function (a) {
                // that.drawer = true;
                that.seedata = a.layer.options.myData;
                $('#seedata').css('top', '');
                $('#map').css("height", (index, value) => {//改变地图高度
                    return '50%';
                })
                map.invalidateSize(true);//应用地图高度
                // console.log(a.layer.options.myData);
                that.move.destruction();
                that.move.followFinger(map, 'down');

            });

            // map.on('mousemove', (e) => {//实时显示坐标
            //     let latlng = e.latlng;
            //     console.log(latlng);// {lat: 30.59, lng: 114.32}
            // });
            return map;//抛出map
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    },
    created() {
    },
    mounted() {
        this.getDataList();
        // this.getdata = this.getQueryVariable('data');//url解码

        // this.map = this.beginMap(this.map, this.getdata);//创建并接受map
        // this.move = new myDomMove('#seedata', '.title', '#map');
        // var dy = document.documentElement.clientHeight - 50;
        // $('#seedata').animate({ top: dy + "px" }, 10);
        // $('#map').css("height", (index, value) => {//改变地图高度
        //     return '100%';
        // })
        // this.map.invalidateSize(true);//应用地图高度
        // this.move.followFinger(this.map, 'up');
    }
})