/** @format */

import { Tooltip } from 'antd';
import React from 'react';

import { DEVICE_MAP } from './helper';

interface EventItemProps {
  item: Record<string, any>;
}
export const EVENT_STATUS_MAP: Record<string, any> = {
  '0': '未完成',
  '1': '未完成',
  '2': '已完成',
};
/**
 * 事件对象
 * @param props
 */
const EventItem = (props: EventItemProps) => {
  const { item } = props;

  return (
    <>
      <div className="left-area">
        <div
          style={{
            backgroundImage: `url(${item.imgUrl})`,
            width: 130,
          }}
          className="full-img-box"
        />
      </div>
      <div className="right-area">
        <div className="item-title">
          <span className="ellipsis title-span">
            {DEVICE_MAP[item.iocDeviceType]}
          </span>
          <span title={item.abnormalInfo} className="ellipsis title-span">
            {item.abnormalInfo}
          </span>
          <span
            className={`item-status ${
              item.deviceErrorType === 0
                ? 'danger'
                : item.deviceErrorType === 1
                ? 'important'
                : 'normal'
            }`}
          ></span>
        </div>
        <div className="item-desc" title={item.time}>
          <span className="item-label">时间：</span>
          <span className="item-value ellipsis">{item.createTime}</span>
        </div>
        <div className="item-desc ellipsis">
          <span className="item-label">地点：</span>
          <Tooltip title={item.address} placement="bottom">
            <span className="item-value ellipsis">{item.address}</span>
          </Tooltip>
        </div>
        <div
          className="item-desc ellipsis"
          title={EVENT_STATUS_MAP[item.status]}
        >
          <span className="item-label">状态：</span>
          <span className="item-value ellipsis">
            {EVENT_STATUS_MAP[item.status]}
          </span>
        </div>
      </div>
    </>
  );
};

export default EventItem;