/**
 * 左侧3个echart
 */

import { Progress } from 'antd';
import ReactEcharts from 'echarts-for-react';
import React from 'react';

interface ChartsProps {
    gpsSpeed: number;
    mileage: number;
}

export default function Charts({ gpsSpeed, mileage }: ChartsProps) {
    const gauge = {
        series: [
            {
                type: 'gauge',
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 180,
                splitNumber: 6,
                radius: '90%',
                center: ['50%', '50%'],
                itemStyle: {
                    color: '#5AD8A6',
                },
                progress: {
                    show: true,
                    width: 4,
                    itemStyle: {
                        color: '#5AD8A6',
                    },
                },
                pointer: {
                    length: '60%',
                    width: 2,
                },
                axisLine: {
                    lineStyle: {
                        width: 4,
                        // color: [[1, '#999']],
                    },
                },
                axisTick: {
                    splitNumber: 1,
                    lineStyle: {
                        width: 1,
                        color: '#999',
                    },
                },
                splitLine: {
                    length: 4,
                    lineStyle: {
                        width: 2,
                        color: '#999',
                    },
                },
                axisLabel: {
                    show: false,
                },

                detail: {
                    show: false,
                },
                data: [
                    {
                        value: 100,
                    },
                ],
            },
        ],
    };

    // let liquidFill = {
    //     series: [
    //         {
    //             type: 'liquidFill',
    //             radius: '100%',
    //             z: 1,
    //             center: ['50%', '50%'],
    //             data: [0.5],
    //             label: {
    //                 show: false,
    //             },
    //             backgroundStyle: {
    //                 borderWidth: 1,
    //                 color: 'rgba(255, 255, 255,0.2)',
    //                 borderColor: 'rgba(255, 255, 255,0.2)',
    //             },
    //             outline: {
    //                 show: true,
    //                 itemStyle: {
    //                     borderWidth: 0,
    //                 },
    //                 borderDistance: 0,
    //             },
    //             color: ['#F6BD16'],
    //         },
    //     ],
    // };
    return (
        <div className="car-base-left--charts">
            <div className="car-base-left--charts-item">
                <div className="car-base-left--charts-item-chart">
                    <ReactEcharts
                        option={gauge}
                        notMerge
                        lazyUpdate
                        style={{ height: '100%', width: '100%' }}
                    />
                </div>
                <div>
                    <div className="car-base-left--charts-item-name">当前速度</div>
                    <div className="car-base-left--charts-item-value">
                        <span>{gpsSpeed}</span>km/h
                    </div>
                </div>
            </div>
            <div className="car-base-left--charts-item">
                <div
                    className="car-base-left--charts-item-chart"
                    style={{ height: '70px', width: '100%' }}
                >图标</div>
                <div>
                    <div className="car-base-left--charts-item-name">剩余油量</div>
                    <div className="car-base-left--charts-item-value">
                        <span>30</span>L
                    </div>
                </div>
            </div>
            <div className="car-base-left--charts-item" style={{ marginTop: '24px' }}>
                <div className="car-base-left--charts-item-chart">
                    <Progress
                        width={68}
                        type="circle"
                        status="normal"
                        strokeLinecap="butt"
                        percent={75}
                        strokeColor={'#5AD8A6'}
                        strokeWidth={8}
                    />
                </div>
                <div>
                    <div className="car-base-left--charts-item-name">今日行驶</div>
                    <div className="car-base-left--charts-item-value">
                        <span>{mileage}</span>km
                    </div>
                </div>
            </div>
        </div>
    );
}
