import React, { useEffect, useState } from 'react';
import { Descriptions, Modal } from 'antd';

interface editPros {
  dataVisible: boolean;
  checkParams: any;
  editCallback: () => void;
}

const DataCheck: React.FC<editPros> = (props) => {
  const { dataVisible, checkParams, editCallback } = props;

  const [data, setData] = useState<any>({});

  const modeList = {
    0: '制冷',
    1: '制热',
    2: '除湿',
    3: '送风',
    4: '加湿',
  };

  const onCancel = () => {
    editCallback();
  };

  useEffect(() => {
    if (checkParams) {
      const params = JSON.parse(checkParams);
      setData(params);
    }
  }, []);

  return (
    <Modal title="数据" open={dataVisible} onCancel={onCancel} footer={null} width={800}>
      <Descriptions bordered>
        <Descriptions.Item label="二氧化碳">{data?.co2}</Descriptions.Item>
        <Descriptions.Item label="湿度">{data?.currentHumidly} %rh</Descriptions.Item>
        <Descriptions.Item label="风速">{data?.fanSpeed} m/s</Descriptions.Item>
        <Descriptions.Item label="风阀五开度">{data?.fanValveFiveDegree}°</Descriptions.Item>
        <Descriptions.Item label="风阀四开度">{data?.fanValveFourDegree}°</Descriptions.Item>
        <Descriptions.Item label="风阀三开度">{data?.fanValveThreeDegree}°</Descriptions.Item>
        <Descriptions.Item label="加水时长">{data?.humidlyOpen} 秒</Descriptions.Item>
        <Descriptions.Item label="湿度控制">
          ({data?.humidlyStartAt} - {data?.humidlyStopAt}) %
        </Descriptions.Item>
        <Descriptions.Item label="加水停止时长">{data?.humidlyStopAt} 分钟</Descriptions.Item>
        <Descriptions.Item label="模式">{modeList[data?.mode]}</Descriptions.Item>
        <Descriptions.Item label="是否打开新风">
          {{ 1: '关', 2: '开' }[data?.newFan]}
        </Descriptions.Item>
        <Descriptions.Item label="PM2.5">{data?.pm25} μg/m³</Descriptions.Item>
        <Descriptions.Item label="开关">{{ 0: '关', 1: '开' }[data?.power]}</Descriptions.Item>
        <Descriptions.Item label="设定温度">{data?.setTemp} °C</Descriptions.Item>
        <Descriptions.Item label="电磁阀">{data?.solenoidValve}</Descriptions.Item>
        <Descriptions.Item label="高水位报警">{data?.waterAlarm}</Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};
export default DataCheck;
