<!-- 气温页面组件 -->

<script setup lang="ts">
    import { defaultLegendConfig } from './config'
    import { useShare } from '@/hooks/page/useShare'
    import type { MapboxConfig } from '@/components/Map/Mapbox'
    import { LegendWidget, useLegendWidget } from '@/components/Map/Widgets/Legend'
    import { SwitchWidget, useSwitchWidget } from '@/components/Map/Widgets/Switch'
    import { TimeBarWidget, formatTime, useTimeBarWidget } from '@/components/Map/Widgets/TimeBar'
    import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
    import { BottomBarWidget, useBottomBarWidget } from '@/components/Map/Widgets/BottomBar'

    useShare()

    // 页面参数
    // const param = reactive({
    //     query: {},
    //     filter: {},
    // })

    // 地图配置
    const config: MapboxConfig = {
        // 说明: 地图数据来源标注展示
        attribution: {
            text: '湖南省气象台',
            // align: 'bottom-left',
        },
        style: {
            // 说明: 根据每个页面的 widget 布局情况，可能需要适当调整地图的中心位置，让界面显示效果更好
            center: [111.6, 26.170844],
        },
    }

    // 顶部时间轴小部件
    const [registerTimeBarWidget, { setTime, getTimeBarValue }] = useTimeBarWidget({
        show: true,
        align: 'left',
        readonly: false,
        label: {
            options: [
                {
                    text: '小时级',
                    value: 'hour',
                    format: 'M月D日H时',
                    timeType: 4,
                    checked: true,
                },
                {
                    text: '分钟级',
                    value: 'minute',
                    format: 'M月D日H时m分',
                    timeType: 5,
                },
            ],
            onChange: ({ option, value }) => {
                console.log(
                    '[TimeBarWidget] ChangeOption',
                    option,
                    value.map((item) => formatTime(item)),
                )
            },
        },
        time: {
            type: 'range',
            timeType: 4,
            format: 'M月D日H时',
            onChange: ({ option, value }) => {
                console.log(
                    '[TimeBarWidget] ChangeTime',
                    option,
                    value.map((item) => formatTime(item)),
                )
            },
        },
        buttons: [
            {
                icon: 'order',
                label: '列表',
                onClick: (e, { option, value }) => {
                    console.log(
                        '[TimeBarWidget] Button Click',
                        e,
                        option,
                        value.map((item) => formatTime(item)),
                    )
                },
            },
        ],
    })

    // 左侧工具栏小部件
    const [registerToolBoxWidget, { setProps: setToolBoxProps }] = useToolBoxWidget({
        show: true,
        expand: true,
        showExpandButton: true,
        // 说明: 如果底部使用 bottom-left attribution 则需要加上 65rpx，默认显示在右侧，不会冲突
        bottomPadding: '65rpx',
        tools: [
            {
                key: 'filter',
                align: 'top',
                buttons: [
                    {
                        name: '过滤',
                        icon: '/static/icons/toolbox/filter.png',
                        type: 'filter',
                        handle: () => {},
                    },
                    {
                        name: '图层',
                        icon: '/static/icons/toolbox/menu.png',
                        type: 'select',
                        multiple: true,
                        options: [
                            {
                                text: '色斑',
                                value: 'contour',
                                checked: true,
                            },
                            {
                                text: '数值',
                                value: 'text',
                            },
                        ],
                        handle: () => {},
                    },
                    {
                        name: '区域',
                        icon: '/static/icons/toolbox/location.png',
                        type: 'select',
                        multiple: false,
                        options: [
                            {
                                text: '湖南省',
                                value: '430000',
                                checked: true,
                            },
                            {
                                text: '长沙市',
                                value: '430100',
                            },
                            {
                                text: '湘潭市',
                                value: '430300',
                            },
                        ],
                        handle: () => {},
                    },
                    {
                        name: '站点',
                        icon: '/static/icons/toolbox/station.png',
                        type: 'select',
                        multiple: false,
                        handle: () => {},
                    },
                ],
            },
            {
                key: 'action',
                align: 'bottom',
                buttons: [
                    {
                        name: '要素',
                        icon: '/static/icons/toolbox/element.png',
                        type: 'select',
                        multiple: true,
                        handle: () => {},
                    },
                    {
                        name: '排名',
                        icon: '/static/icons/toolbox/rank.png',
                        type: 'button',
                        handle: () => {},
                    },
                    {
                        name: '累加',
                        icon: '/static/icons/toolbox/cumulative.png',
                        type: 'button',
                        disabled: true,
                        handle: () => {},
                    },
                ],
            },
            {
                key: 'desc',
                align: 'bottom',
                buttons: [
                    {
                        name: '综述',
                        icon: '/static/icons/toolbox/describe.png',
                        type: 'button',
                        handle: () => {},
                    },
                ],
            },
        ],
    })

    // 前后切换小部件
    const [registerSwitchWidget, { setProps: setSwitchProps }] = useSwitchWidget({
        show: true,
        prev: () => {
            const { option, value } = getTimeBarValue()
            console.log(
                '[SwitchControlWidget] prev',
                option,
                value.map((item) => formatTime(item)),
            )

            setTime(value.map((item) => item.subtract(1, 'hours')))
            Message.toast('prev')
        },
        next: () => Message.toast('next'),
    })

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

    // 底部 Bar 小部件
    const [registerBottomBarWidget, { height }] = useBottomBarWidget({
        show: true,
        expand: true,
        // expandTitle: '工具栏',
        // showExpandBorder: true,
        showExpandButton: true,
        height: 150,
        maxHeight: 240,
    })

    watch(
        () => height.value,
        (value) => {
            console.log('[useBottomBarWidget] height', value)

            setSwitchProps({ bottom: value })
            setLegendProps({ bottom: value })
            setToolBoxProps({ bottom: value })
        },
    )
</script>

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

        <!-- 地图上方所有小部件 -->
        <view class="widgets">
            <!-- 时间栏小部件 -->
            <TimeBarWidget @register="registerTimeBarWidget" />

            <!-- 左侧工具栏小部件 -->
            <ToolBoxWidget @register="registerToolBoxWidget" />

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

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

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

<style lang="scss" scoped>
    // .widgets {
    // 覆盖图例小部件的默认样式
    // :deep(.legend) {
    // 现已调整为通过 watch 监听 height 值变化，动态设置底部 Bar 小部件的 bottom 值，这样方便由组件内部决定样式变化
    // 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(85rpx + v-bind(height));
        }
        :deep(.mapboxgl-ctrl-bottom-left) {
            bottom: calc(85rpx + 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>
