<!-- 分钟降水模块 -->

<script setup lang="ts">
    import { Echarts, useEcharts } from '@/components/Echarts'
    import { WEATHER_CODE_MAPPING, getDayLabelValue, getWeatherIcon } from '@/utils/weather'

    // 逐 7 天预报图表
    const [register7Forecast, Forecast7Chart] = useEcharts()

    onLoad(() => {
        // TODO: 模拟逐 7 天预报数据
        const _7DayForecastData = Array(7)
            .fill(0)
            .map(() => {
                return {
                    minTem: Number(Math.random() * 10 + 10).toFixed(1),
                    maxTem: Number(Math.random() * 10 + 20).toFixed(1),
                    dayWeather: Math.floor(Math.random() * 30 + 1),
                    nightWeather: Math.floor(Math.random() * 30 + 1),
                }
            })
        const _7DayForecastMaxTemValue = Math.max(..._7DayForecastData.map((item) => Number(item.maxTem)))

        // 设置逐 7 天预报图表参数
        Forecast7Chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            grid: {
                top: '34%',
                bottom: '6%',
                left: '3%',
                right: '3%',
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                    },
                },
                {
                    type: 'category',
                    data: [],
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                    },
                },
            ],
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
            },
            series: [
                {
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}°c',
                    },
                    type: 'line',
                    data: _7DayForecastData.map((item) => item.maxTem),
                    smooth: true,
                    color: '#F79D80',
                },
                {
                    label: {
                        show: true,
                        position: 'bottom',
                        formatter: '{c}°c',
                    },
                    type: 'line',
                    data: _7DayForecastData.map((item) => item.minTem),
                    smooth: true,
                    color: '#1890FF',
                },
                {
                    type: 'scatter',
                    data: _7DayForecastData.map((item, index) => {
                        const { label, value } = getDayLabelValue(index)

                        return {
                            value: [
                                index,
                                Number(_7DayForecastMaxTemValue) + 7,
                                WEATHER_CODE_MAPPING[item.dayWeather].text,
                            ],
                            symbol: `image://${getWeatherIcon(String(item.dayWeather))}`,
                            symbolSize: [32, 32],
                            symbolOffset: [0, -35],
                            label: {
                                show: true,
                                position: 'top',
                                formatter: `${label}\n\n${value}\n\n{@[2]}`,
                                fontWeight: 'bold',
                            },
                        }
                    }),
                },
                {
                    type: 'scatter',
                    data: _7DayForecastData.map((item, index) => {
                        return {
                            value: [index, -7, WEATHER_CODE_MAPPING[item.nightWeather].text],
                            symbol: `image://${getWeatherIcon(String(item.nightWeather))}`,
                            symbolSize: [32, 32],
                            symbolOffset: [0, -20],
                            label: {
                                show: true,
                                position: 'bottom',
                                formatter: '{@[2]}',
                                fontWeight: 'bold',
                            },
                        }
                    }),
                },
            ],
        })
    })
</script>

<template>
    <view class="wrap p-3">
        <!-- 逐 7 天预报图表 -->
        <view class="rain-forecast mt-3 bg-#fff rd-1.5 shadow flex flex-col pt-1">
            <view class="flex items-center justify-between p-3 px-4">
                <view class="text-32 font-600">7 天预报</view>
                <view class="text-24">发布时间：2023-09-27 08:00</view>
            </view>
            <scroll-view class="flex-1" scroll-x="true">
                <Echarts @register="register7Forecast" class="w-700 h-600" />
            </scroll-view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
    //

    :deep(.map) {
        height: 100% !important;
    }
</style>
