import React from 'react';
import './index.less';
import { formatTimeStamp } from '@zenview/micro-utils';
import IconFont from '../../../themeComponents/IconFont';
/**
 * @desc 大库碰撞任务完成通知卡片
 * @param {array} data 卡片数据 [{info,icon,label}]
 */

const LibCollisionNoticeCard = (props) => {
  const {
    height,
    data: { searchTime, taskName, similarity },
  } = props;
  return (
    <div className="lib-collision-notice-card" style={{ height: height + 'px' }}>
      <IconFont type="icon-S_View_librarycollision" className="card-logo" />
      <div className="card-content">
        <p className="txt">大库碰撞&nbsp;&nbsp;分析已完成</p>
        <p className="txt">
          请进入<span className="mark-txt">大库碰撞-查询记录</span>中查看
        </p>
      </div>
      <div className="card-detail">
        <div className="detail-content">
          <p class="title">查询详情：</p>
          <p class="txt">
            查询时间：<span className="info">{formatTimeStamp(+searchTime)}</span>
          </p>
          <p class="txt">
            比对库名称：
            <span className="info" title={taskName}>
              {taskName}
            </span>
          </p>
          <p class="txt">
            相似度: <span className="info">{similarity}%</span>
          </p>
        </div>
      </div>
    </div>
  );
};

export default LibCollisionNoticeCard;
