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

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

    const { data: $data, symbol: $symbol } = param;

    /**
     * 导出配置项
     */
    const option = {
        color: $color.theme,
        title: [
            {
                show: false,
                left: 0,
                top: 0,
                textStyle: {
                    color: $color.title,
                    fontSize: $fontSize.title,
                    fontWeight: '400',
                },
            },
            {
                show: false,
                right: 0,
                top: 0,
                textStyle: {
                    color: $color.title,
                    fontSize: $fontSize.title,
                    fontWeight: '400',
                },
            },
        ],
        grid: $grid,
        tooltip: Object.assign(
            {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            $tooltip
        ),
        legend: {
            show: false,
            top: 10,
            right: 20,
            itemWidth: 10,
            itemHeight: 3,
            itemGap: 15,
            textStyle: {
                color: '#fff',
                fontSize: $fontSize.legendLabel,
            },
        },
        xAxis: {
            type: 'category',
            data: $data.axis,
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: $color.xAxisLabel,
                fontSize: $fontSize.xAxisLabel,
            },
            axisLine: {
                lineStyle: {
                    color: $color.xAxisLine,
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: $color.xSplitLine,
                },
            },
        },
        yAxis: [
            {
                type: 'value',
                nameTextStyle: {
                    color: $color.yAxisLabel,
                    fontSize: $fontSize.yAxisName,
                },
                axisLabel: {
                    color: $color.yAxisLabel,
                    fontSize: $fontSize.yAxisLabel,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: $color.yAxisLine,
                    },
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: $color.ySplitLine,
                    },
                },
            },
            {
                show: false,
                type: 'value',
                nameTextStyle: {
                    color: $color.yAxisLabel,
                    fontSize: $fontSize.yAxisName,
                },
                axisLabel: {
                    color: $color.yAxisLabel,
                    fontSize: $fontSize.yAxisLabel,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: $color.yAxisLine,
                    },
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [],
    };

    /**
     * 数据处理
     */
    const max = Math.max(...$data.series[0].data);

    $data.series.map((item) => {
        option.series.push({
            name: item.name,
            data: item.data,
            type: 'pictorialBar',
            barWidth: 15,
            emphasis: {
                focus: 'series',
            },
            symbol: 'rect',
            // symbolClip: false,
            symbolRepeat: true,
            // symbolBoundingData: max,
            symbolSize: [20, 10],
            symbolMargin: 3,
            itemStyle: {
                color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(6, 240, 184, 1)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(42, 118, 255, 1)',
                        },
                    ],
                },
            },
        });
    });

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

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

    return echarts;
};
