
import { TinyArea } from "@ant-design/charts";
import { Card, Col, Radio, Row, Statistic, Table } from "antd";
import type { DataItem } from '../data.d';
import type { RadioChangeEvent } from 'antd/es/radio';
import styles from '../analysis.less'
import IconFont from "@/components/IconFont";

type CustomerCardProps = {
    loading: boolean,
    activeButton: string,
    handleSizeChange?: (e: RadioChangeEvent) => void,
    visitData2: DataItem[],
    searchdata: DataItem[]
}
const isRankIndex = (index: any) => {
    switch (true) {
        
        case index<4:
            return <div className={ styles.rankIndex1}>
                <IconFont name={`icon-a-${index}`} size="30"></IconFont>
                <span className={ styles.text}>{index}</span>
            </div>;
        default:
            return <div><div className={styles.rankIndex}>{index}</div></div>;
    }
}

const columns = [
    {
        title: '排名',
        dataIndex: 'index',
        key: 'index',
        render: (text: string) => <> {isRankIndex(text)}</>
    },
    {
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        render: (text: string) => <a>{text}</a>
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
    }
]

const CustomerCard = ({ loading, activeButton, visitData2, searchdata, handleSizeChange }: CustomerCardProps) => {
    return (
        <Card
            title="节假日客流分析"
            loading={loading}
            bordered={false}
            style={{ marginBottom: 24 }}
            extra={
                <Radio.Group value={activeButton} onChange={handleSizeChange}>
                    <Radio.Button value="year">年度</Radio.Button>
                    <Radio.Button value="spring">春运</Radio.Button>
                    <Radio.Button value="wuyi">五一</Radio.Button>
                    <Radio.Button value="summer">暑假</Radio.Button>
                    <Radio.Button value="autumn">国庆</Radio.Button>
                </Radio.Group>
            }
        >
            <Row gutter={24}>
                <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                    <div>
                        今年客流:
                        <Statistic value={12342} ></Statistic>
                    </div>
                    <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
                    <div className={styles.tableTitle}>服务区繁忙程度排行</div>
                    <Table<any> showHeader={false} size="small" columns={columns} dataSource={searchdata} pagination={{hideOnSinglePage:true}}>

                    </Table>
                </Col>
                <Col xl={12} lg={24} md={24} sm={24} xs={24}>
                    <div>
                        去年客流:
                        <Statistic value={10342}></Statistic>
                    </div>
                    <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
                    <div className={ styles.tableTitle }>单品交易排行</div>
                    <Table<any> showHeader={false} size="small" columns={columns} dataSource={searchdata} pagination={{hideOnSinglePage:true}}></Table>
                </Col>
            </Row>

        </Card>
    )
}

export default CustomerCard;