import React, { useState } from 'react';
import { Button } from 'antd';
import styles from './fxpggzt.less';
import Step01 from './Step01';
import Step02 from './Step02';
import Step03 from './Step03';

const Fxpggzt = () => {
    const [activeStep, setActiveStep] = useState('step01');

    const renderContent = () => {
        switch (activeStep) {
            case 'step01':
                return <Step01 />;
            case 'step02':
                return <Step02 />;
            case 'step03':
                return <Step03 />;
            default:
                return <Step01 />;
        }
    };

    return (
        <div className={styles.container}>
            <div className={styles.stepButtons}>
                <Button
                    className={`${styles.stepButton} ${activeStep === 'step01' ? styles.activeStepButton : ''}`}
                    onClick={() => setActiveStep('step01')}
                >
                    <span className={styles.stepLabel}>01 选择评估对象</span>
                </Button>
                <div className={styles.connector}>
                    <div className={styles.connectorLine}></div>
                    <div className={styles.connectorNode}></div>
                </div>
                <Button
                    className={`${styles.stepButton} ${activeStep === 'step02' ? styles.activeStepButton : ''}`}
                    onClick={() => setActiveStep('step02')}
                >
                    <span className={styles.stepLabel}>02 选择方法与配置</span>
                </Button>
                <div className={styles.connector}>
                    <div className={styles.connectorLine}></div>
                    <div className={styles.connectorNode}></div>
                </div>
                <Button
                    className={`${styles.stepButton} ${activeStep === 'step03' ? styles.activeStepButton : ''}`}
                    onClick={() => setActiveStep('step03')}
                >
                    <span className={styles.stepLabel}>03 确认与生成报告</span>
                </Button>
            </div>

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

export default Fxpggzt;

