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

import allRate from '../../imgs/all_rate.png';
import cxRate from '../../imgs/cx_rate.png';
import xsRate from '../../imgs/xs_rate.png';
import ssRate from '../../imgs/ss_rate.png';

export default function TodayWork(props: any) {
    const { data } = props;

    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 = cxRate;
                break;
            case '洗扫':
                strokeColor = {
                    '0%': '#62C1FD',
                    '100%': '#3E9DF9',
                };
                src = xsRate;
                break;
            case '洒水':
                strokeColor = {
                    '0%': '#FFA793',
                    '100%': '#FF6770',
                };
                src = ssRate;
                break;
            default:
                strokeColor = {
                    '0%': '#EC982B',
                    '100%': '#FFE49A',
                };
                src = allRate;
                break;
        }
        return { strokeColor, src };
    };

    return (
        <div className="base-right-twork">
            <SubTitle title="今日作业" />
            <div className="twork">
                <div className="twork--head">
                    <div className="twork--head-img"></div>
                    <div className="twork--head-carType">车辆类型</div>
                    <div className="twork--head-block">计划里程</div>
                    <div className="twork--head-block">有效里程</div>
                    <div className="twork--head-block">计划趟数</div>
                    <div className="twork--head-block">有效趟数</div>
                </div>
                {Array.isArray(data) ? (
                    data.map((item, index) => {
                        const { strokeColor, src } = getValue(
                            item?.workTypeName,
                        );
                        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={20}
                                            strokeColor={strokeColor}
                                            trailColor="#444B59"
                                            strokeWidth={6}
                                            showInfo={false}
                                        />
                                    </div>
                                </div>
                                <div className="twork--item-block">
                                    <span>22</span>公里
                                </div>
                                <div className="twork--item-block">
                                    <span>22</span>公里
                                </div>
                                <div className="twork--item-block">
                                    <span>5</span>趟
                                </div>
                                <div className="twork--item-block">
                                    <span>22</span>趟
                                </div>
                            </div>
                        );
                    })
                ) : (
                    <NoData />
                )}
            </div>
            <div className="twotk-tabel">
                <TodayWorkTable />
            </div>
        </div>
    );
}
