import React, { Component } from 'react';
import PictureArray from './pictureArray';
import './index.less';
import { formatTimeStamp } from '@zenview/micro-utils';
import IconFont from '../../../themeComponents/IconFont';
class SubscriptionCard extends Component {
  handlePageJump = data => {
    this.props.handlePageJump && this.props.handlePageJump(data);
  };
  render() {
    const { data, moduleName = 'outflowof', className = '' } = this.props;
    const {
      active = false,
      lastCaptureUrl,
      checkboxItem = undefined,
      children,
      date,
      total = 0,
      aids,
      taskName,
      aggregateNumber = 0,
      prevChildren,
      alarmTime,
      captureTime,
      placeName,
      lastCaptureUrls = []
    } = data; //       deviceName,

    let imgs = ['outflowof', 'inflowof'].includes(moduleName) ? aids.map(v => v.picUrl) : [lastCaptureUrl];
    if (moduleName === 'abnormalGroupsList') {
      imgs = lastCaptureUrls; // 异常群体
    }
    return (
      <div className={`subscription-card-item ${className} ${active ? 'active' : ''}`} onClick={() => this.handlePageJump(data)}>
        {['outflowof', 'inflowof'].includes(moduleName) && (
          <div className="title">
            <span className="time">{date}</span>
            <span className="text">
              疑似人员{moduleName === 'outflowof' ? '流出' : '流入'}数量：<span className="num">{total}</span>
            </span>
          </div>
        )}
        <PictureArray images={imgs} />
        {checkboxItem}
        {moduleName === 'abnormalGroupsList' && (
          <div className="item-info">
            {prevChildren}
            <div className="item plate-number">
              <IconFont type="icon-S_Edit_Avatar" />
              {aggregateNumber}
            </div>
            <div className="item device-name" title={taskName}>
              <IconFont type="icon-S_Bar_Add" />
              {taskName && getSubStr(taskName)}
            </div>
            {placeName && <div className="item device-name" title={placeName}>
              <IconFont type="icon-S_Bar_Add" />
              {placeName && getSubStr(placeName)}
            </div>}
            {(alarmTime || captureTime) && (
              <div className="item capture-time">
                <IconFont type="icon-S_Edit_ClockEnd" />
                {formatTimeStamp((alarmTime|| captureTime))}
              </div>
            )}
            {children}
          </div>
        )}
      </div>
    );
  }
}
export default SubscriptionCard;

function getSubStr(str, number = 4) {
  if (str.length > number * 2) {
    let arr1 = str.substr(0, number);
    let arr2 = str.substr(str.length - number, number);
    return `${arr1}...${arr2}`;
  } else {
    return str;
  }
}
