import React from 'react'
import './index.less'
import HncyCard from '@/pages/Home_v_2504/components/common/Card'
import DescriptionItem from '@/components/DescriptionItem'
import { formatValueWithWan, formatDecimalsWithWan, formatUnitWithWan } from '@/pages/Home_v_2504/config/commonUtils'
import classNames from 'classnames'

export default function WorkersType() {
  // 定义所有卡片的数据
  const cardData = [
    { value: 1405023, name: '清扫保洁人员', unit: '人' },
    { value: 1586, name: '机动车驾驶员', unit: '人' },
    { value: 152, name: '环卫公厕管理人员', unit: '人' },
    { value: 145, name: '项目管理人员', unit: '人' },
    { value: 5126, name: '环卫公厕清扫人员', unit: '人' },
    { value: 1652, name: '其他', unit: '人' },
  ]

  // 定义值的样式
  const valueStyle = {
    fontSize: '22px',
    fontWeight: '700',
    // lineHeight: '26px'
  }

  // 定义标签和单位的样式
  const unitStyle = {
    fontSize: '14px',
    fontWeight: '400',
    color: 'rgb(188, 206, 233)',
    lineHeight: '18px',
  }

  const labelStyle = {
    ...unitStyle,
    marginTop: '-4px'
  }

  return (
    <HncyCard
      title='环卫人员类型'
      style={{
        height: '192px',
      }}
    >
      <div className="workersTypeContainer">
        <div className="cardRow">
          {cardData.map((card, index) => (
            <div 
              key={index} 
              className={classNames('cardItem', { 
                'firstCard': index === 0,
                'firstRow': index < 3,
                'secondRow': index >= 3
              })}
            >
              <DescriptionItem
                value={formatValueWithWan(card.value)}
                name={card.name}
                unit={formatUnitWithWan(card.value) + card.unit}
                valueStyle={valueStyle}
                labelStyle={labelStyle}
                unitStyle={unitStyle}
                direction="vertical"
                decimals={formatDecimalsWithWan(card.value)}
              />
            </div>
          ))}
        </div>
      </div>
    </HncyCard>
  )
}
