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

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

    let { data, isValue, isDataZoom, isClearInterval } = param;

    /**
     * 导出配置项
     */
    let option = {
        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',
                },
            },
        ],
        dataZoom: isDataZoom
            ? {
                  type: 'inside',
                  startValue: 0,
                  endValue: 7,
                  xAxisIndex: [0],
                  zoomOnMouseWheel: false,
                  moveOnMouseMove: false,
                  moveOnMouseWheel: true,
              }
            : { show: false },
        grid: $grid,
        tooltip: Object.assign(
            {
                trigger: 'axis',
                position: 'inside',
                formatter: (param) => {
                    let res = `${param[0].name}`;

                    param.map((item) => {
                        res += `<br /> ${item.marker} ${item.seriesName} <span style="color:#666;font-weight:bold;">${
                            item.seriesType === 'line' ? (isValue ? item.value : item.value + '%') : thousandFormat(item.value, 2)
                        }</span>`;
                    });

                    return res;
                },
            },
            $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: [],
    };

    /**
     * 数据处理
     */
    data.series.map((item, index) => {
        option.series.push({
            name: item.name,
            data: item.data,
            type: 'line',
            emphasis: {
                focus: 'series',
            },
            itemStyle: {
                color: $color.theme[index % $color.theme.length]
            }
        });
    });

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

        return item;
    });

    /**
     * 渲染
     */
    let extensOption = $echarts.extens(opt, option);
    let echarts = $echarts.render(dom, extensOption);
    const dateTimer = Number(localStorage.getItem('dateTimer'));

    // if (isClearInterval) {
    //     for (let index = 0; index < 10000; index++) {
    //         if (dateTimer !== 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);
    } else {
        // for (let index = 0; index < 10000; index++) {
        //     if (dateTimer !== index) {
        //         clearInterval(index);
        //     }
        // }
    }

    return echarts;
};
