import React from 'react';
import { Tooltip } from 'antd';
import IconFont from '../../../themeComponents/IconFont';
import CaptureCard from '../AlarmCapture'
import './index.less';

class MultipointUnusualCard extends React.Component {
  constructor(props) {
    super(props);
  }

  handlePageJump = data => {
    this.props.handlePageJump && this.props.handlePageJump(data);
  };

  render() {
    const { data = {}, height, className } = this.props;
    let { lastCaptureUrl, lastCaptureTime, appearPlaceCount, lastCaptureDeviceName, address, personBriefInfos = [], context } = data;
    let placeTag = '';
    try {
      placeTag = JSON.parse(context).personAbnormalActivity.placeTag;
    } catch (e) {
      placeTag = '';
    }
    const { personName = '' } = personBriefInfos && personBriefInfos.length > 0 ? personBriefInfos[0] : {};
    return (
      <CaptureCard
        className={`multipoint-unusual-card ${className}`}
        style={{ height: `${height}px!important` }}
        onClick={() => this.handlePageJump(data)}
        address={address}
        hoverScale={false}
        imgUrl={lastCaptureUrl}
        captureTime={lastCaptureTime}
        deviceName={lastCaptureDeviceName}
        relativeIcon={false}
        prevChildren={
          <>
            <div className="prev-children-item">
              <span>
                <IconFont type="icon-S_Edit_Avatar" />
                <span style={{ color: 'var(--primary)' }}>{personName}</span>
              </span>
              {!className && (
                <Tooltip title={`异常出现在${+placeTag === 119101 ? '小区' : '医院'}数量`}>
                  <span>
                    <IconFont type={+placeTag === 119101 ? 'icon-S_Place_Community' : 'icon-L_Place_Hospital'} />
                    <span style={{ color: 'var(--primary)' }}>{appearPlaceCount}</span>
                  </span>
                </Tooltip>
              )}
            </div>
            {className && (
              <span className={'item '}>
                <IconFont type="icon-S_Place_Community" />
                <span style={{ color: 'var(--primary)' }}>{appearPlaceCount}</span>
              </span>
            )}
            <div className="multipoint-unusual-card-rencent-tip">最近出现</div>
          </>
        }
      ></CaptureCard>
    );
  }
}

export default MultipointUnusualCard;
