import React from "react";
import './index.less';
import { formatTimeStamp } from '@zenview/micro-utils';
import ImageView from '../../../components/ImageView';
import IconFont from '../../../themeComponents/IconFont';

class ObjectMapPersonnelCard extends React.Component {
  handlePageJump = (data) => {
    this.props.handlePageJump && this.props.handlePageJump(data);
  };
  render() {
    let {
      placeName,
      lastCaptureDeviceName,
      alarmDeviceName,
      alarmTime,
      name,
      lastCaptureUrl,
      lastCaptureTime,
      aid
    } = this.props.data;
    let { className='' } = this.props;
    return (
      <div
        className={`${className} abnormal-person-card`}
        onClick={() => this.handlePageJump(this.props.data)}
      >
        <div className="map-personnerl-header">
          <div className="img-box">
            <ImageView className="image" src={lastCaptureUrl} />
          </div>
          <div className="header-info">
              <div className="info-content">
                <p className="content-text name" title={name || aid}>
                  <IconFont type={"icon-S_Edit_Avatar"} theme="outlined" />
                  <span className="value">{name || aid}</span>
                </p>
              </div>
              <div className="info-content">
                <div className="title">报警信息</div>
                <p className="content-text">
                  <IconFont type={"icon-S_Bar_Add"} theme="outlined" />
                  <span className="value" title={alarmDeviceName || "暂无"}>
                    {alarmDeviceName || "暂无"}
                  </span>
                </p>
                <p className="content-text">
                  <IconFont type={"icon-S_Edit_ClockEnd"} theme="outlined" />
                  <span className="value">
                    {alarmTime ? formatTimeStamp(+alarmTime) : "暂无"}
                  </span>
                </p>
              </div>
              <div className="info-content">
                <div className="title">区域内最后出现</div>
                <p className="content-text">
                  <IconFont type={"icon-S_Bar_Add"} theme="outlined" />
                  <span className="value" title={lastCaptureDeviceName || "暂无"}>
                    {lastCaptureDeviceName || "暂无"}
                  </span>
                </p>
                <p className="content-text">
                  <IconFont type={"icon-S_Edit_ClockEnd"} theme="outlined" />
                  <span className="value">
                    {lastCaptureTime ? formatTimeStamp(+lastCaptureTime) : "暂无"}
                  </span>
                </p>
              </div>
            {placeName && (
              <div className="info-content">
                <p className="content-text">
                 在{placeName}区域异常活动
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }
}

export default ObjectMapPersonnelCard;
