
import { Pie } from "@ant-design/charts";
import { Card, Radio } from "antd";
import numeral from 'numeral';
import type { DataItem } from "../data";
import type { RadioChangeEvent } from "antd/es/radio";
import type { PieConfig } from "@ant-design/charts";

type ProportionSalesProps = {
    salesType: 'business' | 'customer' | 'yearwest',
    loading: boolean,
    salesPieData: DataItem[],
    handleChangeSalesType?: (e: RadioChangeEvent) => void
}

const ProportionSales = ({ salesType, loading, salesPieData, handleChangeSalesType }: ProportionSalesProps) => {
    return (
        <Card
            title="占比分析"
            loading={loading}
            extra={
                <Radio.Group value={salesType} onChange={handleChangeSalesType}>
                    <Radio.Button value="business">优质业态</Radio.Button>
                    <Radio.Button value="customer">客群分析</Radio.Button>
                    <Radio.Button value="yearwest">年度费用</Radio.Button>
                </Radio.Group>
            }
            
        >
            <Pie
                autoFit
                height={370}
                radius={ 0.8 }
                innerRadius={0.6}
                angleField="y"
                colorField="x"
                data={salesPieData as any}
                legend={false}
                label={{
           
                    type: 'spider',
                    formatter: (text, item) => {
                        // eslint-disable-next-line no-underscore-dangle
                        return `${item._origin.x}: ${numeral(item._origin.y).format('0,0')}`;
                    },
                }}
                statistic={
                    {
                        title: {
                            customHtml(container, view, datum) {
                                return datum ? datum.title :'总计'
                            }
                        },
                    } as PieConfig['statistic']
                }
            />
        </Card>
    );
}

export default ProportionSales;


