import * as echarts from "echarts";

function formatDateToMMDD(date) {
    const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1，并确保是两位数
    const day = String(date.getDate()).padStart(2, "0"); // 确保日期是两位数
    return `${month}/${day}`;
}

function getCurrentDateAndNextSixDaysMMDD() {
    const currentDate = new Date();
    const dates = [];

    for (let i = 0; i <= 6; i++) {
        const newDate = new Date(currentDate);
        newDate.setDate(currentDate.getDate() + i);
        const formattedDate = formatDateToMMDD(newDate);
        dates.push(formattedDate);
    }

    return dates;
}

const list = getCurrentDateAndNextSixDaysMMDD();

export const oneLine = {
    tooltip: {
        trigger: "axis",
    },
    grid: {
        top: 24,
        left: 6,
        right: 6,
        bottom: 6,
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        // 分割线
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            interval: 0,
            rotate: 30,
            margin: 14,
            color: "#9F9F9F",
            fontSize: 10
        },
        axisLine: {
            lineStyle: {
                color: "rgba(185, 185, 185, 0.12)",
            }
        },
        data: list
    },
    yAxis: [{
        type: 'value',
        offset: 10,
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            align: "center",
            formatter: '{value} %',
            color: "#9F9F9F",
            fontSize: 10
        },
        // 分割线
        splitLine: {
            lineStyle: {
                type: [4, 3],
                dashOffset: 5,
                color: "#333333",
            },
        },
        // splitNumber: 4, // 设置5个分割段
    }],
    series: [
        {
            name: "温度",
            data: [],
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: { color: "#FF7219" },
            lineStyle: {
                color: "#FF7219", // 折线颜色为红色
                width: 2, // 线条宽度
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#F0AC37" }, // 渐变起始颜色
                    { offset: 1, color: "rgba(35, 35, 35, 0)" }, // 渐变结束颜色
                ]),
            },
        },
        {
            name: "低温",
            data: [],
            type: "line",
            symbol: "none",
            smooth: true,
            lineStyle: {
                color: "#2199F8", // 折线颜色为红色
                width: 2, // 线条宽度
            },
            itemStyle: {
                color: "#368ACD"
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(33, 153, 248, 0.4)" }, // 渐变起始颜色
                    { offset: 1, color: "rgba(138, 203, 255, 0.02)" }, // 渐变结束颜色
                ]),
            },
            markPoint: {
                symbolSize: [0, 0],
                data: [
                    {
                        name: "text",
                        value: "最低",
                        xAxis: list[0],
                        yAxis: '',
                        symbolOffset: [0, "-50%"],
                        label: {
                            offset: [0, 15],
                            color: "#fff",
                            backgroundColor: "#4993e8",
                            padding: [0, 8, 0, 8],
                            height: 20,
                            borderRadius: 10,
                        },
                    },
                    {
                        name: "mark",
                        xAxis: list[0],
                        yAxis: '',
                        value: "",
                        label: {
                            backgroundColor: "#fff",
                            borderWidth: 2,
                            borderColor: "rgba(255, 255, 255, 0.5)",
                            borderRadius: 8,
                            width: 4,
                            height: 4,
                        },
                    },
                ]
            },
        }
    ],
}