import React, { CSSProperties, useState } from 'react'

import HncyCard from '@/pages/Home_v_2504/components/common/Card'
import no1 from '@/assets/images/no1.png'
import no2 from '@/assets/images/no2.png'
import no3 from '@/assets/images/no3.png'

import styles from './index.less'
import DescriptionItem from '@/components/DescriptionItem'

export default function WorkStar() {

    const [list, setList] = useState([
        {
            name: '张富林',
            count: 456,
            org: 'XX城管执法中队'
        }, {
            name: '李富林',
            count: 432,
            org: 'XX城管执法中队'
        }, {
            name: '王富林',
            count: 123,
            org: 'XX城管执法中队'
        }
    ])

    return (
        <HncyCard
            title='工作之星'
            style={{
                height: 196
            }}
        >
            <div className={styles.workStar}>
                {
                    list.map((item, index) => {
                        return (
                            <div className={styles.item} key={index}
                                style={{
                                    background: bgColor(index + 1)
                                }}>
                                <img className={styles.icon} src={icons(index + 1)} alt="" />
                                <div className={styles.name}>{item.name}</div>
                                {/* <div className={styles.count}>{item.count}</div> */}
                                <DescriptionItem
                                    value={item.count}
                                    valueStyle={valueStyle}
                                    unit='件'
                                    unitStyle={unitStyle}
                                    name={''}
                                />
                                <div className={styles.org}>{item.org}</div>
                            </div>
                        )
                    })
                }
            </div>
        </HncyCard>
    )
}

const icons = (index: number) => {
    return {
        1: no1,
        2: no2,
        3: no3,
    }[index]
}

const bgColor = (index: number) => {
    return {
        1: 'linear-gradient(180.00deg, rgba(250, 222, 133, 0.4),rgba(250, 221, 132, 0) 100%)',
        2: 'linear-gradient(180.00deg, rgba(234, 234, 234, 0.4),rgba(231, 231, 231, 0) 100%)',
        3: 'linear-gradient(180.00deg, rgba(252, 228, 220, 0.4),rgba(252, 228, 220, 0) 100%)',
    }[index]
}

const valueStyle: CSSProperties = {
    color: 'rgb(89, 238, 255)',
    fontFamily: 'D-DIN',
    fontSize: 26,
    fontWeight: 700,
}

const unitStyle: CSSProperties = {
    color: 'rgb(188, 206, 233)',
    fontFamily: '微软雅黑',
    fontSize: 18,
    fontWeight: 400,
    lineHeight: '24px',
}