import { PageContainer, StatisticCard } from '@ant-design/pro-components';
import { Col, Row } from 'antd';
import { useEffect, useState } from 'react';
import { getStockSummary } from '@/services/api';

const { Statistic } = StatisticCard;

const DashboardPage: React.FC = () => {
  const [summary, setSummary] = useState<any>({});

  useEffect(() => {
    getStockSummary().then((res) => {
      if (res?.code === 0) {
        setSummary(res.data);
      }
    });
  }, []);

  return (
    <PageContainer>
      <Row gutter={[16, 16]}>
        <Col span={4}>
          <StatisticCard
            statistic={{
              title: '产品总数',
              value: summary.productCount || 0,
              suffix: '种',
            }}
          />
        </Col>
        <Col span={5}>
          <StatisticCard
            statistic={{
              title: '总匹数',
              value: summary.totalPieces || 0,
              suffix: '匹',
            }}
          />
        </Col>
        <Col span={5}>
          <StatisticCard
            statistic={{
              title: '总盘数',
              value: summary.totalRolls || 0,
              suffix: '盘',
            }}
          />
        </Col>
        <Col span={5}>
          <StatisticCard
            statistic={{
              title: '库存总值(成本)',
              value: summary.totalCostValue || '0.00',
              prefix: '¥',
            }}
          />
        </Col>
        <Col span={5}>
          <StatisticCard
            statistic={{
              title: '库存总值(销售)',
              value: summary.totalSalesValue || '0.00',
              prefix: '¥',
            }}
          />
        </Col>
      </Row>
    </PageContainer>
  );
};

export default DashboardPage;