import * as echarts from 'echarts'

/**
 * 参数
 * @param id 图渲染容器id
 * @param name 图标题
 * @param Xdata x轴数据
 * @param Ydata y轴数据
 * @param seriesName 图数据种类
 * @param yAxisName y轴单位说明
 * @param db x轴倍数，默认是1
 * @param isDrillDown 是否开启数据钻取
 */
export function highBarUtils(id, name, Xdata, Ydata, seriesName, yAxisName, unit, db) {
    // 验证 这个 是否被创建了
    let linearBarDom = echarts.getInstanceByDom(id)
    if (linearBarDom == null) {
        linearBarDom = echarts.init(id)
    }
    if (db == null) {
        db = 1
    }

    linearBarDom.setOption({
        title: {
            text: name,
            x: 'center',
            y: 'bottom',
            textAlign: 'left',
        },
        xAxis: {
            type: 'category',
            data: Xdata,
            axisLabel: {
                color: '#bb3137',
                fontSize: 16
            }
        },
        yAxis: {
            type: 'value',
            name: yAxisName,
            nameLocation: 'end',
            axisLabel: {
                show: true,
                interval: 0,
                formatter: function (value, index) {
                    return value / db
                }
            }
        },
        legend: {
            data: [
                {
                    name: seriesName,
                    icon: 'rect',
                }
            ],
            top: "0%"
        },
        tooltip: {
            trigger: 'axis',
            confine: true,
            formatter: function (param) {
                let relVal = param[0].name + '<br>'
                param.forEach((item, index) => {
                    if (item.value && 'bar' == param[index].seriesType) {
                        relVal += item.marker + ' ' + item.seriesName + ' : ' + item.value + unit + '</br>'
                    } else if (item.value && 'line' == param[index].seriesType) {

                    } else {
                        relVal += item.marker + ' ' + item.seriesName + ' : - </br>'
                    }
                })
                return relVal
            }

        },
        toolbox: {
            show: 1,
            itemSize: 24,
            x: 'right',
            y: 'top',
            feature: {
                saveAsImage: {
                    show: true,
                    title: '下载图片',
                    type: 'png'
                }
            }
        },
        series: [
            {
                name: seriesName,
                type: 'bar',
                // stack: 'all',
                barMaxwidth: 35,
                barGap: '10%',
                color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#6633ff',
                        },
                        {
                            offset: 0.35,
                            color: '#6699ff'
                        },
                        {
                            offset: 1,
                            color: '#66ffff'
                        }
                    ]
                },
                label: {
                    show: true,
                    color: '#000000',
                    position: 'top',
                    formatter(p) {
                        return db != 1 ? (p.value / db).toFixed(2) : p.value
                    }
                },
                data: Ydata,
                emphasis: {
                    itemStyle: {
                        borderRadius: 30
                    }
                },
                itemStyle: {
                    borderRadius: [12, 12, 0, 0],
                }
            },
        ]
    })

    window.onresize = function () {
        //自适应大小, 不用的话不会自适应大小。
        linearBarDom.resize()
    }
}

export function highPieUtils(id, name, data) {
    // 验证 这个 是否被创建了
    let linearBarDom = echarts.getInstanceByDom(id)

    if (linearBarDom == null) {
        linearBarDom = echarts.init(id)
    }

    linearBarDom.setOption({
        title: {
            text: name, // 设置主标题文本
            show: true, // 显示标题组件
            x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y: 'bottom', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            padding: [10, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
        },
        // 这个就是旁边的那个颜色小方块
        legend: {
            //朝向 ： 垂直（vertical），水平（horizontal）
            orient: 'vertical',
            type: 'scroll', // 分页滚动
            x: 'left', //可设定图例在left、right、center
            y: 'top', //可设定图例在top、bottom、center
            padding: [0, 10, 0, 10], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
            // 这个是 圆形旁边的 小方块 自定义
            formatter: function (name) {
                // 通过name获取到数组对象中的单个对象
                let singleData = data.filter(function (item) {
                    return item.name == name
                })
                return `${name} | ${singleData[0].value} ${singleData[0].unit}`
            },
            textStyle: {
                rich: {
                    a: {
                        width: 120,
                        lineHeight: 12
                    }
                }
            }
        },
        tooltip: {
            //提示框组件
            trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            // backgroundColor: 'rgba(255,255,255,0.8)', //设置背景图片 rgba格式
            // color: 'black',
            // borderWidth: '1', //边框宽度设置1
            // borderColor: 'gray', //设置边框颜色
            // textStyle: {
            //   color: 'black', //设置文字颜色
            // },
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
            // formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%', //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            //原来的 替换成我需要的 这个是鼠标移上去出现的
            formatter: function (data) {
                return `
          <span style="background-color:${data.color};display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px"></span>
                <span>${data.seriesName}<span><br/>
                <span>${data.name} : <span style="color:red;">${data.value}</span> ${data.data.unit}<span><br/>
                <span>百分比 : ${data.percent} %</span>
                `
            },
        },
        toolbox: {
            // 导出组件
            show: 1,
            itemSize: 24,
            x: 'right',
            y: 'top',
            feature: {
                saveAsImage: {
                    show: true,
                    title: '下载图片',
                    type: 'png'
                }
            }
        },
        series: [
            {
                center: ['50%', '50%'],
                radius: '50%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                type: 'pie', // 类型 圆形
                data: data, // 数据
                name: name, // 名字
                minAngle: 10, //设置扇形的最小占比 不然有些太小了 就看不到了
            },
        ],
        //color: createColorCode(data),
    })
    window.onresize = function () {
        //自适应大小, 不用的话不会自适应大小。
        linearBarDom.resize()
    }
}