import React from 'react';
import {Button} from 'antd';
import styles from './step03.less';

const Step03 = () => {
    const now = '2025-12-15 14:50:54'; // 可后续替换为真实时间

    return (
        <div className={styles.stepContent}>
            {/* 头部：标题 + 生成时间 */}
            <div className={styles.header}>
                <div className={styles.headerTitle}>风险评估报告</div>
                <div className={styles.headerTime}>
                    生成时间：
                    {now}
                </div>
            </div>

            {/* 报告主体 */}
            <div className={styles.reportCard}>
                {/* 第1行：对象名称 | 所属区域 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>对象名称</div>
                        <div className={styles.cellValue}>一车间-危险品暂存区</div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}>所属区域</div>
                        <div className={styles.cellValue}>生产A区</div>
                    </div>
                </div>

                {/* 第2行：对象类型 | 责任人 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>对象类型</div>
                        <div className={styles.cellValue}>存储设施</div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}>责任人</div>
                        <div className={styles.cellValue}>王芳</div>
                    </div>
                </div>

                {/* 第3行：评估方法 | 空白 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>评估方法</div>
                        <div className={styles.cellValue}>LEC评价法</div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}></div>
                        <div className={styles.cellValue}></div>
                    </div>
                </div>

                {/* 第4行：风险分值计算 | 空白 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>风险分值计算</div>
                        <div className={styles.cellValue}>D = L × E × C = 3 × 6 × 40 = 720</div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}></div>
                        <div className={styles.cellValue}></div>
                    </div>
                </div>

                {/* 第5行：L（事故可能性） | 空白 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>L（事故可能性）</div>
                        <div className={styles.cellValue}>可能，但不经常</div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}></div>
                        <div className={styles.cellValue}></div>
                    </div>
                </div>

                {/* 第6行：E（暴露频繁程度） | L分值 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>E（暴露频繁程度）</div>
                        <div className={styles.cellValue}>每天工作时间内暴露</div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}>L分值</div>
                        <div className={styles.cellValue}>3分</div>
                    </div>
                </div>

                {/* 第7行：C（后果严重性） | E分值 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>C（后果严重性）</div>
                        <div className={styles.cellValue}>可能，但不经常</div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}>E分值</div>
                        <div className={styles.cellValue}>6分</div>
                    </div>
                </div>

                {/* 第8行：最终风险等级 | C分值 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>最终风险等级</div>
                        <div className={styles.cellValue}>重大风险</div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}>C分值</div>
                        <div className={styles.cellValue}>40分</div>
                    </div>
                </div>

                {/* 第9行：风险等级说明 | 空白 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>风险等级说明</div>
                        <div className={styles.cellValue}>根据LEC判定标准，分值&gt;320即为"重大风险"。</div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}></div>
                        <div className={styles.cellValue}></div>
                    </div>
                </div>

                {/* 第10行：建议措施 | 空白 */}
                <div className={styles.reportRow}>
                    <div className={styles.leftCell}>
                        <div className={styles.cellLabel}>建议措施</div>
                        <div className={styles.cellValue}>
                            <div>立即停止作业，限期整改</div>
                            <div>纳入重大风险源清单，进行重点监控</div>
                            <div>立即启动相关应急预案的评审与演练</div>
                        </div>
                    </div>
                    <div className={styles.rightCell}>
                        <div className={styles.cellLabel}></div>
                        <div className={styles.cellValue}></div>
                    </div>
                </div>

                {/* 底部按钮 */}
                <div className={styles.footerBtns}>
                    <Button>上一步</Button>
                    <Button type="primary" className={styles.generateBtn}>
                        生成评估报告
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default Step03;

