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

function getInfo(info) {
    console.log(info);
}
window.getInfo = getInfo;
import { mapState } from 'vuex';
import Marker from '../utils/Marker';
import { getStatusInfo } from '../utils/OrderUtils';
export default {
    name: '',
    data() {
        return {
            map: null,
            orderInfo: null,
            userLoaction: null,
            merchantLoaction: null,
        };
    },
    computed: {
        ...mapState(['userInfo']),
        center() {
            if (
                this.nowStatus.nowImgType === 'merchant' &&
                this.merchantLoaction
            ) {
                return this.merchantLoaction;
            } else if (
                this.nowStatus.nowImgType === 'user' &&
                this.userLoaction
            ) {
                return this.userLoaction;
            } else {
                return { lat: 40.02906301748584, lng: 116.25499991104516 };
            }
        },
        userMarker() {
            if (this.map && this.userLoaction) {
                return new Marker({
                    map: this.map,
                    position: new TMap.LatLng(
                        this.userLoaction.lat,
                        this.userLoaction.lng,
                    ),
                    type: 'user',
                    nowStatus: this.nowStatus,
                });
            }
            return null;
        },
        merchantMarKer() {
            if (this.map && this.merchantLoaction) {
                return new Marker({
                    map: this.map,
                    position: new TMap.LatLng(
                        this.merchantLoaction.lat,
                        this.merchantLoaction.lng,
                    ),
                    type: 'merchant',
                    nowStatus: this.nowStatus,
                });
            }
            return null;
        },
        nowStatus() {
            if (this.$route.query) {
                return getStatusInfo(this.$route.query);
            } else {
                return null;
            }
        },
    },
    watch: {
        '$route.query'() {
            if (this.$route.query.location) {
                this.userLoaction = {
                    lat: this.$route.query.location.split(',')[1],
                    lng: this.$route.query.location.split(',')[0],
                };
            }
            if (this.$route.query.merchantLocation) {
                this.merchantLoaction = {
                    lat: this.$route.query.merchantLocation.split(',')[1],
                    lng: this.$route.query.merchantLocation.split(',')[0],
                };
            }

            this.$nextTick(() => {
                setTimeout(() => {
                    this.initMap();
                }, 1000);
            });
        },
    },
    mounted() {
        if (this.$route.query.location) {
            this.userLoaction = {
                lat: this.$route.query.location.split(',')[1],
                lng: this.$route.query.location.split(',')[0],
            };
        }
        if (this.$route.query.merchantLocation) {
            this.merchantLoaction = {
                lat: this.$route.query.merchantLocation.split(',')[1],
                lng: this.$route.query.merchantLocation.split(',')[0],
            };
        }

        this.$nextTick(() => {
            setTimeout(() => {
                this.initMap();
            }, 1000);
        });
    },
    methods: {
        initMap() {
            // 初始化地图
            this.map = new TMap.Map('container', {
                zoom: 15, // 设置地图缩放级别
                center: new TMap.LatLng(this.center.lat, this.center.lng), // 设置地图中心点坐标
                doubleClickZoom: false,
            });
            let donutList = [
                this.userMarker,
                this.merchantMarKer,
                new Marker({
                    map: this.map,
                    position: new TMap.LatLng(
                        40.02906301748584,
                        116.25499991104516,
                    ),
                    type: 'rider',
                    nowStatus: this.nowStatus,
                }),
            ];
            donutList.forEach((donut, index) => {
                donut.on('click', () => {
                    console.log(
                        `第${index}个环形图被点击，位置为${donut.position}`,
                    );
                });
            });
        },
    },
};
</script>
<style lang="less" scoped>
#container {
    width: 100%;
    height: 100vh;
}
</style>
