import React, { ReactElement, Fragment, MouseEventHandler } from 'react'
import styles from './index.module.css'

interface Header {
  data: Array<string>
}

interface ItemProps extends Model {
  zipHnadle?: MouseEventHandler,
  children?: Function
}

const StatusMap : any = {
  '0':'切片失败',
  '1':'未解压',
  '2':'未转换坐标',
  '3':'未转geojson',
  '4':'未切片',
  '5':'切片完成',
  '6':'切片中',
  '7': '坐标转换失败',
  '8':' 服务已发布',
  '9': '判断中',
  '10': '发布失败',
  '11': '待修改样式',
  '12': '样式修改失败'
}

function Item(props: ItemProps | Header) : ReactElement {
  let data : Array<any> = []
  let status = (props as Model).status
  if ((props as Model).fileName !== void 0) {
    data.push(
      (props as Model).fileName,
      (props as Model).fileUrl,
      (props as Model).type,
      (props as Model).updateTime,
      StatusMap[status]
    );
    
    (props as ItemProps).children && data.push(((props as ItemProps).children as Function)())
  } else {
    data = (props as Header).data.map(str => <b>{str}</b>)
  }

  let ls = data.map((str, i) => <span className={styles.item} key={i}>{str}</span>)

  return <Fragment>{ls}</Fragment>
}

export default Item