import type { StepsProps } from 'antd'
import { Spin, Steps } from 'antd'

function stepToChinese(step: number): string {
  const stepMap = ['第一步', '第二步', '第三步', '第四步', '第五步', '第六步']
  return stepMap[step] || ''
}

export default function AppSteps({ items, ...props }: StepsProps) {
  const customDot = (dot, { status }) => {
    const statusMap: any = {
      wait: '待处理',
      process: '处理中',
      finish: '已完成',
    }
    return (
      <>
        <div className="app-progress-step-box">
          {status === 'process' ? <Spin size="large"></Spin> : statusMap[status]}
        </div>
      </>
    )
  }
  return (
    <Steps
      className="app-process-steps"
      progressDot={customDot}
      labelPlacement="vertical"
      style={{ margin: '80px' }}
      {...props}>
      {items?.map(({ title, ...item }, index) => {
        return (
          <Steps.Step
            key={index}
            title={
              <>
                {stepToChinese(index)}
                <br />
                {title}
              </>
            }
            {...item}></Steps.Step>
        )
      })}
    </Steps>
  )
}
