<!-- 页面组件 -->

<script setup lang="ts">
    import { defaultLegendConfig } from './config'
    import { useShare } from '@/hooks/page/useShare'
    import { LegendWidget, useLegendWidget } from '@/components/Map/Mapbox/widgets/Legend'
    import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Mapbox/widgets/BottomBar'
    import { SwitchControlWidget, useSwitchControlWidget } from '@/components/Map/Mapbox/widgets/SwitchControl'

    useShare()

    const config = {
        // 测试地图数据来源标注展示
        attribution: {
            text: '湖南省气象台',
            // align: 'bottom-left',
        },
    }

    // 前后切换小部件
    const [registerSwitchControlWidget] = useSwitchControlWidget({
        show: true,
        prev: () => Message.toast('prev'),
        next: () => Message.toast('next'),
    })

    // 图例小部件
    const [registerLegendWidget, { toggleExpand: toggleLegendWidgetExpand }] = useLegendWidget({
        show: true,
        expand: true,
        title: defaultLegendConfig.title,
        option: defaultLegendConfig.option,
    })

    // 底部 Bar 小部件
    const [registerBottomBarWidget, { height }] = useBottomBarWidget({
        show: true,
        expand: true,
        height: 150,
        maxHeight: 240,
    })
</script>

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

        <!-- 地图上方所有小部件 -->
        <view class="widgets">
            <!--  -->

            <!-- 前后切换小部件 -->
            <SwitchControlWidget @register="registerSwitchControlWidget" />

            <!-- 图例小部件 -->
            <LegendWidget @register="registerLegendWidget" />

            <!-- 底部 Bar 小部件 -->
            <BottomBarWidget @register="registerBottomBarWidget">
                <!-- 内容 Slot -->
                <view class="c-coolGray" @tap="toggleLegendWidgetExpand">底部交互控件/展示内容</view>
            </BottomBarWidget>
        </view>
    </view>
</template>

<style lang="scss" scoped>
    .widgets {
        // 覆盖图例小部件的默认样式
        :deep(.legend) {
            bottom: calc(30rpx + v-bind(height));

            // 如果底部使用 bottom-left attribution 则需要加上 80rpx，默认显示在右侧，不会冲突
            // bottom: calc(30rpx + 80rpx + v-bind(height));
        }

        // 覆盖底部 Bar 小部件的默认样式
        // :deep(.bottom-bar) {
        // }

        // 前后切换小部件
        // :deep(.switch-control) {
        // }
    }

    .page {
        // #ifdef H5
        :deep(.mapboxgl-ctrl-bottom-right) {
            bottom: calc(80rpx + v-bind(height));
        }
        :deep(.mapboxgl-ctrl-bottom-left) {
            bottom: calc(80rpx + v-bind(height));
        }
        // #endif
        // #ifdef APP-PLUS
        :deep(.mapboxgl-ctrl-bottom-right) {
            bottom: calc(5rpx + v-bind(height));
        }
        :deep(.mapboxgl-ctrl-bottom-left) {
            bottom: calc(5rpx + v-bind(height));
        }
        // #endif
    }
</style>
