<!-- 大风页面组件 -->

<script setup lang="ts">
    import { buildQueryParams, createTextLayer, hourTemLegendConfig, windheaderData, windtableData } from './config'
    import { useShare } from '@/hooks/page/useShare'
    import { buildGeoJSONSourceDataUrl, useMapbox } from '@/components/Map/Mapbox/hook'
    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'
    import type { MapboxInstance } from '@/components/Map/Mapbox'
    import { HandlerUtil } from '@/components/Map/Mapbox'
    import { useGlobSetting } from '/@/hooks/setting'

    // 接口
    import { getWindList } from '@/api/model/monitor'

    useShare()
    const globSetting = useGlobSetting()
    // 页面参数
    const param = reactive({
        query: {
            liveQueryType: 'TWO_MINUTES_WIND', // 查询类型,可用值:HOUR_RAIN_SUM,MINUTES_RAIN_SUM,ONE_HOUR_TEM,FIVE_MINUTES_TEM,
            // MAX_TEM,MIN_TEM,CHANGE_TEM,ONE_MINUTES_WIND,MAX_WIND,TWENTY_FOUR_MAX_WIND,TWO_MINUTES_WIND,TEN_MINUTES_WIND,
            // FIVE_MINUTES_RHU,FIVE_MINUTES_RHU_MIN,FIVE_MINUTES_DPT,HOUR_RHU,HOUR_MIN_RHU,HOUR_DPT
            stationType: 1, // 站点类型 1 国家站 2 骨干站 3 区域站
            startTime: '', // 非时间段时，startTime需要和endTime保持相同；不传则查询最新数据
            endTime: '',
            numericalBegin: -9999,
            numericalEnd: 9999,
            symbolBegin: 'GREATER_THAN_OR_EQUAL', // GREATER_THAN,GREATER_THAN_OR_EQUAL,LESS_THAN,LESS_THAN_OR_EQUAL
            symbolEnd: 'LESS_THAN_OR_EQUAL',
        },
        filter: {},
        minmaxData: [
            { label: '最大风速', value: '7.8m/s' },
            { label: '平均风速', value: '2.8m/s' },
        ],
        headerData: windheaderData,
        tableData: windtableData,
        tabs: [
            {
                name: '2分钟平均',
                value: 'TWO_MINUTES_WIND',
            },
            {
                name: '10分钟平均',
                value: 'TEN_MINUTES_WIND',
            },
            {
                name: '最大风速',
                value: 'MAX_WIND',
            },
            {
                name: '极大风速',
                value: 'TWENTY_FOUR_MAX_WIND',
            },
        ],
    })

    const baseUrl = `${globSetting.apiUrl}${globSetting.urlPrefix}`

    // 地图组件
    const [registerMap, map] = useMapbox({
        style: {
            center: [111.6, 26.170844],
        },
        onLoaded: async (map: MapboxInstance, data: Recordable) => {
            console.log('✨✨✨ Map Loaded', map, data)

            await logicalLayerGetData(true)
            getData(map, true)

            map.on('click', 'wind-text', function (e) {
                console.log('🚀🚀🚀', e)
            })
        },
    })
    function clickTest() {
        console.log('setGeoJSONSourceData', setGeoJSONSourceData)
        setGeoJSONSourceData('wind-splot', {
            type: 'FeatureCollection',
            features: [],
        })

        param.minmaxData = [
            { label: '最大风速', value: '99m/s' },
            { label: '平均风速', value: '28m/s' },
        ]
    }

    // 顶部时间轴小部件
    const [registerTimeBarWidget, { setTime, getTimeBarValue }] = useTimeBarWidget({
        show: true,
        align: 'left',
        readonly: false,
        time: {
            type: 'single',
            timeType: 4,
            format: 'MM月DD日HH时',
            onChange: ({ option, value }) => {
                console.log(
                    '[TimeBarWidget] ChangeTime',
                    option,
                    value.map((item) => formatTime(item)),
                )
            },
        },
    })

    // 左侧工具栏小部件
    const [registerToolBoxWidget, { setProps: setToolBoxProps }] = useToolBoxWidget({
        show: true,
        expand: true,
        showExpandButton: true,
        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: () => {},
                    },
                    // TODO 初版隐藏区域切换
                    /* {
                            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/rank.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(hourTemLegendConfig)

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

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

            setSwitchProps({ bottom: value })
            setLegendProps({ bottom: value })
            setToolBoxProps({ bottom: value })

            // 当底部 Bar 小部件高度变化时，重新设置地图的中心点，使界面显示效果更好
            if (map.isReady.value) {
                if (value === '210rpx') {
                    map.flyTo({
                        center: [111.6, 26.770844],
                        speed: 0.2,
                        essential: true,
                    })
                } else {
                    map.flyTo({
                        center: [111.6, 26.170844],
                        speed: 0.2,
                        essential: true,
                    })
                }
            }
        },
    )
    // 渲染层请求数据
    function getData(map, init?) {
        // if(init){
        //     // 请求最新时间数据
        // }
        // 模拟色斑叠加数据源
        map.setGeoJSONSourceForRequest(
            'wind-splot',
            buildGeoJSONSourceDataUrl({
                url: `${baseUrl}/live/wind/getWindStain`,
                params: buildQueryParams(
                    param.query,
                    Object.assign({}, { isSpot: true }, init ? { isFirstQuery: true } : {}),
                ),
            }),
            (response) => {
                // 更新色标
                return response.body.jsonObject
            },
        )

        // 模拟色斑叠加图层
        // map.addLayer(createSplotLayer('wind'), 'fill-placeholder')
        map.addLayer(
            {
                id: `${'wind'}-splot`,
                type: 'fill',
                source: `${'wind'}-splot`,
                paint: {
                    'fill-color': {
                        type: 'identity',
                        property: 'color',
                    },
                    'fill-opacity': 1,
                },
            },
            'fill-placeholder',
        )

        // 模拟数值叠加数据源
        map.setGeoJSONSourceForRequest(
            'wind-text',
            buildGeoJSONSourceDataUrl({
                url: `${baseUrl}/live/wind/getWindList`,
                params: buildQueryParams(param.query, Object.assign({}, {}, init ? { isFirstQuery: true } : {})),
            }),
            // 此处使用
            (response) => {
                // 更新 minmaxData
                // param.minmaxData = [
                //     { label: '最大风速', value: `${response.body.maxVo.value}m/s` },
                //     { label: '平均风速', value: `${response.body.avgValue}m/s` },
                // ]
                // 更新数据时间
                const features = response.body.liveVos.map(function (item) {
                    item.key = '风速'
                    item.suffix = 'm/s'
                    return HandlerUtil.createDefaultGeoJSONFeatureData(item)
                })
                return HandlerUtil.createDefaultGeoJSONSymbolSourceData(features)
            },
        )

        // 模拟数值叠加图层
        map.addLayer(createTextLayer('wind'))
    }
    // 逻辑层请求数据
    async function logicalLayerGetData(init = false) {
        const params = buildQueryParams(param.query, { isFirstQuery: init })
        getWindList(params).then((res) => {
            console.log(res)
            // 更新 minmaxData
            param.minmaxData = [
                { label: '最大风速', value: `${res.maxVo.value}m/s` },
                { label: '平均风速', value: `${res.avgValue}m/s` },
            ]
        })
    }

    async function tabschangeHandle(item) {
        console.log(item)
        param.query.liveQueryType = item.value
        getData(map, true)
        await logicalLayerGetData(true)
    }
</script>

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

        <!-- 地图上方所有小部件 -->
        <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">
                    <fui-tabs
                        :tabs="param.tabs"
                        isDot
                        scroll
                        alignLeft
                        @change="tabschangeHandle"
                        height="48"
                        size="28"
                        scale="1"
                        center
                    />
                </view>
                <MinMaxBar @click="clickTest" :minmaxData="param.minmaxData" />
                <MonitorTable :tableData="param.tableData" :headerData="param.headerData" />
            </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>
