import React from 'react';
import { Modal, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface editProps {
  visible: boolean;
  editCallback: () => void;
  params: any;
}

interface DataType {
  record_id: string;
}

/**
 * 24小时设备状态数据
 * @param props
 * @constructor
 */
const DeviceStatusData: React.FC<editProps> = (props) => {
  const { params, visible, editCallback } = props;

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      align: 'center',
      key: 'index',
      render: (_: any, _row: any, index: number) => index + 1,
    },
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '温度',
      dataIndex: 'temperature',
      key: 'temperature',
      render: (_, record: any) => {
        return <span>{record.temperature ? record.temperature.toFixed(1) : ''}</span>;
      },
    },
    {
      title: '湿度',
      dataIndex: 'humidity',
      key: 'humidity',
      render: (_, record: any) => {
        return <span>{record.humidity ? record.humidity.toFixed(1) : ''}</span>;
      },
    },
    {
      title: 'CO2',
      dataIndex: 'co2',
      key: 'co2',
    },
    {
      title: 'PM25',
      dataIndex: 'pm25',
      key: 'pm25',
    },
    {
      title: '开关',
      dataIndex: 'power',
      key: 'power',
      render: (_, record: any) => {
        return (
          <span style={{ color: `${{ 0: 'red', 1: 'green' }[record.power]}` }}>
            {{ 0: '关', 1: '开' }[record.power]}
          </span>
        );
      },
    },
  ];

  return (
    <Modal
      title="24小时设备状态数据"
      width={1300}
      footer={null}
      open={visible}
      onCancel={() => {
        editCallback();
      }}
    >
      <Table
        columns={columns}
        dataSource={params}
        rowKey={(record) => record.record_id}
        pagination={false}
        scroll={{ y: 700 }}
      />
    </Modal>
  );
};
export default DeviceStatusData;
