import React from 'react'
import { Row , Col } from 'antd'
import './index.less'

const typeArr = [
  {
    label: '人员档案',
    type: 'person',
    title:"总人数"
  },
  {
    label: '设备档案',
    type: 'device',
    title:"设备总数"
  },
  {
    label: '场所档案',
    type: 'place',
    title:"场所总数"
  },
  {
    label: '房屋档案',
    type: 'house',
    title:"房屋总数"
  },
  {
    label: '车辆档案',
    type: 'vehicle',
    title:"总车数"
  }
];
class Header extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      
    }
  }

  render() {
    let {nums,type,countLoading } = this.props
    let lable=""
    let title=""
    typeArr.forEach(v=>{
      if(v.type===type){
       return lable=v.label,title=v.title}})
    return (
      <div className="personnel-header">
      <p className="header-title">
        {lable}
      </p>
      {!countLoading ? (
        <>
          <p className="sub-header-title">{title}</p>
          <Row className="header-title-nums font-resource-normal">
           { nums.map((v, k) => isNaN(v*1) ? <Col className='header-title-comma animate-num' key={k}>，</Col> :
            <Col className='header-title-num animate-num' key={k}>
              {v}
            </Col>
            )}
          </Row>
        </>
      ) : (
        <div className='header-title-loading'/>
      )}
    </div>
    )
  }
}

export default Header
