<template>
    <div id="container"></div>
</template>
<script>
window.info = '';

function getInfo(info) {
    console.log(info);
}
window.getInfo = getInfo;
import Marker from '../utils/Marker';
import { getStatusInfo } from '../utils/OrderUtils';
export default {
    name: '',
    data() {
        return {
            map: null,
            userMarker: null,
            merchantMarKer: null,
            riderMarKer: null,
            center: null,
            location: null,
            merchantLocation: null,
            riderLocation: null,
        };
    },
    mounted() {
        window.setLocation = this.setLocation;
    },
    methods: {
        setLocation(orderInfo, location, merchantLocation, riderLocation) {
            this.nowStatus = getStatusInfo(orderInfo);
            this.location = location;
            this.merchantLocation = merchantLocation;
            this.riderLocation = riderLocation;

            if (this.nowStatus.nowImgType === 'merchant' && merchantLocation) {
                this.center = merchantLocation;
            } else if (this.nowStatus.nowImgType === 'rider' && riderLocation) {
                this.center = riderLocation;
            } else {
                this.center = location;
            }

            this.$nextTick(() => {
                this.initMap();
            });
        },
        initMap() {
            // 初始化地图
            if (!this.map) {
                this.map = new TMap.Map('container', {
                    zoom: 15, // 设置地图缩放级别
                    center: new TMap.LatLng(this.center.lat, this.center.lng), // 设置地图中心点坐标
                    doubleClickZoom: false,
                });
            } else {
                this.map.setCenter(
                    new TMap.LatLng(this.center.lat, this.center.lng),
                );
            }

            if (this.userMarker) {
                this.userMarker.setMap(null);
            }
            this.userMarker = new Marker({
                map: this.map,
                position: new TMap.LatLng(this.location.lat, this.location.lng),
                type: 'user',
                nowStatus: this.nowStatus,
            });
            if (this.merchantMarKer) {
                this.merchantMarKer.setMap(null);
            }
            this.merchantMarKer = new Marker({
                map: this.map,
                position: new TMap.LatLng(
                    this.merchantLocation.lat,
                    this.merchantLocation.lng,
                ),
                type: 'merchant',
                nowStatus: this.nowStatus,
            });
            if (this.riderMarKer) {
                this.riderMarKer.setMap(null);
            }
            this.riderMarKer = new Marker({
                map: this.map,
                position: new TMap.LatLng(
                    this.riderLocation.lat,
                    this.riderLocation.lng,
                ),
                type: 'rider',
                nowStatus: this.nowStatus,
            });
        },
    },
};
</script>
<style lang="less" scoped>
#container {
    width: 100%;
    height: 100vh;
}
</style>
