/**
 * 维保信息汇总
 */
import React from 'react';
import SubTitle from '../vm-sub-title';

import count from './imgs/count.png';
import amount from './imgs/amount.png';

interface typeProps {
    data: {
        thisYearCount: number;
        thisYearFee: number;
        thisYearOnLastYearCount: number;
        thisYearOnLastYearFee: number;
    };
}

const RmInfoSummary = (props: typeProps) => {
    const { data } = props;
    return (
        <div>
            <SubTitle title="维保信息汇总" />
            <div className="rm-summary">
                <div className="rm-summary-item">
                    <img src={count} />
                    <div>
                        <div className="rm-summary-item--name">年度维保总次数</div>
                        <div className="rm-summary-item--value">
                            <span>{data?.thisYearCount || 0}</span>
                            {' 次'}
                            <div className="rm-summary-item--value-compare">
                                年同比 {data?.thisYearOnLastYearCount || 0}%
                                {data?.thisYearOnLastYearCount >= 100 ? (
                                    <div className="triangle-up"></div>
                                ) : (
                                    <div className="triangle-down"></div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
                <div className="rm-summary-item">
                    <img src={amount} />
                    <div>
                        <div className="rm-summary-item--name">年度维保总金额</div>
                        <div className="rm-summary-item--value">
                            <span>{data?.thisYearFee || 0}</span>
                            {' 元'}
                            <div className="rm-summary-item--value-compare">
                                年同比 {data?.thisYearOnLastYearFee || 0}%
                                {data?.thisYearOnLastYearFee >= 100 ? (
                                    <div className="triangle-up"></div>
                                ) : (
                                    <div className="triangle-down"></div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default RmInfoSummary;
