
import { Col, Divider, Row, Space } from "antd"
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { StatisticCard } from '@ant-design/pro-card';
import { TinyArea, TinyColumn } from "@ant-design/charts";
import type { DataItem } from '../data'
import { createFromIconfontCN } from '@ant-design/icons'

const IconFont = createFromIconfontCN({
  // 该地址为iconfont中的项目地址，根据实际进行修改
  scriptUrl: '//at.alicdn.com/t/font_2794551_xabf001cvq.js'
});
const topColResponsiveProps = {
    xs: 24,
    sm: 12,
    md: 12,
    lg: 12,
    xl: 6,
    style: { marginBottom: 24 },
};
const bodyStyle = {
    padding: '12px 24px'
}

const IntroduceRow = ({ loading, visitData }: { loading: boolean, visitData: DataItem[] }) => {
    return (
        <Row gutter={24} >
            <Col {...topColResponsiveProps} >
                <StatisticCard
                    loading={loading}
                    title={
                        <Space>
                            
                            <span>日结营收</span>
                            <IconFont type="icon-rijieyingshou" style={{fontSize:18}} />
                      </Space>
                    }
                    statistic={{
                        prefix: '￥',
                        value: 123560,
                        description: (
                            <>
                                <StatisticCard.Statistic title="日同比" value="+14%" style={{ marginTop: 16 }} suffix={<ArrowUpOutlined style={{ color: "#3f8600" }} />} />
                                <Divider style={{ margin: '10px 0' }} />
                                <StatisticCard.Statistic title="昨日总营收" prefix="¥" value="120423" />
                            </>
                        )

                    }}

                    bodyStyle={bodyStyle}
                >
                </StatisticCard>

            </Col>
            <Col {...topColResponsiveProps} >
                <StatisticCard
                    bordered={false}
                    title={
                        <Space>
                            
                            <span>月结营收</span>
                            <IconFont type="icon-yuejieyingshou" style={{fontSize:18}} />
                      </Space>
                    }
                   
                    statistic={{
                        prefix: '￥',
                        value: 123560,
                        description: (
                            <>
                                <StatisticCard.Statistic title="月同比" value="-14%" style={{ marginTop: 16 }} suffix={<ArrowDownOutlined style={{ color: "#F5222D" }} />} />
                                <Divider style={{ margin: '10px 0' }} />
                                <StatisticCard.Statistic title="上月总营收" prefix="¥" value="120423" />
                            </>
                        )
                    }}

                    bodyStyle={bodyStyle}
                >
                </StatisticCard>
            </Col>
            <Col {...topColResponsiveProps} >
                <StatisticCard
                    bordered={false}
                    
                    title={
                        <Space>
                            
                            <span>客单数量</span>
                            <IconFont type="icon-kedanshuliang" style={{fontSize:18}} />
                      </Space>
                    }
                    statistic={{
                        value: 3560,
                    }}
                    chart={
                        <TinyArea
                            color="#975FE4"
                            // xField="x"
                            height={32}
                            autoFit
                            // yField="y"
                            smooth
                            data={visitData}
                        />
                    }

                    bodyStyle={bodyStyle}
                >
                    <>
                        <Divider style={{ marginTop: 0, marginBottom: 10 }} />
                        <StatisticCard.Statistic title="本月客单数量" value="126423" />
                    </>
                </StatisticCard>
            </Col>
            <Col {...topColResponsiveProps} >
            <StatisticCard
                    bordered={false}
                   
                    title={
                        <Space>
                            
                            <span>服务司乘</span>
                            <IconFont type="icon-fuwusicheng" style={{fontSize:18}} />
                      </Space>
                    }
                    statistic={{
                        value: 13560,
                    }}
                    chart={
                        <TinyColumn
                           
                            // xField="x"
                            height={32}
                            autoFit
                            // yField="y"
                            data={visitData}
                        />
                    }

                    bodyStyle={bodyStyle}
                >
                    <>
                        <Divider style={{ marginTop: 0, marginBottom: 10 }} />
                        <StatisticCard.Statistic title="本月服务司乘" value="1264230" />
                    </>
                </StatisticCard>
            </Col>


        </Row>

    )
}

export default IntroduceRow;