import * as echarts from "echarts";
import { color } from "highcharts";

export const galleryLine = {
    tooltip: {
        trigger: "axis",
    },
    grid: {
        top: 28,
        left: 10,
        right: 26,
        bottom: 0,
        containLabel: true,
    },
    xAxis: {
        name: "时间",
        nameLocation: "end",
        nameGap: 4,
        nameTextStyle: {
            fontSize: 10,
            color: "#666666"
        },
        type: 'category',
        // 分割线
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            // interval: 0,
            rotate: 15,
            margin: 14,
            textStyle: {
                color: "#666666",
                fontSize: 10
            },
        },
        data: ['9/1', '9/7', '9/13', '9/19', '9/25', '10/1', '10/7']
    },
    yAxis: {
        name: "xx指标",
        nameLocation: "end",
        type: 'value',
        nameTextStyle: {
            fontSize: 10,
            color: "#666666"
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#BBBBBB",
            },
        },
        axisLabel: {
            textStyle: {
                color: "#666666",
                fontSize: 10
            },
        },
        // 分割线
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(255, 255, 255, 0.1)",
            },
        },
    },
    series: [
        {
            data: [40, 58, 62, 64, 68, 74, 80],
            type: 'line',
            symbolSize: 6,
            itemStyle: {
                color: '#2199F8' // 设置数据点颜色为红色
            },

            // itemStyle: {
            //     color: '#CECECE' // 设置数据点颜色
            // },
            // lineStyle: {
            //     type: 'dashed', // 设置线条为虚线
            //     width: 2,       // 设置线条宽度
            //     color: '#CECECE' // 设置线条颜色
            // }
        }
    ],
}

export const galleryIndicatorLine = {
    tooltip: {
        // trigger: "axis",
    },
    legend: {
        icon: 'roundRect',
        top: 0,
        right: 0,
        orient: 'horizontal',
        itemWidth: 6,
        itemHeight: 2,
        itemGap: 3,
        textStyle: {
          align: 'left',
          fontSize: 10,
        },
        data: [
          { name: '花带叶率', textStyle: { color: '#66B9FB' }, itemStyle: {color: "#66B9FB"} },
          { name: '病虫害率', textStyle: { color: '#fbb366' }, itemStyle: {color: "#fbb366"} },
          { name: '来花率', textStyle: { color: '#ec66fb' }, itemStyle: {color: "#ec66fb"} },
        ]
      },
    grid: {
        top: 30,
        left: 8,
        right: 18,
        bottom: 4,
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        // 分割线
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            interval: 0,
            rotate: 40,
            margin: 14,
            textStyle: {
                color: "#666666",
                fontSize: 10
            },
            formatter: function (value) {
                // 获取后 5 位字符（假设日期格式始终为 'YYYY-MM-DD'）
                let shortenedValue = value.slice(-5);

                // 自定义处理省略号（由于 ECharts 不直接支持，需手动处理）
                // 此处简单判断，若原长度超过 10（即 'YYYY-MM-DD' 格式），则添加省略号
                if (value.length > 10) {
                    shortenedValue = '...' + shortenedValue;
                }

                return shortenedValue;
            }
        },
        axisLine: {
            lineStyle: {
                color: "#ddd",
            }
        },
        data: ['9/1', '9/7', '9/13', '9/19', '9/25', '10/1', '10/7']
    },
    yAxis: [{
        type: 'value',
        offset: 6,
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            align: "center",
            textStyle: {
                color: "#666666",
                fontSize: 12
            },
        },
        // 分割线
        splitLine: {
            lineStyle: {
                type: [4, 3],
                dashOffset: 5,
                color: "#DDDDDD",
            },
        },
        // min: 0, // 最小值固定为0
        // max: 100, // 最大值固定为100
        // splitNumber: 5, // 设置5个分割段
    }],
    series: [
        {
            name: "花带叶率",
            data: [40, 28, 22, 64, 28, 24, 40],
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: { color: "#FF7219" },
            lineStyle: {
                color: "#FF7219", // 折线颜色为红色
                width: 2, // 线条宽度
            },
        },
        {
            name: "病虫害率",
            data: [80, 88, 92, 84, 88, 74, 80],
            type: 'line',
            symbol: "none",
            smooth: true,
            itemStyle: { color: "#FFB82E" },
            lineStyle: {
                color: "#FFB82E", // 折线颜色为红色
                width: 2, // 线条宽度
            },
        },
        {
            name: "来花率",
            data: [80, 88, 92, 84, 88, 74, 80],
            type: 'line',
            symbol: "none",
            smooth: true,
            itemStyle: { color: "#ec66fb" },
            lineStyle: {
                color: "#ec66fb", // 折线颜色为红色
                width: 2, // 线条宽度
            },
        },
    ],
}
