import React from 'react';
import { Button, Select } from 'antd';
import ReactECharts from 'echarts-for-react';
import styles from './step02.less';

const Step02 = () => {
    // 半圆形仪表盘配置
    const gaugeOption = {
        series: [
            {
                type: 'gauge',  // 仪表
                startAngle: 180,
                endAngle: 0,
                min: 0,
                max: 90,
                splitNumber: 10,
                radius: '80%',
                center: ['50%', '75%'],
                axisLine: {
                    lineStyle: {
                        width: 20,
                        color: [
                            [0.48, 'rgba(0, 229, 255, 1)'], // 已填充部分 - 青色
                            [1, '#c3d6fb)'] // 未填充部分 - 浅蓝紫色
                        ]
                    }
                },
                splitLine: {
                    show: true,
                    length: 10,
                    lineStyle: {
                        color: 'rgba(180, 180, 220, 0.5)',
                        type: 'dashed',
                        width: 1
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: true,
                    length: '65%',
                    width: 2,
                    itemStyle: {
                        color: '#00FFE1'
                    }
                },
                detail: {
                    show: true,
                    offsetCenter: [0, '10%'],
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#000',
                    formatter: function (value) {
                        return value;
                    }
                },
                data: [
                    {
                        value: 48,
                        name: '当前分值',
                        title: {
                            offsetCenter: [0, '25%'],
                            fontSize: 12,
                            color: '#000'
                        }
                    }
                ]
            }
        ]
    };

    return (
        <div className={`${styles.stepContent} ${styles.step02Layout}`}>
            {/* A 区域：评估方法（左侧 60%） */}
            <div className={styles.leftPanel}>
                {/* 第一行：评估方法标题 + 下拉选择框 */}
                <div className={styles.methodHeaderRow}>
                    <span className={styles.methodTitle}>评估方法</span>
                    <Select
                        defaultValue="lec"
                        className={styles.methodSelect}
                        options={[
                            { value: 'lec', label: 'LEC评价法' }
                        ]}
                    />
                </div>

                {/* 第二行：LEC评价法说明块 */}
                <div className={styles.methodDescBlock}>
                    <div className={styles.methodDescTitle}>LEC评价法</div>
                    <div className={styles.methodDescContent}>
                        <div>公式: 风险分值 D = L x E x C</div>
                        <div>描述: 该方法简单易用,通过三个维度的主观判断对风险进行半定量评估。适用于对作业活动、设备设施等进行初步的风险筛查和等级排序。</div>
                    </div>
                </div>

                {/* 参数块区域 */}
                <div className={styles.methodWrapper}>
                    {/* 参数L：事故发生可能性 */}
                    <div className={styles.paramBlock}>
                        <div className={styles.paramHeader}>
                            <span className={styles.paramTitle}>参数L: 事故发生可能性</span>
                        </div>
                        <div className={styles.paramSubtitle}>
                            结合历史数据、设备状况、管理水平,评估事故发生的几率。
                        </div>
                        <div className={styles.optionRow}>
                            <div className={styles.optionCard}>实际不可能<br />0.1分</div>
                            <div className={styles.optionCard}>极不可能<br />0.2分</div>
                            <div className={`${styles.optionCard} ${styles.optionActive}`}>很不可能 可以设想<br />0.5分</div>
                            <div className={styles.optionCard}>可能性小 完全意外<br />1分</div>
                            <div className={styles.optionCard}>可能 但不经常<br />3分</div>
                            <div className={styles.optionCard}>相当可能<br />6分</div>
                            <div className={styles.optionCard}>完全意外 不可预料<br />10分</div>
                        </div>
                        <div className={styles.sliderRow}>
                            <span className={styles.sliderLabel}>参数权重</span>
                            <div className={styles.sliderBar} />
                            <span className={styles.sliderValue}>0.8</span>
                        </div>
                    </div>

                    {/* 参数E：暴露于危险环境的频繁程度 */}
                    <div className={styles.paramBlock}>
                        <div className={styles.paramHeader}>
                            <span className={styles.paramTitle}>参数E: 暴露于危险环境的频繁程度</span>
                        </div>
                        <div className={styles.paramSubtitle}>
                            人员出现在此危险环境下的时间频率。
                        </div>
                        <div className={styles.optionRow}>
                            <div className={`${styles.optionCard} ${styles.optionActive}`}>非常罕见 地暴露<br />0.5分</div>
                            <div className={styles.optionCard}>可能 但不经常<br />1分</div>
                            <div className={styles.optionCard}>每月一次 暴露<br />2分</div>
                            <div className={styles.optionCard}>每周一次 或偶然暴露<br />3分</div>
                            <div className={styles.optionCard}>每天工作 时间内暴露<br />6分</div>
                            <div className={styles.optionCard}>连续暴露<br />10分</div>
                        </div>
                        <div className={styles.sliderRow}>
                            <span className={styles.sliderLabel}>参数权重</span>
                            <div className={styles.sliderBar} />
                            <span className={styles.sliderValue}>0.8</span>
                        </div>
                    </div>

                    {/* 参数C：发生事故可能造成的后果 */}
                    <div className={styles.paramBlock}>
                        <div className={styles.paramHeader}>
                            <span className={styles.paramTitle}>参数C: 发生事故可能造成的后果</span>
                        </div>
                        <div className={styles.paramSubtitle}>
                            评估最可能发生的事故及其后果的严重性。
                        </div>
                        <div className={styles.optionRow}>
                            <div className={styles.optionCard}>引人注目 需要救护</div>
                            <div className={styles.optionCard}>重大/致残/<br />较小的环境影响</div>
                            <div className={styles.optionCard}>需上报的环境<br />污染事件</div>
                            <div className={styles.optionCard}>一人死亡/造成<br />局部环境污染</div>
                            <div className={styles.optionCard}>数人死亡/<br />严重环境污染</div>
                            <div className={styles.optionCard}>多人死亡/<br />重大环境污染</div>
                        </div>
                    </div>
                </div>
            </div>

            {/* B 区域：右侧仪表盘 + 按钮 + 风险等级表 */}
            <div className={styles.rightPanel}>
                {/* 上块：仪表盘和公式说明 */}
                <div className={styles.rightTop}>
                    {/* 第一行：评估对象和LEC评价法标签 */}
                    <div className={styles.topHeader}>
                        <span className={styles.evaluationObject}>评估对象: 第五车间</span>
                        <span className={styles.lecLabel}>LEC评价法</span>
                    </div>

                    {/* 第二行：半圆形仪表盘 */}
                    <div className={styles.gaugeContainer}>
                        <ReactECharts
                            option={gaugeOption}
                            style={{ width: '100%', height: '200px' }}
                        />
                    </div>

                    {/* 第三行：公式 */}
                    <div className={styles.formulaText}>
                        D = L (xx*xx) x E (xx*xx) x C (xx*xx) = 48
                    </div>

                    {/* 第四行：建议措施 */}
                    <div className={styles.suggestionPanel}>
                        <div className={styles.suggestionTitle}>建议措施：</div>
                        <div className={styles.suggestionContent}>1、需要注意。</div>
                    </div>
                </div>

                {/* 中块：下一步按钮 */}
                <div className={styles.rightMiddle}>
                    <Button type="primary" className={styles.nextBtn}>
                        下一步
                    </Button>
                </div>

                {/* 下块：风险等级判定标准 */}
                <div className={styles.rightBottom}>
                    <div className={styles.riskHeader}>风险等级判定标准</div>
                    <table className={styles.riskTable}>
                        <thead>
                            <tr className={styles.riskRowHeader}>
                                <th>风险分值</th>
                                <th>风险等级</th>
                                <th>表征颜色</th>
                                <th>应采取行动</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr className={styles.riskRow}>
                                <td>{'> 320'}</td>
                                <td>极其危险, 重大风险</td>
                                <td>
                                    <span className={`${styles.colorDot} ${styles.colorRed}`} />
                                    <span className={styles.colorName}>红色</span>
                                </td>
                                <td>立即停止作业, 整改</td>
                            </tr>
                            <tr className={styles.riskRow}>
                                <td>160 ~ 320</td>
                                <td>高度危险, 较大风险</td>
                                <td>
                                    <span className={`${styles.colorDot} ${styles.colorOrange}`} />
                                    <span className={styles.colorName}>橙色</span>
                                </td>
                                <td>需要立即采取措施整改</td>
                            </tr>
                            <tr className={styles.riskRow}>
                                <td>70 ~ 159</td>
                                <td>显著危险, 一般风险</td>
                                <td>
                                    <span className={`${styles.colorDot} ${styles.colorYellow}`} />
                                    <span className={styles.colorName}>黄色</span>
                                </td>
                                <td>需要关注和整改</td>
                            </tr>
                            <tr className={styles.riskRow}>
                                <td>20 ~ 69</td>
                                <td>一般危险, 低风险</td>
                                <td>
                                    <span className={`${styles.colorDot} ${styles.colorBlue}`} />
                                    <span className={styles.colorName}>蓝色</span>
                                </td>
                                <td>需要注意</td>
                            </tr>
                            <tr className={styles.riskRow}>
                                <td>{'< 20'}</td>
                                <td>稍有危险, 低风险</td>
                                <td>
                                    <span className={`${styles.colorDot} ${styles.colorGreen}`} />
                                    <span className={styles.colorName}>绿色</span>
                                </td>
                                <td>可以接受</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
};

export default Step02;

