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

interface checkProps {
  params: any;
  visible: boolean;
  callback: () => void;
}

/**
 * 故障详情
 * @param props
 * @constructor
 */
const Check: React.FC<checkProps> = (props) => {
  const { visible, callback, params } = props;

  const onOk = () => {
    callback();
  };

  const onCancel = () => {
    callback();
  };
  return (
    <Modal title="查看详情" open={visible} onOk={onOk} onCancel={onCancel} width={1000}>
      <Descriptions title="报警详情" bordered column={4}>
        <Descriptions.Item label="设备编号" span={2}>
          {params.device_code}
        </Descriptions.Item>
        <Descriptions.Item label="分控编号" span={2}>
          {params.sub_device_code}
        </Descriptions.Item>
        <Descriptions.Item label="故障码" span={2}>
          {params.code}
        </Descriptions.Item>
        <Descriptions.Item label="故障描述" span={2}>
          {params.desc}
        </Descriptions.Item>
        <Descriptions.Item label="故障状态" span={2}>
          {params.status}
        </Descriptions.Item>
        <Descriptions.Item label="上报时间" span={2}>
          {params.created_at}
        </Descriptions.Item>
        <Descriptions.Item label="通知时间" span={2}>
          {params.notice_time}
        </Descriptions.Item>
        <Descriptions.Item label="客户名称" span={2}>
          {params.user_name}
        </Descriptions.Item>
        <Descriptions.Item label="解决办法" span={4}>
          {params.solution}
        </Descriptions.Item>
        <Descriptions.Item label="图片">
          {params && params.files
            ? params.files.map((res: any) => {
                return <Image width={50} key={res.record_id} src={res.url} />;
              })
            : null}
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};
export default Check;
