import { $echarts } from '../../index.js';
import echartstyle from '../../libs/echarts-style.js';

export default ({ dom, param, opt }) => {
    const { $color, $tooltip, $grid } = echartstyle();

    const { data, isDataZoom } = param;

    const $data = data;

    /**
     * 导出配置项
     */
    const option = {
        dataZoom: isDataZoom ? {
            type:  'inside',
            startValue: 0,
            endValue: 7,
            yAxisIndex: [0],
            zoomOnMouseWheel: false,
            moveOnMouseMove: false,
            moveOnMouseWheel: true
        } : {show: false},
        color: $color.theme,
        grid: $grid,
        tooltip: Object.assign(
            {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            $tooltip
        ),
        legend: {
            show: false,
            icon: 'rect',
            top: 10,
            right: 20,
            itemWidth: 10,
            itemHeight: 3,
            itemGap: 15,
            textStyle: {
                color: $color.legendLabel,
                fontSize: 12,
            },
        },
        xAxis: {
            type: 'value',
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: true,
                color: $color.xAxisLabel,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: $color.xAxisLine,
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: $color.xAxisLine,
                },
            },
        },
        yAxis: {
            type: 'category',
            data: $data.axis,
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: 'rgba(255 ,255, 255, 1)',
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: $color.yAxisLine,
                },
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: $color.yAxisLine,
                },
            },
        },
        series: [],
    };

    /**
     * 数据处理
     */
    $data.series.map((item, index) => {
        option.series.push({
            name: item.name,
            data: item.data,
            type: 'bar',
            barWidth: 22,
            stack: 1,
        });
    });

    /**
     * 渲染
     */
    const extensOption = $echarts.extens(opt, option);

    let echarts = $echarts.render(dom, extensOption);

    for (let index = 0; index < 10000; index++) {
        clearInterval(index)
    }
    // 自动滚动
    if(isDataZoom && data.axis.length > 7) {
        // setInterval(() => {
        //     if(option.dataZoom.endValue === data.axis.length) {
        //         option.dataZoom.startValue = 0
        //         option.dataZoom.endValue = 7
        //     } else {
        //         option.dataZoom.startValue += 1
        //         option.dataZoom.endValue += 1
        //     }
        //     let extensOption = $echarts.extens(opt, option);
        //      echarts = $echarts.setOption(echarts, extensOption);
        // }, 5000);
    }

    return echarts;
};
