/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2024-07-02 15:22:22
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2024-08-29 14:04:17
 * @FilePath: /MediScreen/src/components/TimeLine/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import './style.less';

interface TimelineItem {
  inspectPlanName: string;
  date: string;
  status: number;
  person?: string;
}

interface TimelineComponentProps {
  data: TimelineItem[];
}

const TimelineComponent: React.FC<TimelineComponentProps> = ({ data }) => {
  return (
    <div className="timeline">
      {data.map((item, index) => (
        <div
          className={
            item.status
              ? data[index + 1] && data[index + 1].status === 0
                ? `timelineItem midOff`
                : `timelineItem`
              : `timelineItem off`
          }
          key={index}
        >
          <div className='status'>{item.inspectPlanName}</div>
          <div className='center'></div>
          <div className='date'>{item.date}</div>
          <div className='name'>{item.person}</div>
        </div>
      ))}
    </div>
  );
};

export default TimelineComponent;
