import React from 'react'
import './index.less'
import ModuleTitleWithTabs from '@/pages/Home_v_2504/components/common/ModuleTitleWithTabs'
import HncyCard from '@/pages/Home_v_2504/components/common/Card'
import GenderProportion from './components/GenderProportion'
import GenderPieChart from './components/GenderPieChart'

export default function WorkersGender() {
  return (
    <HncyCard
      title='环卫人员性别'
      extra={
        <div className='gender-wrapper'>
          <div>
            <div className='dot blue'></div>
            男
          </div>
          <div>
            <div className='dot yellow'></div>
            女
          </div>
        </div>
      }
      style={{
        height: '192px',
      }}
    >
      <div className='children'>
        <div className='left'>
          <GenderProportion
            value={3.95}
            percentage={68.5}
            type='male'
          />
        </div>
        <div className='middle'>
          <GenderPieChart />
        </div>
        <div className='right'>
          <GenderProportion
            value={2.05}
            percentage={31.5}
            type='female'
          />
        </div>
      </div>
    </HncyCard>
  )
}
