import { merge } from 'lodash-es'
import { accessToken, defaultStyle, loadMapControl, loadMapboxLibs } from '/@/components/Map/Mapbox'

// renderjs 官方文档
// https://uniapp.dcloud.io/tutorial/renderjs.html
// renderjs 的一些细节问题
// https://juejin.cn/post/7049185827582115870

export default {
    mounted() {},
    methods: {
        loadLibs: loadMapboxLibs,
        initMap(options) {
            // 移除地图
            if (this.map && this.map.remove) {
                this.map.remove()
            }

            // 加载地图
            const mapboxgl = window.mapboxgl
            const map = new mapboxgl.Map({
                accessToken,
                container: options.container,
                style: merge({
                    ...defaultStyle,
                    ...options?.style,
                }),
                ...merge(
                    {
                        minZoom: 5,
                        maxZoom: 18,
                    },
                    options?.options,
                ),
                attributionControl: false,
            })

            // 绑定作用域
            this.map = map

            // 加载地图控件
            map.on('load', () => {
                // #ifdef APP-PLUS
                if (options?.control?.geolocate) {
                    window.navigator.permissions = undefined
                    options.control.geolocate = {
                        geolocation: {
                            getCurrentPosition: (onPositionSuccess, _onPositionError, options) => {
                                this.onPositionSuccess = onPositionSuccess
                                this.$ownerInstance.callMethod('getCurrentPosition', options)
                            },
                        },
                    }
                }
                // #endif

                // 加载地图图层
                this.initMapLayers()
                    .then(() => {
                        // 调用逻辑层方法
                        this.loaded = true
                        this.$ownerInstance.callMethod('onMapLoad', {
                            center: map.getCenter(),
                        })

                        // 添加地图数据来源描述
                        if (options.attribution) {
                            map.addControl(
                                new mapboxgl.AttributionControl({
                                    compact: true,
                                    customAttribution: options.attribution?.text,
                                }),
                                options.attribution?.align || 'bottom-right',
                            )
                        }

                        // 加载地图控件
                        loadMapControl(mapboxgl, map, options?.control)
                    })
                    .catch(console.error)
            })
        },
        initMapLayers() {
            // TODO: 加载地图图层
            return Promise.resolve()
        },
        changeOptions(options) {
            if (!options.container) {
                return
            }

            console.log(options)
            if (typeof window.mapboxgl === 'object') {
                this.initMap(options)
            } else {
                this.loadLibs().then(() => {
                    this.initMap(options)
                })
            }
        },
    },
}
