import echarts from 'echarts';
// import { BarChart } from 'echarts/charts';
// import {
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     DatasetComponent,
//     TransformComponent
// } from 'echarts/components';
// import { LabelLayout, UniversalTransition } from 'echarts/features';
// import { CanvasRenderer } from 'echarts/renderers';
// import { LegendComponent } from 'echarts/components';
// echarts.use([
//     TitleComponent,
//     TooltipComponent,
//     GridComponent,
//     DatasetComponent,
//     TransformComponent,
//     BarChart,
//     LabelLayout,
//     UniversalTransition,
//     CanvasRenderer,
//     LegendComponent,
// ]);

function getBarWidth(res){
	const clientWidth = window.innerWidth || document.documentElement.clientWidth|| document.body.clientWidth;
	if (!clientWidth) return res;
	let fontSize = clientWidth / 1920;
	return res*fontSize;
}

export function showPraise(id, data) {
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        legend: {
            show: false,
        },
        grid: {
            left: 80,
            top: 0,
            right: 45,
            bottom: 20,
        },
        xAxis: {
            show: false,
        },
        yAxis: {
            type: 'category',
            data: data.legendData,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#333333',
                fontSize: 12,
                width: 80,
                overflow: 'truncate',
                interval: 0,
            },
        },
        series: [{
            name: '任务数',
            type: 'bar',
            data: data.seriesData,
            barWidth: getBarWidth(12),
            label: {
                show: true,
                position: "right"
            },
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(61, 147, 255, 0.42)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#3B90EB' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                barBorderRadius: 4,
            }
        }, ]
    };

    const e = document.getElementById(id);
    let instance = echarts.getInstanceByDom(e);
    if (instance == null) {
        instance = echarts.init(e);
    }
    instance.setOption(option);
    setTimeout(() => {
        window.onresize = function () {
            instance.resize();
        };
    }, 1300);
}

export function showLimit(id, data) {
    const option = {
        legend: {
          show: false,
        },
        grid: {
            left: 30,
            top: 20,
            right: 10,
            bottom: 20,
        },
        tooltip: {},
        dataset: {
            source: data,
        },
        xAxis: { 
            type: 'category',
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
                color: '#666666',
                fontSize: 10,
                // interval: 0,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#888888',
                    width: 1
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#888888',
                    width: 1
                }
            }
        },
        series: [
            { 
                type: 'bar',
                barWidth: 13,
                itemStyle: {
                    color: '#B6CFFA',
                    borderRadius: [6,6,0,0],
                },
            }, 
            { 
                type: 'bar',
                barWidth: 13,
                itemStyle: {
                    color: '#FF8162',
                    borderRadius: [6,6,0,0],
                },
            }
        ],
    };
    
    const e = document.getElementById(id);
    let instance = echarts.getInstanceByDom(e);
    if (instance == null) {
        instance = echarts.init(e);
    }
    instance.setOption(option);
    setTimeout(() => {
        window.onresize = function () {
            instance.resize();
        };
    }, 1400);
}

export function showFinish(id, data) {
    const option = {
        legend: {
          show: false,
        },
        grid: {
            left: 40,
            top: 10,
            right: 20,
            bottom: 30,
        },
        tooltip: {},
        xAxis: { 
            type: 'category',
            data: data.legendData,
            axisTick: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#888888',
                    width: 1
                }
            },
            axisLabel: {
                show: false,
                color: '#666666',
                fontSize: 10,
                interval: 0,
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#888888',
                    width: 1
                }
            }
        },
        series: [
            { 
                type: 'bar',
                barWidth: 13,
                itemStyle: {
                    color: '#64AFFF',
                    borderRadius: [6,6,0,0],
                },
                data: data.seriesData,
            },
        ],
    };
    
    const e = document.getElementById(id);
    let instance = echarts.getInstanceByDom(e);
    if (instance == null) {
        instance = echarts.init(e);
    }
    instance.setOption(option);
    setTimeout(() => {
        window.onresize = function () {
            instance.resize();
        };
    }, 1500);
}