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

interface Gauge1Props {
    num?: number | string;
    average?: number | string;
    min?: number | string;
    max?: number | string;
    name?: string;
    unit?: string;
}
const getGaugeOption = ({
    num = 0,
    min = 0,
    average = 0,
    max = 100,
    name = '',
    unit = '',
}: Gauge1Props) => {
    const good = num > average;
    return {
        title: {
            left: 'center',
            top: '60%',
            text: `{a|${name}}\n{b|${good ? '优于均值' : '差于均值'}}`,
            textStyle: {
                rich: {
                    a: {
                        color: '#fff',
                        fontSize: 14,
                        lineHeight: 40,
                    },
                    b: {
                        color: good ? '#63FFC6' : '#FFCD36',
                        fontSize: 14,
                    },
                },
            },
        },
        series: [
            {
                type: 'gauge',
                center: ['50%', '50%'],
                radius: '75%',
                startAngle: 200,
                endAngle: -20,
                min,
                max,
                splitNumber: 10,
                progress: {
                    show: true,
                    width: 10,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: good ? '#50F0FF' : '#FFBE31',
                                },
                                {
                                    offset: 1,
                                    color: good ? '#3EA6FF' : '#FF4800',
                                },
                            ],
                        },
                    },
                },
                pointer: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        width: 10,
                    },
                },
                axisTick: {
                    distance: -20,
                    length: 5,
                    splitNumber: 5,
                    lineStyle: {
                        width: 1,
                        color: '#999',
                    },
                },
                splitLine: {
                    distance: -23,
                    length: 8,
                    lineStyle: {
                        width: 2,
                        color: '#999',
                    },
                },
                axisLabel: {
                    show: false,
                    distance: -12,
                    color: '#999',
                    fontSize: 12,
                },
                anchor: {
                    show: false,
                },
                title: {
                    show: false,
                },
                detail: {
                    valueAnimation: true,
                    width: '60%',
                    borderRadius: 8,
                    offsetCenter: [0, 0],
                    fontWeight: 'bolder',
                    formatter: `{a|${num}}{b|${unit}}\n{c|均值${average}${unit}}`,
                    textStyle: {
                        rich: {
                            a: {
                                color: '#fff',
                                fontSize: 24,
                            },
                            b: {
                                color: '#fff',
                                fontSize: 12,
                            },
                            c: {
                                color: '#9BA8B0',
                                fontSize: 12,
                            },
                        },
                    },
                },
                data: [
                    {
                        value: num,
                    },
                ],
            },
        ],
    };
};
const Gauge1 = (props: Gauge1Props) => {
    return <ReactEcharts option={getGaugeOption(props)} style={{ height: '100%' }} />;
};

export default Gauge1;
