import React from 'react';
import IconFont from '../../../themeComponents/IconFont';
import ImageView from '../../../components/ImageView';
import { algorithmType, runStatus, feedbackStatus } from './dict'
import './eventCard.less'

const formatDurationTime = timetemp => {
  const hU = 1 * 60 * 60 * 1000;
  const mU = 1 * 60 * 1000;
  const sU = 1 * 1000;
  const h = Math.floor(timetemp / hU);
  const m = Math.floor((timetemp - h * hU) / mU);
  const s = Math.floor((timetemp - h * hU - m * mU) / sU);
  const hStr = `${h ? (h > 9 ? h : '0' + h) + '时' : ''}`;
  const mStr = `${m ? (m > 9 ? m : '0' + m) + '分' : hStr ? '00分' : ''}`;
  const sStr = `${s ? (s > 9 ? s : '0' + s) + '秒' : mStr ? '00秒' : ''}`;
  return hStr + mStr + sStr;
};


const EventCard = ({ queryDetailHandle, detail, activeType }) => {

  const alarmType = algorithmType.find((item) => Number(item.value) === Number(detail.alarmType))
  const runStatueObj = runStatus.find((d) => Number(d.code) === Number(detail.runStatus))
  const formatDuration = formatDurationTime(detail.duration)
  const rebackImage = feedbackStatus.find((v) => v.code === detail.feedbackStatus)

  return <div className={`list-card-popup ${detail.sceneType === 1 ? 'no-tag' : ''}`} onClick={() => { }}>
    <div className="list-card-image">
      <ImageView src={detail.alarmImageUrl}></ImageView>
      <span className="list-task-status" style={{ backgroundColor: runStatueObj.bgColor }}>{runStatueObj.label}</span>
    </div>
    <div className="list-card-detail">
      {
        detail.sceneType !== 1 ? <div className="list-card-detail-tag">
          <IconFont type={alarmType && alarmType.icon} style={{ fontSize: '20px' }}></IconFont>
          <span>{alarmType && alarmType.label}</span>
        </div> : null
      }
      {rebackImage && rebackImage.img && <ImageView className="list-task-status-img" src={rebackImage.img}></ImageView>}
      <div className="list-card-detail-name">
        <div className="device-name">
          <IconFont type="icon-S_Bar_Add"></IconFont>
          <span>{detail.deviceName}</span>
        </div>
        <div className="task-name">
          <IconFont type="icon-S_Bar_Layer"></IconFont>
          <span>{detail.taskName}</span>
        </div>
      </div>
      <div className="list-card-detail-name">
        <div className="device-name">
          <IconFont type="icon-S_Edit_ClockStart"></IconFont>
          <span>{typeof detail.alarmTime === 'string' ? detail.alarmTime : ''}</span>
        </div>
        <div className="task-name">
          <IconFont type="icon-S_Edit_ClockStart"></IconFont>
          <span>{formatDuration}</span>
        </div>
      </div>
    </div>
  </div>
}

export default EventCard;