import React, { PureComponent } from 'react';
import { connect } from '@umijs/max';
import { Tabs } from 'antd';

// 导入子组件
import BasicInfoManagement from './components/BasicInfoManagement';
import QualificationManagement from './components/QualificationManagement';
import PersonnelBasicInfo from './components/PersonnelBasicInfo';

import styles from './BasicInformation.less';

@connect(({ staffsheet, loading }) => ({
    staffsheet,
    loading: loading.models.staffsheet,
}))

class BasicInformation extends PureComponent {
    state = {
        activeTab: '1',
    }

    // 渲染Tab内容
    renderTabContent = () => {
        const { activeTab } = this.state;
        const { staffsheet, loading, dispatch } = this.props;

        const childProps = {
            staffsheet,
            loading,
            dispatch
        };

        switch (activeTab) {
            case '1':
                return <BasicInfoManagement {...childProps} />;
            case '2':
                return <QualificationManagement {...childProps} />;
            case '3':
                return <PersonnelBasicInfo {...childProps} />;
            default:
                return <BasicInfoManagement {...childProps} />;
        }
    }

    render() {
        const { activeTab } = this.state;

        const tabItems = [
            {
                key: '1',
                label: '基本信息管理',
            },
            {
                key: '2',
                label: '资质证照管理',
            },
            {
                key: '3',
                label: '人员基础信息',
            }
        ];

        return (
            <div>
                {/* 顶部标签页 */}
                <div style={{ marginBottom: 0, background: '#EEEFF7', padding: '0 24px' }}>
                    <Tabs
                        activeKey={activeTab}
                        onChange={(key) => this.setState({ activeTab: key })}
                        items={tabItems}
                        className="custom-tabs"
                        style={{ marginBottom: 0 }}
                    />
                </div>

                {/* 根据选中的Tab渲染对应的子组件 */}
                {this.renderTabContent()}
            </div>
        );
    }
}

export default BasicInformation;
