<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, index) => {
            return {
                minTem: item.tempMin,
                maxTem: item.tempMax,
                textDay: item.textDay,
                textNight: item.textNight,
                dayWeather: item.iconDay,
                nightWeather: item.iconNight,
                fxDate: item.fxDate,
                ...getDayLabelValue(index),
            }
        })
        const _7DayForecastMaxTemValue = Math.max(..._7DayForecastData.map((item) => Number(item.maxTem)))
        const _7DayForecastMinTemValue = Math.min(..._7DayForecastData.map((item) => Number(item.minTem)))

        // 设置逐 7 天预报图表参数
        Forecast7Chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            grid: {
                top: '25%',
                bottom: '10%',
                left: '0',
                right: '3%',
            },
            xAxis: {
                type: 'category',
                data: _7DayForecastData.map((item) => item.value),
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false, // 隐藏x轴标签
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
            },
            series: [
                {
                    name: '最高温度',
                    type: 'line',
                    data: _7DayForecastData.map((item) => item.maxTem),
                    smooth: true,
                    color: '#F79D80',
                    symbolSize: 6,
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}°',
                        color: '#F79D80',
                        fontSize: 11,
                    },
                },
                {
                    name: '最低温度',
                    type: 'line',
                    data: _7DayForecastData.map((item) => item.minTem),
                    smooth: true,
                    color: '#52C41A',
                    symbolSize: 6,
                    label: {
                        show: true,
                        position: 'bottom',
                        formatter: '{c}°',
                        color: '#52C41A',
                        fontSize: 11,
                    },
                },
                {
                    name: '白天天气',
                    type: 'scatter',
                    data: _7DayForecastData.map((item, index) => {
                        console.log('item', item,[index, Number(_7DayForecastMaxTemValue) + 3])
                        return {
                            value: [index, Number(_7DayForecastMaxTemValue) + 3],
                            symbol: `image://${getWeatherIcon(String(item.dayWeather))}`,
                            symbolSize: [20, 20],
                            symbolOffset: [0, -12],
                            label: {
                                show: true,
                                position: 'top',
                                formatter: `${item.label}\n${item.value}\n${item.textDay}`,
                                fontSize: 11,
                                color: '#333',
                                fontWeight: 'bold',
                                lineHeight: 18,
                            },
                        }
                    }),
                },
                {
                    name: '天气描述',
                    type: 'scatter',
                    data: _7DayForecastData.map((item, index) => {
                        return {
                            value: [index, Number(_7DayForecastMinTemValue) - 3],
                            symbolSize: 0,
                            label: {
                                show: true,
                                position: 'bottom',
                                formatter: item.textDay,
                                fontSize: 10,
                                color: '#999',
                            },
                        }
                    }),
                },
            ],
        })
    })
</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>
