/**
 * 计量信息-图表-进场趋势分析
 */

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

import NoData from '../../../vm-nodata';

interface TypeProps {
    data: { legends: []; names: []; values: [] };
}

const Ljcsl = (props: TypeProps) => {
    const { legends, names, values } = props.data;
    let value = [];
    if (values?.length > 0) {
        value = values.map((ele: any) => ele[0]);
    }
    const option = {
        color: ['#00FFE7'],
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            itemWith: 6,
            itemHeight: 6,
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
            data: ['日产生量'],
        },
        grid: {
            left: '8%',
            right: '6%',
            top: 28,
            bottom: 20,
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#fff',
            },
            data: names,
        },
        yAxis: {
            type: 'value',
            name: 'kg',
            min: 0,
            nameTextStyle: {
                color: '#fff',
            },
            splitNumber: 5,
            axisLabel: {
                color: '#fff',
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(151,151,151,0.28)',
                },
            },
        },
        series: [
            {
                name: '日产生量',
                type: 'line',
                data: value,
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: 'rgba(0, 0, 0, 0.5)',
                        },
                        {
                            offset: 1,
                            color: '#00FFE7',
                        },
                    ]),
                },
                markLine: {
                    data: [{ type: 'average', name: '均值' }],
                    // data: [
                    //     {
                    //         yAxis: 8,
                    //         lineStyle: {
                    //             normal: {
                    //                 color: '#FFE25D',
                    //             },
                    //         },
                    //         name: '均值',
                    //     },
                    // ],
                    lineStyle: {
                        color: '#FFE25D',
                    },
                },
            },
        ],
    };
    return (
        <>
            {legends?.length > 0 ? (
                <ReactEcharts
                    option={option}
                    notMerge
                    lazyUpdate
                    style={{ height: '160px', width: '100%' }}
                />
            ) : (
                <NoData />
            )}
        </>
    );
};

export default Ljcsl;
