import * as echarts from "echarts";
import { options } from "runjs";

function transaction(data, type) {
    console.log(type);

    let unit = ''
    switch (type) {
        case 3:
            unit = '时';
            break;
        case 4:
            unit = '时';
            break;
        // case 5:
        //     unit = '日';
        //     break;
        case 6:
            unit = '月';
            break;
    }
    console.log('123123123', unit);

    let bgColor = "#fff";
    let color = ["#0090FF", "#36CE9E", "#FFC005", "#FF515A", "#8B5CFF", "#00CA69"];
    let xAxisData = [];
    let yAxisData = []
    for (const key in data) {
        xAxisData.push(key)
        yAxisData.push(data[key])
    }
    const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
    };

    let option = {
        backgroundColor: bgColor,
        color: color,

        tooltip: {
            trigger: "axis",
            extraCssText:
                "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
            axisPointer: {
                type: "shadow",
                shadowStyle: {
                    color: "#ffffff",
                    shadowColor: "rgba(225,225,225,1)",
                    shadowBlur: 5,
                },
            },
        },
        grid: {
            top: "20%",
            bottom: "10%",
            // height: "80%"
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: "{value}" + unit,
                    textStyle: {
                        color: "#333",
                    },
                    interval: 0,
                    rotate: 40
                },
                axisLine: {
                    lineStyle: {
                        color: "#D9D9D9",
                    },
                },
                data: xAxisData,
            },
        ],
        yAxis: [
            {
                type: "value",
                name: "金额（元）",
                axisLabel: {
                    textStyle: {
                        color: "#666",
                    },
                },
                nameTextStyle: {
                    color: "#666",
                    fontSize: 12,
                    lineHeight: 40,
                },
                splitLine: {
                    lineStyle: {
                        type: "dashed",
                        color: "#E9E9E9",
                    },
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "今日",
                type: "line",
                smooth: true,
                // showSymbol: false,/
                symbolSize: 8,
                zlevel: 3,
                lineStyle: {
                    normal: {
                        color: color[0],
                        shadowBlur: 3,
                        shadowColor: hexToRgba(color[0], 0.5),
                        shadowOffsetY: 8,
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: hexToRgba(color[0], 0.3),
                                },
                                {
                                    offset: 1,
                                    color: hexToRgba(color[0], 0.1),
                                },
                            ],
                            false
                        ),
                        shadowColor: hexToRgba(color[0], 0.1),
                        shadowBlur: 10,
                    },
                },
                data: yAxisData,
            },

        ],
    };
    return option
}

function processed(data) {
    var cityList = [
        "待付款订单",
        "待发货订单",
        "待收货订单",
        "待处理退款订单",
    ];

    var data = [
        data.waitPayOrderRate,
        data.waitSendOrderRate,
        data.waitReceiveOrderRate,
        data.waitRefundOrderRate,
    ]
    let option = {
        title: {
            show: false,
        },
        tooltip: {
            show: true,
        },
        grid: {
            borderWidth: 0,
            top: 30,
            left: 15,
            right: 75,
            bottom: 0,
            textStyle: {
                color: "#000",
            },
        },
        yAxis: [
            {
                type: "category",
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#363e83",
                    },
                },
                axisLabel: {
                    show: false,
                    inside: false,
                },
                data: data,
            },
            {
                type: "category",
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    inside: false,
                    textStyle: {
                        color: "#000",
                        fontWeight: "normal",
                        fontSize: "14",
                        fontFamily: "PingFangSC-Regular",
                    },
                    formatter: function (val) {
                        return `${val}%`;
                    },
                },
                splitArea: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                data: data,
            },
        ],
        xAxis: {
            type: "value",
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#2f3640",
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#2f3640 ",
                },
            },
            axisLabel: {
                show: false,
            },
        },
        series: [
            {
                name: "",
                type: "bar",
                itemStyle: {
                    normal: {
                        //这里是重点
                        color: function (params) {
                            //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                            var colorList = ['#c23531', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                            return colorList[params.dataIndex]
                        },
                        barBorderRadius: 10,
                        borderWidth: 0,
                    },
                    // normal: {
                    //     show: true,
                    //     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    //         {
                    //             offset: 0,
                    //             color: "#00BBFD",
                    //         },
                    //         {
                    //             offset: 1,f
                    //             color: "#0085FA",
                    //         },
                    //     ]),
                    //     barBorderRadius: 10,
                    //     borderWidth: 0,
                    // },
                    emphasis: {
                        shadowBlur: 15,
                        shadowColor: "rgba(105,123, 214, 0.7)",
                    },
                },
                zlevel: 2,
                barWidth: "20px",
                data: data,
                animationDuration: 1500,
                label: {
                    normal: {
                        color: "#000",
                        show: true,
                        // position: 'center',
                        position: [0, "-24px"],
                        textStyle: {
                            fontSize: 14,
                            fontWeight: "bold",
                            fontFamily: "PingFangSC",
                        },
                        formatter: function (a, b) {
                            return a.name;
                        },
                    },
                },
            },
        ],
        animationEasing: "cubicOut",
        // animationDelayUpdate: function (idx) {
        //     return idx * 1;
        // }
    };




    return option;
}

