import React from 'react';
import { Progress, Steps } from 'antd';
import stepsIcon from '@/assets/business_basic/steps_icon.svg';
import styles from './CooperateRecord.less';
const CooperateRecord = ({ data }) => {
    const perfGrade = { level: 'A 级', score: 95 };
    const satisfactionCards = [
        { score: 4.8, label: '产品质量' },
        { score: 4.6, label: '交付及时性' },
        { score: 4.7, label: '客户服务' },
        { score: 4.5, label: '价格合理性' },
    ];
    const history = [
        { date: '2025-07-16', text: '完成500吨92#汽油交付，客户反馈良好' },
        { date: '2025-03-24', text: '参加客户组织的供应商大会，获得“优秀供应商”称号' },
        { date: '2025-02-11', text: '客户满意度调查，综合得分4.7分' },
        { date: '2024-08-29', text: '签订年度框架合作协议，合同金额5000万元' },
    ];

    return (
        <div className={styles.container}>
            <div className={styles.section}>
                <div className={styles.sectionTitle}>合作绩效评级</div>
                <div className={styles.perfWrap}>
                    <div className={styles.perfRow}>
                        <div className={styles.perfLevel}>{perfGrade.level}</div>
                        <div className={styles.perfBarHolder}>
                            <Progress percent={perfGrade.score} showInfo={false} strokeColor={{ from: 'rgba(0, 102, 101, 1)', to: 'rgba(0, 102, 101, 1)' }} />
                        </div>
                        <div className={styles.perfScore}>{perfGrade.score} 分</div>
                    </div>
                </div>
            </div>

            <div className={styles.section}>
                <div className={styles.sectionTitle}>满意度调查结果</div>
                <div className={styles.satisfactionGrid}>
                    {satisfactionCards.map((c, i) => (
                        <div key={i} className={styles.card}>
                            <div className={styles.cardScore}>{c.score}</div>
                            <div className={styles.cardLabel}>{c.label}</div>
                        </div>
                    ))}
                </div>
            </div>
            <div className={styles.section}>
                <div className={styles.sectionTitle}>合作历史记录</div>
                <div className={styles.historyStepsWrap}>
                    <Steps
                        direction="vertical"
                        progressDot={(dot, { status, index }) => (
                            <img src={stepsIcon} alt="step" style={{ width: 15, height: 15 }} />
                        )}
                        items={history.map((s) => ({
                            title: <span className={styles.historyDate}>{s.date}</span>,
                            description: <span className={styles.historyText}>{s.text}</span>,
                        }))}
                    />
                </div>
            </div>
        </div>
    );
};

export default CooperateRecord;


