import * as echarts from "echarts";

const commonStyle = {
    xAxis: {
        type: "category",
        axisTick: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: "#F5F5F5",
            },
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: "#F5F5F5",
            },
        },
        axisLabel: {
            show: true,
            interval: 0,
            color: "#000",
        },
        data: [],
    },
    yAxis: {
        type: "value",
        min: 0,
        max: 100,
        splitLine: {
            lineStyle: {
                color: "#F5F5F5",
            },
        },
        axisLabel: {
            color: "#999999",
            formatter: "{value}%",
        },
    },
    grid: {
        top: 20,
        left: 0,
        right: "0%",
        bottom: "0%",
        containLabel: true,
    },
};

const styleName1 = {
    grid: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true,
    },
    xAxis: {
        type: "value",
        splitLine: {
            show: false,
        },
        axisLabel: {
            color: "#999999",
            show: false,
        },
        boundaryGap: [0, 0.01],
    },
    yAxis: {
        type: "category",
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        data: [],
    },
    series: [
        {
            data: [],
            type: "bar",
            barWidth: 17,
            z: 1,
            label: {
                show: true,
                color: "#fff",
                position: "insideRight",
                formatter: ({ value }) => {
                    return value ? value + "%" : "";
                },
            },
            showBackground: true,
            backgroundStyle: {
                color: "#E4E4E4",
            },
            itemStyle: {
                color: function (params) {
                    // 根据数据动态生成渐变色
                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: params.data <= 79 ? "#FF664E" : "#FFD400",
                        },
                        {
                            offset: 1,
                            color: params.data <= 79 ? "#FF2121" : "#FF9900",
                        },
                    ]);
                },
                borderRadius: [4, 4, 4, 4],
            },
        },
    ],
};

const styleName2 = {
    ...commonStyle,
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    legend: {
        show: true,
        right: 20,
        top: -5,
        selectedMode: false,
        data: ["Std >98%"],
        itemWidth: 15, // 图例标记的图形宽度。
        itemHeight: 2, //  图例标记的图形高度。
        icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAMCAYAAAB7h3NdAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABrSURBVHgB7dHBEYAgDETRjQVpKdKBUpmUoKVgQyEVwCGXPew7M8NOviH00x0TZqj7aw0Jqz9WYkOLDRUJvXiD40LC8cWShL/4HZd4Zm82CB1FIaQohBSFkKIQUhRCikJIUQgpCiFFIaQohAajnRQ2GPhEJQAAAABJRU5ErkJggg==",
        textStyle: {
            fontSize: 14,
            padding: [0, 8, 0, 8],
        },
    },
    series: [
        {
            color: "#05710C",
            type: "bar",
            barWidth: "45%",
            data: [],
            label: {
                show: true,
                rotate: 90,
                fontWeight: "bold",
            },
        },
        {
            name: "Std >98%",
            type: "line",
            color: "#D14FFF",
            lineStyle: {
                type: "dashed", // 系列线型为虚线
            },
            markLine: {
                symbol: ["none", "none"],
                data: [
                    {
                        yAxis: 98,
                        lineStyle: { type: "dashed", color: "#D14FFF", width: 2 }, // 样式： 线型、颜色、线宽
                    },
                ],
            },
        },
    ],
};

const styleName3 = {
    grid: {
        top: 45,
        left: 0,
        right: "0%",
        bottom: "0%",
        containLabel: true,
    },
    title: {
        text: "Average Total Location",
        textStyle: {
            fontSize: 16,
            color: "#197B40",
        },
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    xAxis: {
        splitLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: true,
            interval: 0,
            color: "#000",
            fontWeight: "bold",
        },
    },
    yAxis: {
        min: 0,
        max: 100,
        axisLabel: {
            color: "#4F4F4F",
            formatter: "{value}%",
        },
        axisLine: { show: true },
    },
    legend: {
        show: true,
        right: 20,
        top: 0,
        textStyle: {
            fontSize: 14,
            padding: [0, 8, 0, 8],
        },
        itemWidth: 15, // 图例标记的图形宽度。
        itemHeight: 15, //  图例标记的图形高度。
        data: [
            {
                name: "PG1",
                icon: "rect",
            },
            {
                name: "PG2",
                icon: "rect",
            },
            {
                name: "PG3",
                icon: "rect",
            },
            {
                name: "Std >98%",
                icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAMCAYAAAB7h3NdAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABrSURBVHgB7dHBEYAgDETRjQVpKdKBUpmUoKVgQyEVwCGXPew7M8NOviH00x0TZqj7aw0Jqz9WYkOLDRUJvXiD40LC8cWShL/4HZd4Zm82CB1FIaQohBSFkKIQUhRCikJIUQgpCiFFIaQohAajnRQ2GPhEJQAAAABJRU5ErkJggg==",
            },
        ],
    },
    color: ["#57B4BA", "#015551", "#FE4F2D"],
    series: [
        {
            type: "bar",
            barWidth: "45%",
            data: [10, 52, 66],
            label: {
                show: true,
                fontWeight: "bold",
            },
        },
        {
            name: "Std >98%",
            type: "line",
            color: "#D14FFF",
            lineStyle: {
                type: "dashed", // 系列线型为虚线
            },
            markLine: {
                symbol: ["none", "none"],
                data: [
                    {
                        yAxis: 98,
                        lineStyle: { type: "dashed", color: "#D14FFF", width: 2 }, // 样式： 线型、颜色、线宽
                    },
                ],
            },
        },
    ],
};

export const barOption = { styleName1, styleName2, styleName3 };