function volume() {
    //职称结构取数
    var getname = ["小说", "教材", "期刊", "其他"];
    var getvalue = [300, 200, 100, 50];
    var data = [];
    for (var i = 0; i < getname.length; i++) {
        data.push({
            name: getname[i],
            value: getvalue[i],
        });
    }
    var colorList = ["#503EFF", "#3E82FF", "#8BF39A", "#00FCFD"];
    var rich = {
        name: {
            color: "#000",
            fontSize: 14,
            // padding: [10, 15, 0, 10],
            fontWeight: "400",
            align: "left",
        },
        value: {
            color: "#000",
            fontSize: 15,
            // padding: [10, 10, 0, 35],
            fontWeight: "500",
            align: "right",
        },
        percent: {
            color: "#000",
            align: "right",
            fontSize: 15,
            fontWeight: "500",
            //padding: [0, 5]
        },
        hr: {
            width: "100%",
            height: 0,
        },
        cir: {
            fontSize: 26,
        },
    };
    //职称结构图表

    let option = {
        tooltip: {
            trigger: "axis",
        },
        series: [
            {
                tooltip: {
                    trigger: "item",
                    formatter: function (params) {
                        return (
                            params.name +
                            "：" +
                            params.value +
                            "册<br>占比：" +
                            params.percent.toFixed(2) +
                            "%"
                        );
                    },
                },
                itemStyle: {
                    normal: {
                        // borderColor: "#0A1934",
                        // borderWidth: 5,
                        color: function (params) {
                            return colorList[params.dataIndex];
                        },
                    },
                },
                type: "pie",
                radius: ["80%", "40%"],
                center: ["50%", "50%"],
                label: {
                    normal: {
                        show: false,
                        position: "inner",
                        formatter: (params) => {
                            return "{percent|" + params.percent.toFixed(0) + "%}";
                        },
                        rich: rich,

                    },
                },
                data: data,
            },
            {
                itemStyle: {
                    normal: {
                        // borderColor: "#0A1934",
                        // borderWidth: 5,
                        color: function (params) {
                            return colorList[params.dataIndex];
                        },
                    },
                },
                type: "pie",
                silent: true, //取消高亮
                radius: ["80%", "40%"],
                center: ["50%", "50%"],
                labelLine: {
                    normal: {
                        length: 70,
                        length2: 50,
                    },
                },
                label: {
                    normal: {
                        formatter: (params) => {
                            return (
                                "{name|" +
                                params.name +
                                "} {value|" +
                                params.value +
                                "}\n"
                            );
                        },
                        padding: [0, 0],
                        rich: rich,
                    },
                },
                data: data,
                z: -1,
            },
            // {
            //     itemStyle: {
            //         normal: {
            //             // borderColor: "#0A1934",
            //             // borderWidth: 5,
            //             color: function (params) {
            //                 return colorList[params.dataIndex];
            //             },
            //         },
            //     },
            //     type: "pie",
            //     silent: true, //取消高亮
            //     radius: ["40%", "60%"],
            //     center: ["50%", "50%"],
            //     labelLine: {
            //         normal: {
            //             length: 30,
            //             length2: 0,
            //             lineStyle: {
            //                 color: "transparent",
            //             },
            //         },
            //     },
            //     label: {
            //         normal: {
            //             formatter: (params) => {
            //                 return "\n{cir|●}\n";
            //             },
            //             rich: rich,
            //         },
            //     },
            //     data: data,
            //     z: -1,
            // },
        ],
    };
    return option
}

