import { PageContainer } from '@ant-design/pro-components';
import { Card } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './Welcome.less';
import StatisticIndex from '../pages/statistical/index';
import { getStatisticData } from '@/services/statistic';

/**
 * 首页
 * @constructor
 */
const Welcome: React.FC = () => {
  const [data, setData] = useState<any>(null);

  // 获取数据
  const getData = () => {
    getStatisticData().then((res) => {
      if (res?.code === 0) {
        setData(res.data);
      }
    });
  };

  // 初始化
  useEffect(() => {
    getData();
  }, []);

  return (
    <PageContainer>
      <div className={styles.statistic}>
        <div className={styles.num_style}>
          <div className={styles.title}>注册用户</div>
          <div>
            <span className={styles.num}>{data?.user_count}</span>
            <span style={{ fontSize: '12px', marginLeft: '5px' }}>人</span>
          </div>
          <img src="/assets/user.png" alt="用户" className={styles.statistic_icon} />
        </div>
        <div className={styles.num_style}>
          <div className={styles.title}>设备数</div>
          <div>
            <span className={styles.num}>{data?.device_offline + data?.device_online}</span>
            <span style={{ fontSize: '12px', marginLeft: '5px' }}>个</span>
          </div>
          <img src="/assets/device.png" alt="设备" className={styles.statistic_icon} />
        </div>
      </div>
      <Card>
        <div className={styles.device_status}>设备状态</div>
        {data && <StatisticIndex data={data} />}
      </Card>
    </PageContainer>
  );
};

export default Welcome;