import React, { useState } from 'react';
import styles from './fxwt.less';
import RiskIssueBoard from '../components/content_component_fxwt/RiskIssueBoard';
import RiskMap from '../components/content_component_fxwt/RiskMap';
import CurveAnalysis from '../components/content_component_fxwt/CurveAnalysis';

const Fxwt = () => {
    const [activeMenu, setActiveMenu] = useState('riskIssueBoard');

    const menuItems = [
        { key: 'riskIssueBoard', label: '风险问题看板' },
        { key: 'riskMap', label: '风险地图' },
        { key: 'curveAnalysis', label: '曲式分析' }
    ];

    const renderContent = () => {
        switch (activeMenu) {
            case 'riskIssueBoard':
                return <RiskIssueBoard />;
            case 'riskMap':
                return <RiskMap />;
            case 'curveAnalysis':
                return <CurveAnalysis />;
            default:
                return <RiskIssueBoard />;
        }
    };

    return (
        <div className={styles.container}>
            <div className={styles.leftMenu}>
                {menuItems.map(item => (
                    <div
                        key={item.key}
                        className={`${styles.menuItem} ${activeMenu === item.key ? styles.active : ''}`}
                        onClick={() => setActiveMenu(item.key)}
                    >
                        {activeMenu === item.key && <div className={styles.activeIndicator}></div>}
                        <span className={styles.menuText}>{item.label}</span>
                    </div>
                ))}
            </div>

            <div className={styles.rightContent}>
                {renderContent()}
            </div>
        </div>
    );
};

export default Fxwt;

