import React from 'react';
import ReactEcharts from 'echarts-for-react';

export interface Line1Props {
    xAxis?: string[];
    data?: { name: string; data: number[] }[];
    style?: React.CSSProperties;
}

const getOption = ({ xAxis = [], data = [] }: Line1Props) => {
    return {
        color: ['#0E85FF', '#49FF81', '#26D4FF', '#F5D629', '#C97CFF'],
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            top: 0,
            left: 'center',
            textStyle: {
                color: '#fff',
            },
        },
        grid: {
            top: 40,
            left: 30,
            right: 0,
            bottom: 50,
        },
        xAxis: {
            data: xAxis,
            axisLabel: {
                color: '#DAF1FF',
                interval: 0,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            z: 10,
        },
        yAxis: {
            name: '单位：次',
            nameTextStyle: {
                color: '#fff',
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255,255,255,0.2)',
                },
            },
        },
        series: data.map(item => {
            return {
                name: item.name,
                type: 'line',
                smooth: true,
                data: item.data,
            };
        }),
    };
};

const Line1 = ({ xAxis, data, style }: Line1Props) => {
    return (
        <ReactEcharts option={getOption({ xAxis, data })} style={{ height: '100%', ...style }} />
    );
};

export default Line1;
