/**
 * 路段-统计信息-作业里程
 */
import React from 'react';
import * as echarts from 'echarts';
import ReactEcharts from 'echarts-for-react';
import SubTitle from '../../../vm-sub-title';
import NoData from '../../../vm-nodata';

interface TypeProps {
    data: Array<any>;
}

function Zylc(props: TypeProps) {
    const { data } = props;
    let planData = [],
        workMileage = [],
        xData = [];
    if (data?.length > 0) {
        xData = data.map(ele => ele.workDate);
        planData = data.map(ele => ele.planMileage);
        workMileage = data.map(ele => ele.workMileage);
    }
    let option = {
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            left: '8%',
            right: '6%',
            bottom: 20,
        },
        legend: {
            align: 'left',
            itemGap: 8,
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: '#fff',
            },
            data: ['计划里程', '作业里程'],
        },
        xAxis: [
            {
                type: 'category',
                data: xData,
                boundaryGap: true,
                axisPointer: {
                    type: 'shadow',
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#fff',
                },
            },
        ],
        yAxis: [
            {
                type: 'value',
                name: '(km)',
                min: 0,
                nameTextStyle: {
                    color: '#fff',
                },
                splitNumber: 5,
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: '#fff',
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: 'rgba(151,151,151,0.28)',
                    },
                },
            },
        ],
        series: [
            {
                name: '计划里程',
                type: 'bar',
                barWidth: 10,
                data: planData,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#1B89FF',
                        },
                        {
                            offset: 1,
                            color: '#51D0FF',
                        },
                    ]),
                },
            },
            {
                name: '作业里程',
                type: 'bar',
                barWidth: 10,
                data: workMileage,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#00A983 ',
                        },
                        {
                            offset: 1,
                            color: '#44FFD1',
                        },
                    ]),
                },
            },
        ],
    };

    return (
        <div className="road-statistic-charts-lcfx">
            <SubTitle title="作业里程分析" />
            <div className="road-statistic-charts-lcfx-contain">
                {data?.length > 0 ? (
                    <ReactEcharts
                        option={option}
                        notMerge
                        lazyUpdate
                        style={{ height: '100%', width: '100%' }}
                    />
                ) : (
                    <NoData />
                )}
            </div>
        </div>
    );
}

export default Zylc;
