<script setup lang="ts">
    import * as turf from '@turf/turf'
    import type { Page } from './config'
    import { DEFAULT_MAP_CENTER } from '@/components/Map/Mapbox'
    import {
        addDefaultGeoJSONSource,
        addDefaultSplotLayer,
        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)

            // 添加一个坐标点
            const point = turf.point([113.063841, 27.733286], {
                title: 'Hello',
                description: 'World',
                popup: '<div class="popup-row">🙂👋</div>',
            })
            addDefaultGeoJSONSource(map, `${page.id}-text`, [point])
            addDefaultSymbolLayer(map, `${page.id}-text`, {
                layout: {
                    'text-field': '{title} {description}',
                },
                paint: {
                    'text-halo-width': 2,
                },
            })

            // 添加坐标点 50 公里范围的圆圈
            const circle = turf.circle(point, 50, {
                properties: null,
            })
            addDefaultGeoJSONSource(map, `${page.id}-splot`, [circle])
            addDefaultSplotLayer(map, `${page.id}-splot`, {
                paint: {
                    'fill-color': 'hsl(209, 83%, 79%)',
                    'fill-opacity': 0.5,
                },
            })
        },
        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>
