import services from '@/services';
import React, { useEffect, useState } from 'react';
import DeviceDistribution from './components/DeviceDistribution';
import MonitorTable from './components/MonitorTable';
import StatsOverview from './components/StatsOverview';
import styles from './index.less';

const LightingDeviceStatus: React.FC = () => {
  const [dataSource, setDataSource] = useState<any[]>([]);

  /** 获取数据*/
  const getData = () => {
    services.DataBase.getGzInfoData({
      typeCode: 'gz-zm-sblx',
    }).then((res) => {
      if (res.code === 200) {
        setDataSource(res.data);
      }
    });
  };

  useEffect(() => {
    getData();
  }, []);
  return (
    <div className={styles.container}>
      <div className={styles.leftContent}>
        {/* 左上统计概览 */}
        <StatsOverview dataSource={dataSource} />
        {/* 左下设备分布 */}
        <DeviceDistribution dataSource={dataSource} />
      </div>
      {/* 右侧监测表格 */}
      <MonitorTable />
    </div>
  );
};

export default LightingDeviceStatus;
