import KFIcon from '@/components/KFIcon';
import { ExperimentStatusValues, experimentStatusInfo } from '@/pages/Experiment/status';
import { ExperimentInstance } from '@/types';
import { elapsedTime, formatDate } from '@/utils/date';
import { useNavigate } from '@umijs/max';
import { Button } from 'antd';
import styles from './index.less';
type ExperimentTableProps = {
  tableData: ExperimentInstance[];
  style?: React.CSSProperties;
};

function ExperimentTable({ tableData = [], style }: ExperimentTableProps) {
  const navgite = useNavigate();
  const gotoExperiment = (record: ExperimentInstance) => {
    navgite(`/pipeline/experiment/${record.workflow_id}/${record.id}`);
  };

  return (
    <div className={styles['experiment-table']} style={style}>
      <div className={styles['experiment-table__header']}>
        <div className={styles['experiment-table__status']}>状态</div>
        <div className={styles['experiment-table__duration']}>运行时长</div>
        <div className={styles['experiment-table__date']}>开始时间</div>
        <div className={styles['experiment-table__operation']}>操作</div>
      </div>
      {tableData?.map((item) => (
        <div className={styles['experiment-table__content']} key={item.id}>
          <div className={styles['experiment-table__status']} style={{ paddingLeft: '6.5px' }}>
            <img
              src={experimentStatusInfo[item.status as ExperimentStatusValues]?.icon}
              width={17}
              height={17}
            />
          </div>
          <div className={styles['experiment-table__duration']}>
            {elapsedTime(item.create_time, item.finish_time)}
          </div>
          <div className={styles['experiment-table__date']}>{formatDate(item.create_time)}</div>
          <div className={styles['experiment-table__operation']}>
            <Button
              size="small"
              type="link"
              icon={<KFIcon type="icon-xiangqing2" font={14} />}
              onClick={() => gotoExperiment(item)}
            >
              详情
            </Button>
          </div>
        </div>
      ))}
    </div>
  );
}

export default ExperimentTable;