<script setup lang="ts">
    import type { Page } from './config'
    import { DEFAULT_MAP_CENTER } from '@/components/Map/Mapbox'
    import { addDefaultGeoJSONSource, addDefaultSymbolLayer, useMapbox } from '@/components/Map/Mapbox/hook'

    // 页面参数
    const page = reactive<Page>({
        id: 'example-mapbox',
        init: false,
        requests: 0,
        latest: null,
        query: {},
    })

    // 地图组件
    const center: [number, number] = [DEFAULT_MAP_CENTER[0], DEFAULT_MAP_CENTER[1] + 0.5]
    const [registerMap, map] = useMapbox({
        style: { center },
        onLoaded: (data) => {
            console.log('✨✨✨ Map Loaded', data)

            // 添加数值数据源
            addDefaultGeoJSONSource(map, `${page.id}-text`, [
                {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: [data.center.lng, data.center.lat],
                    },
                    properties: {
                        title: 'Hello',
                        description: 'World',
                    },
                },
            ])
            // 添加数值图层
            addDefaultSymbolLayer(map, `${page.id}-text`, {
                layout: {
                    'text-field': '{title} {description}',
                },
            })
        },
        onSourceRequestHandle: () => {
            page.requests--
            if (page.requests === 0) {
                Message.hideLoading()
            }
        },
        onSourceRequestErrorHandle: () => {
            Message.hideLoading()
        },
    })
</script>

<template>
    <view class="page h-100vh bg-white">
        <!-- 地图组件 -->
        <Mapbox @register="registerMap" />
    </view>
</template>

<style lang="less" scoped>
    //
</style>
