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

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

    let { data } = param;

    /**
     * 导出配置项
     */
    let option = {
        color: $color.theme,
        grid: [
            {
                ...$grid,
                height: '35%',
            },
            {
                ...$grid,
                top: '55%',
                height: '35%',
            },
        ],
        tooltip: Object.assign(
            {
                trigger: 'axis',
                position: (pos, params, dom, rect, size) => {
                    var obj = {};

                    obj.left = pos[0] < size.viewSize[0] / 2 ? pos[0] : pos[0] - size.contentSize[0];

                    obj.top = pos[1] < size.viewSize[1] / 2 ? pos[1] : pos[1] - size.contentSize[1];

                    return obj;
                },
                formatter: (param) => {
                    let res = ['', ''];

                    param.map((item) => {
                        res[item.seriesIndex] += `<span style="color:#A5E5FF">${item.name}</span><br />`;
                        res[item.seriesIndex] += `${item.marker} <span style="color:${item.color}">${item.seriesName} <b>${item.value}</b></span>`;
                    });

                    return res.join('<br /><br />');
                },
            },
            $tooltip
        ),
        legend: {
            show: false,
        },
        axisPointer: {
            link: [
                {
                    xAxisIndex: 'all',
                },
            ],
        },
        xAxis: [
            {
                gridIndex: 0,
                type: 'category',
                axisLine: { onZero: true },
                data: data.next.axis,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: $color.xAxisLabel,
                },
                axisLine: {
                    lineStyle: {
                        color: $color.xAxisLine,
                    },
                },
            },
            {
                gridIndex: 1,
                position: 'top',

                type: 'category',
                axisLine: { onZero: true },
                data: data.last.axis,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: $color.xAxisLabel,
                },
                axisLine: {
                    lineStyle: {
                        color: $color.xAxisLine,
                    },
                },
            },
        ],
        yAxis: [
            {
                gridIndex: 0,
                type: 'value',
                axisLabel: {
                    color: $color.yAxisLabel,
                },
                splitLine: {
                    lineStyle: {
                        color: $color.yAxisLine,
                    },
                },
            },
            {
                gridIndex: 1,
                inverse: true,

                type: 'value',
                axisLabel: {
                    color: $color.yAxisLabel,
                },
                splitLine: {
                    lineStyle: {
                        color: $color.yAxisLine,
                    },
                },
            },
        ],
        series: [
            {
                name: data.next.series[0].name,
                type: 'line',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: data.next.series[0].data,
            },
            {
                name: data.last.series[0].name,
                type: 'line',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: data.last.series[0].data,
            },
        ],
    };

    /**
     * 插拔式开关（整块可移除，或者移除其中一项，也不会有任何影响）
     */
    option.series = option.series.map((item, index) => {
        $switch.handleColor(param, item, index); // 颜色
        $switch.handleAreaColor(param, item, index, $color, index === 1 ? true : false); // 区域渐变
        $switch.handleSmooth(param, item, index); // 曲线

        return item;
    });

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

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

    return echarts;
};
