import React from 'react';
import styles from './RiskIssueBoard.less';

const riskLevels = [
    {
        key: 'red',
        title: '红色重大风险',
        count: 6,
        due: '3天到期',
        items: [
            {
                code: 'Risk-2024-001',
                status: '整改中',
                desc: '危险仓库地面的渗透威胁约1.5m²',
                owner: '环保仓储部 - 张伟',
                deadline: '2024-06-10',
                plan: '危险泄漏应急预案'
            },
            {
                code: 'Risk-2024-002',
                status: '待整改',
                desc: '危险仓库地面的渗透威胁约1.5m²',
                owner: '环保仓储部 - 张伟',
                deadline: '2024-06-10',
                plan: '危险泄漏应急预案'
            }
        ]
    },
    {
        key: 'orange',
        title: '橙色较大风险',
        count: 6,
        due: '3天到期',
        items: [
            {
                code: 'Risk-2024-003',
                status: '整改中',
                desc: '危险仓库地面的渗透威胁约1.5m²',
                owner: '环保仓储部 - 张伟',
                deadline: '2024-06-10',
                plan: '危险泄漏应急预案'
            },
            {
                code: 'Risk-2024-004',
                status: '待整改',
                desc: '危险仓库地面的渗透威胁约1.5m²',
                owner: '环保仓储部 - 张伟',
                deadline: '2024-06-10',
                plan: '危险泄漏应急预案'
            }
        ]
    },
    {
        key: 'yellow',
        title: '黄色一般风险',
        count: 12,
        due: '3天到期',
        items: [
            {
                code: 'Risk-2024-005',
                status: '已整改',
                desc: '危险仓库地面的渗透威胁约1.5m²',
                owner: '环保仓储部 - 张伟',
                deadline: '2024-06-10',
                plan: '危险泄漏应急预案'
            },
            {
                code: 'Risk-2024-006',
                status: '待整改',
                desc: '危险仓库地面的渗透威胁约1.5m²',
                owner: '环保仓储部 - 张伟',
                deadline: '2024-06-10',
                plan: '危险泄漏应急预案'
            }
        ]
    },
    {
        key: 'blue',
        title: '蓝色低风险',
        count: 5,
        due: '3天到期',
        items: [
            {
                code: 'Risk-2024-007',
                status: '已整改',
                desc: '危险仓库地面的渗透威胁约1.5m²',
                owner: '环保仓储部 - 张伟',
                deadline: '2024-06-10',
                plan: '危险泄漏应急预案'
            },
            {
                code: 'Risk-2024-008',
                status: '待整改',
                desc: '危险仓库地面的渗透威胁约1.5m²',
                owner: '环保仓储部 - 张伟',
                deadline: '2024-06-10',
                plan: '危险泄漏应急预案'
            }
        ]
    }
];

const statusClassMap = {
    '整改中': styles.statusProcessing,
    '待整改': styles.statusTodo,
    '已整改': styles.statusDone
};

const RiskIssueBoard = () => {
    return (
        <div className={styles.container}>
            <div className={styles.toolbar}>
                <button className={styles.primaryBtn}>
                    <span className={styles.plus}>+</span>
                    新建风险问题
                </button>

                <div className={styles.filters}>
                    <div className={styles.filterGroup}>
                        <span className={styles.label}>风险等级</span>
                        <label className={`${styles.check} ${styles.red}`}><input type="checkbox" defaultChecked /> 红色</label>
                        <label className={`${styles.check} ${styles.orange}`}><input type="checkbox" defaultChecked /> 橙色</label>
                        <label className={`${styles.check} ${styles.yellow}`}><input type="checkbox" defaultChecked /> 黄色</label>
                        <label className={`${styles.check} ${styles.blue}`}><input type="checkbox" defaultChecked /> 蓝色</label>
                    </div>

                    <div className={styles.filterGroup}>
                        <span className={styles.label}>状态</span>
                        <select className={styles.select}>
                            <option>全部</option>
                            <option>整改中</option>
                            <option>待整改</option>
                            <option>已整改</option>
                        </select>
                    </div>

                    <div className={styles.filterGroup}>
                        <span className={styles.label}>责任部门</span>
                        <select className={styles.select}>
                            <option>所有部门</option>
                            <option>环保仓储部</option>
                            <option>安环部</option>
                        </select>
                    </div>

                    <button className={styles.confirmBtn}>确定</button>
                </div>
            </div>

            <div className={styles.boardGrid}>
                {riskLevels.map(level => (
                    <div key={level.key} className={`${styles.boardCard} ${styles[level.key]}`}>
                        <div className={styles.boardHeader}>
                            <div>
                                <div className={styles.boardTitle}>{level.title} ({level.count})</div>
                            </div>
                            <div className={styles.badge}>{level.due}</div>
                        </div>

                        <div className={styles.riskList}>
                            {level.items.map((item, index) => (
                                <div key={item.code + index} className={styles.riskItem}>
                                    <div className={styles.riskItemHeader}>
                                        <span className={styles.riskCode}>{item.code}</span>
                                        <span className={`${styles.statusTag} ${statusClassMap[item.status] || ''}`}>{item.status}</span>
                                    </div>
                                    <div className={styles.riskDesc}>{item.desc}</div>
                                    <div className={styles.riskMeta}>
                                        <span>责任人：{item.owner}</span>
                                        <span>期限：{item.deadline}</span>
                                        <span>预案：{item.plan}</span>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default RiskIssueBoard;
