/**
 * 月度趋势分析
 */
import React from 'react';
import ReactEcharts from 'echarts-for-react';
import SubTitle from '../vm-sub-title';

interface TypeProps {
    data: {
        legends: Array<string>;
        names: Array<string>;
        values: Array<any>;
    };
}

const RmMonthTrend = ({ data }: TypeProps) => {
    const { legends, names, values } = data;
    const option = {
        color: ['#4195FF', '#FFE25D'],
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            show: true,
            itemWith: 6,
            itemHeight: 6,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
            data: legends || [],
        },
        grid: {
            top: 28,
            left: 24,
            bottom: 24,
            right: 24,
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
            },
            data: names || [],
        },
        yAxis: [
            {
                name: '次数(次)',
                type: 'value',
                nameTextStyle: {
                    color: '#fff',
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#fff',
                },
                axisLine: {
                    show: true,
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(151,151,151,0.28)',
                    },
                },
            },
            // {
            //     name: '金额(元)',
            //     type: 'value',
            //     nameTextStyle: {
            //         color: '#fff',
            //     },
            //     axisTick: {
            //         show: false,
            //     },
            //     axisLabel: {
            //         color: '#fff',
            //     },
            //     axisLine: {
            //         show: true,
            //     },
            //     splitLine: {
            //         show: false,
            //     },
            // },
        ],
        series: [
            {
                name: '维保次数',
                type: 'line',
                yAxisIndex: 0,
                data: values[0] || [],
            },
            // {
            //     name: '维保金额',
            //     type: 'line',
            //     yAxisIndex: 1,
            //     data: [140, 150, 160, 170, 110, 50, 90],
            // },
        ],
    };
    return (
        <div className="rm-month-trend">
            <SubTitle title="月度趋势分析" />
            <div className="rm-month-trend-chart">
                <ReactEcharts
                    option={option}
                    notMerge
                    lazyUpdate
                    style={{ height: '100%', width: '100%' }}
                />
            </div>
        </div>
    );
};

export default RmMonthTrend;
