import React, { useEffect, useState, useRef } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { connect } from 'dva';
import { Steps, Button } from 'antd';
import styles from './Index.less';

const { Step } = Steps;
// 时间节点
function TimeNode(props) {
  const {
    flow: { current, list, active },
    isAuditor,
    onApprove,
  } = props;

  if (!list || list.FlowNodes?.length != 0) {
    return (
      <div className={styles.top}>
        <Steps current={current} status={active == 0 ? 'error' : 'process'}>
          {list.FlowNodes.map(item => (
            <Step
              key={item.id}
              title={item.node}
              // description={`审批角色：${item?.AuditRoleInfo.Name || '-'}`}
            />
          ))}
        </Steps>
        <div className={styles.btns} style={{ marginLeft: 80 }}>
          {isAuditor && active != 0 && (
            <>
              <Button type="primary" onClick={() => onApprove(true)}>
                审批通过
              </Button>
              <Button onClick={() => onApprove(false)} danger>
                审批拒绝
              </Button>
            </>
          )}
        </div>
      </div>
    );
  }
  // else {
  //   if (!flowDetail?.nodes) return;
  //   const node = flowDetail.nodes.find(item => item.Id == nodeId);
  //   return `当前节点：${node?.label || '-'}`;
  // }
  return null;
}

export default TimeNode;