import React from 'react';
import './index.less';
import { formatTimeStamp } from '@zenview/micro-utils';
import SingleColumnCard from '../../../../components/Card/SingleColumnCard';

/**
 * @desc 关系图谱各种详情
 * @param {} singleCard 是否是单列卡片
 * @param {Array} dataList 列表 [{desc:'2019.08.13 (共经过 3次)',list:[]}]
 */

const TimeLine = (props) => {
  let { dataList, singleCard = true, jumpDetail, jumpTogetherDetail, onClose } = props;
  return (
    <div className="time-line">
      {!!dataList.length &&
        dataList.map((item, j) => (
          <div className="time-case" key={`case${j}`}>
            <div className="case-header">{item.desc}</div>
            <div className="case-content">
              {singleCard &&
                item.list.map((v, k) => (
                  <div className="detail-box-item" key={v.aid + k}>
                    {getCard({ item: v, list: item.list, jumpDetail, onClose })}
                  </div>
                ))}
              {!singleCard &&
                item.list.reverse().map((v, index) => {
                  return (
                    <div key={`card${index}`} className="case-content-double">
                      {/* //title==='同乘'?jumpDetail:jumpTogetherDetail */}
                      {v.map((x, k) => {
                        return (
                          <div className="detail-box-item" key={x.aid || x.captureId}>
                            {getCard({ item: x, list: item.list, jumpDetail: jumpTogetherDetail, onClose })}
                          </div>
                        );
                      })}
                    </div>
                  );
                })}
            </div>
          </div>
        ))}
    </div>
  );
};

const getCard = ({ item, list, jumpDetail, onClose }) => {
  let { deviceName, captureTime, imgUrl } = item;
  return (
    <SingleColumnCard
      sourceData={item}
      click={() => {
        onClose();
        jumpDetail({ item, list });
      }}
      imgUrl={imgUrl}
      data={[
        {
          info: deviceName || '暂无',
          icon: 'icon-S_Bar_Add',
        },
        { info: formatTimeStamp(captureTime) || '暂无', icon: 'icon-S_Edit_ClockEnd' },
      ]}
    />
  );
};

export default TimeLine;
