// PaymentProgessCard
import { G2, Radar } from "@ant-design/charts";
import { Bar } from '@ant-design/plots';
import { Card, Col, Row, Typography } from "antd";
import type { DataItem } from '../data'


export type TimeType = 'today' | 'week' | 'month' | 'year'

type RevenueCardProps = {

    loading: boolean,
    salesData?: { title: string, data: DataItem[] }
}


const PaymentProgessCard = ({ loading, salesData }: RevenueCardProps) => {
    // const G = G2.getEngine('canvas');
    const config = {
        appendPadding: 16,
        autoFit: true,
        data: salesData?.data,
        xField: 'Account_Amount',
        yField: 'Account_Name',
        seriesField: 'Account_Name',
        legend: {
            position: 'top-left',
        },
        height: 300,

    };
    return (
        <Card
            bordered={false}
            loading={loading}
            title={`${salesData?.title}详细款项完成进度`}
            style={{ marginBottom: 24, height: 410 }}

        >

            {/* <Bar {...config} /> */}
            <Radar
                height={250}
                data={salesData?.data || []}
                appendPadding={10}
                xField="Account_Name"
                yField="Complete_Degree"
                autoFit
                meta={{
                    Complete_Degree: {
                        alias: "完成度",
                        min: 0,
                        max: 100,
                    }
                }}

                area={{}}
                point={{
                    size: 2,
                }}
                yAxis={{
                    line: null,
                    tickLine: null,
                    grid: {
                        line: {
                            type: 'line',
                            style: {
                                lineDash: null,
                            },
                        },
                        alternateColor: 'rgba(0, 0, 0, 0.04)',
                    },
                }}
                xAxis={{
                    line: null,
                    tickLine: null,
                    grid: {
                        line: {
                            style: {
                                lineDash: null,
                            },
                        },
                    },
                }}
                tooltip={
                    {

                        customContent: (title, data) => { // title, data

                            const [nowData] = data

                            return <div className="g2-tooltip-list" key={title}>

                                <div className="g2-tooltip-title" style={{ fontWeight: 700 }}>{title}: {nowData?.value || 100}%</div>
                                {salesData?.data.sort((a, b) => b.Account_Amount - a.Account_Amount).map(n => {
                                    return (
                                        <div className="g2-tooltip-item g2-tooltip-list-item" key={n.Account_Name}>
                                            <div className="g2-tooltip-marker" style={{ backgroundColor: n.Account_Amount ? "#5B8FF9" : "#E8EDF3" }}></div>
                                            <Typography.Text className="g2-tooltip-name">{n.Account_Name}</Typography.Text>
                                            <Typography.Text className="g2-tooltip-value">{n.Account_Amount || 0}万元</Typography.Text>
                                        </div>
                                    )

                                })}

                            </div>;
                        }
                    }
                }
            // point={{
            //   visible: true,
            // }}
            // legend={{
            //   position: 'bottom-center',
            // }}
            />


        </Card>
    );
};

export default PaymentProgessCard;
