<template>
    <div id="mapContainer"></div>
</template>

<script>
    import AMapLoader from '@amap/amap-jsapi-loader';
    import {queryMulVel, gpsqueryMulVel} from '../../api/consigner/vehicle';

    export default {
        data() {
            return {
                mapInstance: null,
                markers:[]
            };
        },
        methods: {
            fetchDataAndUpdateMap() {
                // 请求后端数据
                gpsqueryMulVel().then((response) => {
                    const res = response.data;
                    //const firstVcl = res.data.data.firstVcl; // 获取首个车辆信息
                    const others = res.data.data; // 获取其他车辆信息

                    // 清除之前的标记
                    this.markers.forEach(marker => {
                        marker.setMap(null);
                    });
                    this.markers = [];

                    /*// 添加首个车辆标记
                    if (firstVcl && firstVcl.lon && firstVcl.lat) {
                        const marker = new AMap.Marker({
                            position: [firstVcl.lon / 600000.0, firstVcl.lat / 600000.0],
                            map: this.mapInstance,
                            title: firstVcl.vno,
                            label: {
                                content: firstVcl.vno,
                                offset: new AMap.Pixel(0, -20) // 偏移量，使标题显示在标记的上方
                            }
                        });
                        this.markers.push(marker);
                    }*/
                    if (others) {
                        others.forEach(vehicle => {
                            if (vehicle.lon && vehicle.lat) {
                                const marker = new AMap.Marker({
                                    position: [vehicle.lon, vehicle.lat],
                                    map: this.mapInstance,
                                    title: vehicle.vehicle,
                                    label: {
                                        content: vehicle.vehicle,
                                        offset: new AMap.Pixel(0, -20) // 偏移量，使标题显示在标记的上方
                                    }
                                });
                                this.markers.push(marker);
                            }
                        });
                    }
                    // 自动调整地图视野，确保所有标记都可见
                    /*if (this.markers.length > 0) {
                        const bounds = new AMap.Bounds();
                        this.markers.forEach(marker => {
                            bounds.extend(marker.getPosition());
                        });
                        this.mapInstance.setBounds(bounds);
                    }*/
                    if(others && others[0].lon && others[0].lat){
                        this.mapInstance.setCenter([others[0].lon,others[0].lat])
                    }
                }).catch(error => {
                    console.error('Failed to fetch data:', error);
                });
            }
        },
        mounted() {
            AMapLoader.load({
                key: 'fdb27c13681d084e85ff8457b5cbe540',
                version: '2.0',
                plugins: [],
            }).then((AMap) => {
                this.mapInstance = new AMap.Map('mapContainer', {
                    zoom: 5,
                    center: [116.397428, 39.90923], // 默认中心点位置
                    //viewMode: '3D', // 使用3D视图
                    //showIndoorMap: false,
                    //showLabel: false,
                    // mapStyle: 'amap://styles/dark',
                    //mapStyle: 'amap://styles/fresh',
                });

                // 首次加载数据并更新地图
                this.fetchDataAndUpdateMap();

                // 启动定时器，每10分钟刷新一次数据并更新地图
                setInterval(() => {
                    this.fetchDataAndUpdateMap();
                }, 10 * 60 * 1000);
            }).catch((err) => {
                console.error('Failed to load AMap:', err);
            });
        },
    };
</script>
<style>
    #mapContainer {
        width: 100%;
        height: 100vh;
    }
</style>