<script setup lang="ts">
    import dayjs from 'dayjs'
    import * as WeatherAPI from '@/api/model/weather'
    import { Echarts, useEcharts } from '@/components/Echarts'
    import { getDayLabelValue, getWeatherIcon } from '@/utils/weather'

    // 逐 7 天预报图表
    const [register7Forecast, Forecast7Chart] = useEcharts()
    const model = reactive({
        days: 15,
        updateTime: '-',
    })

    onLoad(async () => {
        const location = uni.getStorageSync('location')
        const forecasts = await WeatherAPI.forecast(`${location.lon},${location.lat}`, model.days).then((res) => {
            model.updateTime = dayjs(res.data.updateTime).format('YYYY-MM-DD HH:mm')
            return res.data.daily
        })
        console.log('forecasts', forecasts)

        // 逐 7 天预报数据
        const _7DayForecastData = forecasts.map((item) => {
            return {
                minTem: item.tempMin,
                maxTem: item.tempMax,
                textDay: item.textDay,
                textNight: item.textNight,
                dayWeather: item.iconDay,
                nightWeather: item.iconNight,
            }
        })
        const _7DayForecastMaxTemValue = Math.max(..._7DayForecastData.map((item) => Number(item.maxTem)))

        // 设置逐 7 天预报图表参数
        Forecast7Chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            grid: {
                top: '38%',
                bottom: '3%',
                left: '0%',
                right: '0%',
            },
            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, item.textDay],
                            symbol: `image://${getWeatherIcon(String(item.dayWeather))}`,
                            symbolSize: [24, 24],
                            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, item.textNight],
                            symbol: `image://${getWeatherIcon(String(item.nightWeather))}`,
                            symbolSize: [24, 24],
                            symbolOffset: [0, -20],
                            label: {
                                show: true,
                                position: 'bottom',
                                formatter: '{@[2]}',
                                fontWeight: 'bold',
                            },
                        }
                    }),
                },
            ],
        })
    })
</script>

<template>
    <view class="wrap pb-3">
        <!-- 逐 7 天预报图表 -->
        <view class="rain-forecast mt-2rpx bg-#fff rd-1.5 shadow flex flex-col px-2">
            <view class="flex items-center justify-between pt-3 px-2">
                <view class="text-32 font-600">{{ model.days }} 天预报</view>
                <view class="text-24">发布时间：{{ model.updateTime }}</view>
            </view>
            <scroll-view class="flex-1" scroll-x="true">
                <Echarts @register="register7Forecast" class="w-1400 h-600" />
            </scroll-view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
    //
</style>
