import PageContent from '@/components/PageContent';
import PageTitle from '@/components/PageTitle';
import { queryIotList } from '@/services/HardwareController';
import { useParams, useRequest } from '@umijs/max';
import { Spin } from 'antd';
import styles from './index.less';

const Work = (props) => {
  const { projectId } = useParams();

  const { data, loading } = useRequest(queryIotList, {
    defaultParams: [projectId],
  });

  const getIconStatus = (status) => {
    if (status == 1) return '';
    if (status == 2) return styles.offline;
    if (status == 3) return styles.error;
  };

  return (
    <PageContent>
      <PageTitle>空调控制</PageTitle>
      <div className={`card-box ${styles.top}`}>
        <div className={styles.left}>
          <img
            className={styles.img}
            src={require('@/assets/air-conditioner.png')}
          />
          <div>
            <div className={styles.number}>{data?.pagination?.total}</div>
            空调数量
          </div>
        </div>
        <div className={styles.right}>
          <div className={styles.row}>
            <i className={styles.icon}></i> 在线：{data?.online_count}
          </div>
          <div className={styles.row}>
            <i className={`${styles.icon} ${styles.error}`}></i> 故障：{data?.fault_count}
          </div>
          <div className={styles.row}>
            <i className={`${styles.icon} ${styles.offline}`}></i> 离线：{data?.offline_count}
          </div>
        </div>
      </div>
      <Spin spinning={loading}>
        {data?.list?.map((item) => (
          <div key={item.id} className={`card-box ${styles.item}`}>
            <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
            {item.name}
          </div>
        ))}
      </Spin>
    </PageContent>
  );
};

export default Work;