import { $echarts } from '../../index.js';
import echartstyle from '../../libs/echarts-style.js';
import * as $switch from '../../extend/bar-simple.js';

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

    const { data, symbol, symbol2 } = param;

    /**
     * 导出配置项
     */
    const option = {
        color: $color.theme,
        grid: $grid,
        tooltip: Object.assign(
            {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
                formatter: (param) => {
                    let res = `${param[0].name}`;

                    res += `<br />${param[0].marker} ${param[0].value}<br />${param[2].marker} ${param[2].value}`;

                    return res;
                },
            },
            $tooltip
        ),
        legend: {
            show: false,
            icon: 'rect',
            top: 10,
            right: 20,
            itemWidth: 10,
            itemHeight: 3,
            itemGap: 15,
            textStyle: {
                color: $color.legendLabel,
                fontSize: 12,
            },
        },
        xAxis: {
            type: 'category',
            data: data.axis,
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: $color.xAxisLabel,
            },
            axisLine: {
                lineStyle: {
                    color: $color.xAxisLine,
                },
            },
            splitLine: {
                lineStyle: {
                    color: $color.xAxisLine,
                },
            },
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: $color.yAxisLabel,
            },
            axisLine: {
                lineStyle: {
                    color: $color.yAxisLine,
                },
            },
            splitLine: {
                lineStyle: {
                    color: $color.yAxisLine,
                },
            },
        },
        series: [],
    };

    /**
     * 数据处理
     */
    data.series.map((item, index) => {
        option.series.push({
            name: item.name,
            data: item.data,
            type: 'bar',
            // type: 'pictorialBar',
            symbol: `image://${symbol}`,
            barWidth: 25,
            z: 0,
        });
        option.series.push({
            name: item.name,
            data: item.data,
            // type: 'bar',
            type: 'pictorialBar',
            symbol: `image://${symbol2}`,
            symbolSize: [25, 11],
            symbolOffset: [0, -5],
            symbolPosition: 'end',
            z: 1,
        });
        option.series.push({ 
            name: item.name,
            data: [0, 0, 0, 0, 0],
            // type: 'bar',
            type: 'pictorialBar',
            symbol: `image://${symbol2}`,
            symbolSize: [25, 11],
            symbolOffset: [0, 6],
            symbolPosition: 'start',
            z: 0,
        });
    });

    /**
     * 插拔式开关（整块可移除，或者移除其中一项，也不会有任何影响）
     */
    $switch.handleDirection(param, option, data.axis); // 改变方向

    option.series = option.series.map((item, index) => {
        $switch.handleBackground(param, item); // 背景色
        $switch.handleColor(param, item, index); // 颜色
        $switch.handleBorder(param, item, index, $color); // 边框
        $switch.handleBarWidth(param, item); // 柱状图尺寸

        return item;
    });

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

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

    return echarts;
};
