import React from 'react'
import ImageCard from '../ImageCard'
import moment from 'moment'
import { IconValueCard, AlarmCardFooter, AlarmCardEffective } from '../utils'
import './index.less'
import IconFont from '../../../themeComponents/IconFont';


/**
 * @desc 重点人员告警卡片
 * @param {boolean} active 是否选中
 * @param {function} click 回调
 * @param {array} data 卡片转换数据
 * @param {array} sourceData 卡片源数据
 * @param {node} children 卡片信息
 * @param {function} handleChangeYN 有效无效事件
 * @param {boolean} isActual 是否显示有效、无效按钮和水印
 */
const AlarmTwoImgCard = props => {
  let { active = false, click, isActual = false, handleChangeYN, sourceData, actionName, className,children } = props
  let { imageUrl, faceUrl, score, cameraName, objectMainJson = {}, captureTime, libName, isEffective, isHandle, deviceName, address } = sourceData
  let { name } = objectMainJson
  let personName = objectMainJson && name ? name : ''

  return (
    <>
    <div className={`lm-two-img-card-alarm ${active ? 'active' : ''} ${className}`} onClick={() => click && click(sourceData)}>
      <div className="lm-two-img-card-header">
        <div className="header-box">
          <ImageCard imgUrl={imageUrl} />
          <div className="img-text">布控照片</div>
        </div>
        <div className="header-box">
          <ImageCard imgUrl={faceUrl} />
          <div className="img-text">抓拍照片</div>
        </div>
        <div className="similarity">
          <IconFont type={'icon-S_Photo_Like'} theme="outlined" />
          <span className="number">{score && Math.floor(score)}%</span>
        </div>
      </div>
      <div className="lm-two-img-card-info">
        <div className="content">
          <div className="item name">
            <IconFont type={'icon-S_Edit_Avatar'} theme="outlined" />
            <span className="info" title={personName}>
              {personName ? (personName.length > 15 ? personName.substring(0, 15) + '...' : personName) : ''}
            </span>
          </div>
          <div className="item process alarm-score-progress">
            <IconValueCard value={libName} icon={'icon-S_Bar_Layer'} />
          </div>
        </div>
        <div className="content">
          <div className="item">
            <IconValueCard title={deviceName || cameraName || address} value={deviceName || cameraName || address} icon={'icon-S_Bar_Add'} />
          </div>
          <div className="item">
            <IconValueCard value={moment(parseInt(captureTime, 10)).format('YYYY.MM.DD HH:mm:ss')} icon={'icon-S_Edit_ClockEnd'} />
          </div>
        </div>
        {isActual && isHandle === 0 ? (
          <AlarmCardFooter actionName={actionName} sourceData={sourceData} handleChangeYN={handleChangeYN} />
        ) : (
            <div className="card-footer" style={{ height: '0px' }} />
          )}
      </div>
      {isHandle === 1 && <AlarmCardEffective isEffective={isEffective} />}
    </div>
    {children && children()}
    </>
  )
}

export default AlarmTwoImgCard
