<template>
    <div class="app-container home" id="map-content"> </div>
</template>

<script>
import { listProject } from '@/api/basic/project'
export default {
    name: 'Index',
    data() {
        return {
            map: null,
            markers: [],
        }
    },
    methods: {
        // 获取所有项目
        async getProjectList() {
            const { rows: res } = await listProject({
                pageNum: 1,
                pageSize: 1000,
            })

            this.$nextTick(() => {
                if (!this.map) {
                    this.initMap()
                }

                if (res.length > 0) {
                    res.forEach((item) => {
                        this.addMarker(item)
                    })
                }
            })
        },

        // 地图初始化
        initMap() {
            this.map = new BMapGL.Map('map-content') // 创建地图实例
            let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
            this.map.centerAndZoom(point, 12) // 初始化地图，设置中心点坐标和地图级别
            this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
        },

        // 添加标记点
        addMarker(item) {
            const point = new BMapGL.Point(item.longitude, item.latitude)
            const icon = new BMapGL.Icon(require('@/assets/images/location.png'), new BMapGL.Size(36, 36), {
                anchor: new BMapGL.Size(12, 24), // 图标锚点，使图标底部中心点与坐标点重合
            })

            // 创建marker并应用自定义图标
            const marker = new BMapGL.Marker(point, {
                icon: icon,
            })

            this.map.addOverlay(marker)

            // 创建自定义图标，设置为#002db6颜色

            // 添加label在标点下方并居中
            const label = new BMapGL.Label(item.proName, {
                position: point,
                offset: new BMapGL.Size(0, 0), // 调整偏移量，使文字在marker正下方
            })
            // 设置label样式
            label.setStyle({
                color: '#002db6', // 文字颜色
                backgroundColor: 'transparent', // 透明背景
                border: 'none', // 无边框
                textAlign: 'center', // 文字居中
                padding: '5px',
                whiteSpace: 'nowrap', // 防止文字换行
                fontSize: '18px',
                transform: 'translateX(-45%)',
            })
            this.map.addOverlay(label)

            // 创建信息窗口内容
            const infoWindow = new BMapGL.InfoWindow(`
        <div style="padding: 10px;">
            <h3 style="color: #002db6; margin: 0 0 10px 0; font-size: 18px;">${item.proName}</h3>
            <p>负责人: ${item.chargePerson}</p>
            <p>所在地: ${item.location}</p>
        </div>
    `)

            // 为label也添加相同的鼠标事件，提升用户体验
            label.addEventListener('mouseover', () => {
                this.map.openInfoWindow(infoWindow, point)
            })

            label.addEventListener('mouseout', () => {
                this.map.closeInfoWindow(infoWindow)
            })
        },
    },

    created() {
        this.getProjectList()
    },

    updated() {
        this.getProjectList()
    },
}
</script>

<style scoped lang="scss">
.home {
    min-height: calc(100vh - 84px);
}
</style>
