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

import { EVENT_STATUS_MAP, EVENT_TYPE_IMAGES, getTextEventImg } from './helper';

interface EventItemProps {
  item: Record<string, any>;
}

function getEventPicUrl(item: Record<string, any>) {
  if (!item.eventPicUrl) {
    return EVENT_TYPE_IMAGES[item.eventType] || '';
  }
  if (item.eventPicUrl.includes(',')) {
    return item.eventPicUrl.substr(0, item.eventPicUrl.indexOf(','));
  }
  return item.eventPicUrl;
}

/**
 * 事件对象
 * @param props
 */
const EventItem = (props: EventItemProps) => {
  const { item } = props;

  return (
    <>
      <div className="left-area">
        {/* 抓牌照类型 */}
        {item.situationEnum === 'LiveVideo_EventPic' ||
        item.situationEnum === 'EventPic' ||
        item.situationEnum === 'Owner_Service' ||
        [
          'FireControlAlarm',
          'ManholeCoverTilt',
          'ChargingPileOverload',
          'HighAltitudeParabolic',
          'PeopleFeedback',
        ].includes(item.eventType) ? (
          <div
            style={{
              backgroundImage: `url(${getEventPicUrl(item)})`,
              width:
                EVENT_TYPE_IMAGES[item.eventType] &&
                item.eventType !== 'HighAltitudeParabolic'
                  ? 96
                  : 130,
            }}
            className="full-img-box"
          />
        ) : null}
        {/* 业主 */}
        {item.situationEnum === 'Owner' ||
        item.situationEnum === 'LiveVideo_EventPic_FaceCompare' ||
        item.situationEnum === 'Position_Owner_Emergency' ? (
          <div className="owner-info">
            <div
              className="img-bg"
              style={
                item.snapFacePicUrl || item.customerPortrait
                  ? {
                      backgroundImage: `url(${item.snapFacePicUrl ||
                        item.customerPortrait})`,
                    }
                  : {}
              }
            />
            <p
              className="ellipsis"
              title={item.memberName || item.customerName}
            >
              姓名：{item.memberName || item.customerName}
            </p>
          </div>
        ) : null}
        {/* 文本 */}
        {item.situationEnum === 'Text' ? (
          <div className="text-info">
            <div className="img-box">
              <img src={getTextEventImg(item.eventType)} />
            </div>
            {item.eventSituation &&
            item.eventSituation.items &&
            item.eventSituation.items.length ? (
              <p
                className="ellipsis"
                title={item.eventSituation.items[0].value}
              >
                {item.eventSituation.items[0].title}&nbsp;
                {item.eventSituation.items[0].value}
              </p>
            ) : null}
          </div>
        ) : null}
      </div>
      <div className="right-area">
        <div className="item-title">
          <span title={item.abnormalInfo} className="ellipsis title-span">
            {item.abnormalInfo}
          </span>
          <span
            className={`item-status ${
              item.eventGrade === 3
                ? 'danger'
                : item.eventGrade === 2
                ? 'important'
                : 'normal'
            }`}
          ></span>
        </div>
        <div className="item-desc" title={item.time}>
          <span className="item-label">时间：</span>
          <span className="item-value ellipsis">{item.time}</span>
        </div>
        <div className="item-desc ellipsis">
          <span className="item-label">地点：</span>
          <Tooltip title={item.position} placement="bottom">
            <span className="item-value ellipsis">{item.position}</span>
          </Tooltip>
        </div>
        <div
          className="item-desc ellipsis"
          title={EVENT_STATUS_MAP[item.eventStatus]}
        >
          <span className="item-label">状态：</span>
          <span className="item-value ellipsis">
            {EVENT_STATUS_MAP[item.eventStatus]}
          </span>
        </div>
      </div>
    </>
  );
};

export default EventItem;