/**
 * 考核信息汇总
 */

import NoData from '../vm-nodata';
import React from 'react';
import SubTitle from '../vm-sub-title';

import top1 from './imgs/1.png';
import top2 from './imgs/2.png';
import top3 from './imgs/3.png';
import top4 from './imgs/4.png';
import top5 from './imgs/5.png';

interface DeductPointItem {
    standardName: string;
    standardNum: number;
    deductPoints: number;
}

interface TypeProps {
    deductPoint: Array<DeductPointItem>;
}

const AppraisalTop5 = (props: TypeProps) => {
    const { deductPoint } = props;

    const imgs = (index: number) => {
        let src = '';
        switch (index) {
            case 1:
                src = top1;
                break;
            case 2:
                src = top2;
                break;
            case 3:
                src = top3;
                break;
            case 4:
                src = top4;
                break;
            case 5:
                src = top5;
                break;
            default:
                break;
        }
        return src;
    };

    return (
        <div className="appraisal-content-kh-top">
            <SubTitle title="扣分因子分析TOP5" />
            {deductPoint?.length > 0 ? (
                deductPoint.map((ele: any, index: number) => (
                    <div className="appraisal-content-kh-topItem" key={index}>
                        <div className="appraisal-content-kh-topItem-content">
                            <img src={imgs(index + 1)} />
                            {ele.standardName}
                        </div>
                        <div>
                            <span>{ele.standardNum}</span>次
                        </div>
                        <div className="appraisal-content-kh-topItem-score">
                            <span>{ele.deductPoints}</span>分
                        </div>
                    </div>
                ))
            ) : (
                <div className="appraisal-content-kh-top-nodata">
                    <NoData />
                </div>
            )}
        </div>
    );
};

export default AppraisalTop5;