function addUserChat() {
    let x = [1, 2, 3, 4, 5, 6, 7];
    let y = [1, 2, 3, 4, 5, 6, 7];
    let hy = [1, 2, 3, 4, 5, 6, 7];
    let option = {
        backgroundColor: "#fff",
        // legend: {
        //     data: ["新增数", "活跃度"],
        //     textStyle: {
        //         align: "right",
        //     },
        //     top: "2%",
        //     right: "2%",
        // },
        tooltip: {
            show: true,
            trigger: "item",
            backgroundColor: "rgba(255,255,255)",
            axisPointer: {
                lineStyle: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "#A7D6FF",
                            },
                            {
                                offset: 0.5,
                                color: "#fff",
                            },
                            {
                                offset: 1,
                                color: "#A7D6FF",
                            },
                        ],
                        global: false,
                    },
                },
            },
        },
        grid: {
            top: "15%",
            left: "9%",
            right: "8%",
            bottom: "14%",
        },
        xAxis: [
            {
                type: "category",
                data: x,
                axisTick: {
                    show: false, // 是否显示坐标轴轴线
                },
                axisLabel: {
                    color: "#282828",
                    fontSize: 14,
                },
                splitLine: {
                    show: false,
                },
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。
                    show: true,
                    inside: false,
                    lineStyle: {
                        color: "#000",
                    },
                },
            },
        ],
        yAxis: [
            {
                minInterval: 0,
                type: "value",
                splitNumber: 6,
                splitLine: { show: true },
                axisLabel: {
                    //坐标轴刻度标签的相关设置。
                    show: true,
                    textStyle: {
                        color: "#737373",
                        fontSize: 14,
                    },
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(131,101,101,0.2)",
                        type: "dashed",
                    },
                },
                show: true,
            },
            {
                minInterval: 1,
                type: "value",
                nameTextStyle: {
                    color: "#666666",
                },
                position: "right",
                axisLine: {
                    lineStyle: {
                        color: "#cdd5e2",
                    },
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    // formatter: "{value} 个", //右侧Y轴文字显示
                    textStyle: {
                        color: "#666666",
                        fontSize: 14,
                    },
                },
            },
        ],
        series: [
            {
                name: "新增数",
                type: "bar",
                barMaxWidth: 20,
                zlevel: 10,
                // barGap: '100%',
                data: y,
                itemStyle: {
                    normal: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#4F93FE",
                                },
                                {
                                    offset: 1,
                                    color: "#A7D6FF",
                                },
                            ],
                        },
                        barBorderRadius: [30, 30, 0, 0],
                        label: {
                            show: true, //开启显示
                            position: "top", //在上方显示
                            textStyle: {
                                //数值样式
                                color: "#3b6ebf",
                                fontSize: 12,
                                fontWeight: 400,
                            },
                        },
                    },
                },
            },
            {
                name: "活跃度",
                type: "line",
                zlevel: 11,
                yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                smooth: true, //平滑曲线显示
                symbol: "circle", //标记的图形为实心圆
                symbolSize: 8, //标记的大小
                itemStyle: {
                    normal: {
                        color: "#ffa43a",
                        borderColor: "rgba(255, 234, 0, 0.5)", //圆点透明 边框
                        borderWidth: 7,
                        label: {
                            show: true, //开启显示
                            position: "bottom", //在上方显示
                            textStyle: {
                                //数值样式
                                color: "#915c1e",
                                fontSize: 12,
                                fontWeight: 400,
                            },
                            formatter: function (res) {
                                if (res.value) {
                                    return res.value + "个";
                                } else {
                                    return 0;
                                }
                            },
                        },
                    },
                },
                lineStyle: {
                    color: "#ffa43a",
                },
                data: hy,
            },
        ],
    };
    return option;
}

export default {
    transaction,
    processed,
    volume,
    addUserChat
}