import React from 'react'
import Step from './Step'
import { UPREADY, UPERR, UPSUCCESS, UPING } from './constant'
import styles from './index.module.css'


function UItem(props: UFileC) {
  let StatusMap: any = {
    [UPREADY]: <span className={styles.ready}>准备上传</span>,
    [UPERR]: <span className={styles.err}>上传失败</span>,
    [UPING]: <span className={styles.ing}>{parseInt(props.percentage.toString())}%</span>,
    [UPSUCCESS]: <span className={styles.success}>上传成功</span>
  }
  let Status = StatusMap[props.status.toString()]

  return (
    <div className={styles.filelayer}>
      <div className={styles.fileitem}>
        <span>{props.name}</span>
        {Status}
      </div>
      <Step step={props.percentage} />
    </div>
  )
}

export default UItem