/**
 * 收集点-总览信息-收运规则
 */
import Progress from 'antd/es/progress';
import React from 'react';
import NoData from '../../../vm-nodata';

import './index.less';

import allRate from '../../imgs/all_rate.png';
import cyRate from '../../imgs/cy_rate.png';
import qtRate from '../../imgs/qt_rate.png';
import yhRate from '../../imgs/yh_rate.png';

export default function TodayWork(props: any) {
    const { data } = props;
    const blockItem = (title: string, value: number, unit: string) => (
        <div className="twork--item-block-item">
            <div>{title}</div>
            <div className="twork--item-block-item-value">
                <span>{value || 0}</span>
                {unit}
            </div>
        </div>
    );

    const getValue = (name: string) => {
        let strokeColor = {
            '0%': '#BFFFE8',
            '100%': '#37D3B0',
        };
        let src = allRate;
        switch (name) {
            case '全部':
                strokeColor = {
                    '0%': '#BFFFE8',
                    '100%': '#37D3B0',
                };
                src = allRate;
                break;
            case '其他垃圾':
                strokeColor = {
                    '0%': '#EC982B',
                    '100%': '#FFE49A',
                };
                src = qtRate;
                break;
            case '厨余垃圾':
                strokeColor = {
                    '0%': '#62C1FD',
                    '100%': '#3E9DF9',
                };
                src = cyRate;
                break;
            case '有害垃圾':
                strokeColor = {
                    '0%': '#FFA793',
                    '100%': '#FF6770',
                };
                src = yhRate;
                break;
            default:
                strokeColor = {
                    '0%': '#EC982B',
                    '100%': '#FFE49A',
                };
                src = qtRate;
                break;
        }
        return { strokeColor, src };
    };

    return (
        <div className="twork">
            {Array.isArray(data) ? (
                data.map((item, index) => {
                    const { strokeColor, src } = getValue(item?.productTypeName);
                    return (
                        <div className="twork--item" key={index}>
                            <div>
                                <img src={src} />
                            </div>
                            <div className="twork--item-progress">
                                <div>
                                    {item?.productTypeName}完成率：
                                    {item.rate * 100 || 0}%
                                </div>
                                <div className="twork--item-progress-bg">
                                    <Progress
                                        strokeLinecap="butt"
                                        percent={item.rate}
                                        strokeColor={strokeColor}
                                        trailColor="#444B59"
                                        strokeWidth={6}
                                        showInfo={false}
                                    />
                                </div>
                            </div>
                            <div className="twork--item-block">
                                {blockItem('应收次数', item?.planNum, '次')}
                                {blockItem('实收次数', item?.collectNum, '次')}
                                {blockItem('收集桶数', item?.bucketNum, '桶')}
                                {blockItem('收集重量', item?.weight, 'kg')}
                            </div>
                        </div>
                    );
                })
            ) : (
                <NoData />
            )}
        </div>
    );
}
