import React, { useMemo } from 'react'
import DescriptionItem from '@/components/DescriptionItem'
import male from '@/assets/images/V-2504/male.png'
import female from '@/assets/images/V-2504/female.png'
import maleActive from '@/assets/images/V-2504/maleActive.png'
import femaleActive from '@/assets/images/V-2504/femaleActive.png'
import './index.less'

type GenderProportionProps = {
    value: number,
    percentage: number,
    type: 'male' | 'female'
}

export default function GenderProportion({
    value,
    percentage,
    type
}: GenderProportionProps) {

    const activeNums = useMemo(() => {
        return Math.ceil(percentage / 100 * 7)
    }, [percentage])


    return (
        <div>
            <DescriptionItem
                direction="horizontal"
                name={type === 'male' ? '男性' : '女性'}
                value={percentage}
                valueStyle={{
                    color: '#FFF',
                    fontSize: 20,
                    fontWeight: 700
                }}
                unit="%"
                unitStyle={{
                    color: '#BCCEE9',
                    fontWeight: 400,
                    fontSize: 16
                }}
                labelStyle={{
                    marginRight: 12
                }}
                decimals={1}
            />
            <div className='percentage'>
                {/* 根据activeNums 和 type 类型，渲染高亮的 maleActive 或者 femaleActive 的图片数量 */}
                {
                    Array.from({ length: 7 }).map((_, index) => {
                        return (
                            <div key={index} className={type === 'male' ? 'male' : 'female'}>
                                {
                                    index < activeNums ? (
                                        <img src={type === 'male' ? maleActive : femaleActive} alt="" />
                                    ) : (
                                        <img src={type === 'male' ? male : female} alt="" />
                                    )
                                }
                            </div>
                        )
                    })
                }
            </div>
            <DescriptionItem
                direction="vertical"
                name={''}
                value={value}
                valueStyle={{
                    color: '#FFF',
                    fontSize: 24,
                    fontWeight: 700
                }}
                unit="万人"
                unitStyle={{
                    color: '#BCCEE9',
                    fontWeight: 400,
                    fontSize: 16
                }}
                decimals={2}
            />
        </div>
    )
}
