
import React, { PureComponent } from 'react';
import { Card, Avatar, Breadcrumb, Tag, Descriptions, Table, Row, Col, Button, Divider } from 'antd';
import { UserOutlined, HomeOutlined, TeamOutlined, MailOutlined, PhoneOutlined, IdcardOutlined, ApartmentOutlined, HistoryOutlined, BookOutlined, ArrowLeftOutlined, EditOutlined, PrinterOutlined } from '@ant-design/icons';
import { history } from 'umi';
import styles from './Particulars.less';
import girlAvatar from './girl.png';

const careerTableData = [
    {
        key: '1',
        company: '上海科技有限公司',
        position: '高级产品经理',
        duration: '2018-06-15 至今 · 5年4个月',
        description: '主导公司核心产品线的规划与设计，带领5人产品团队，成功推出3款市场领先产品，用户增长300%',
        status: 'current',
    },
    {
        key: '2',
        company: '北京云创科技',
        position: '产品经理',
        duration: '2015-07-01 至 2018-05-30 · 2年11个月',
        description: '负责企业级SaaS产品的设计与迭代，成功将产品NPS从35提升至72，客户续费率提升至85%',
        status: '',
    },
    {
        key: '3',
        company: '深圳创新科技',
        position: '产品助理',
        duration: '2013-09-01 至 2015-06-30 · 1年10个月',
        description: '协助产品经理完成需求分析、原型设计，参与3个移动端项目从0到1的全过程',
        status: '',
    },
];

const educationTableData = [
    {
        key: '1',
        school: '复旦大学',
        degree: '硕士',
        major: '计算机科学与技术',
        duration: '2011-09 ~ 2013-07',
    },
    {
        key: '2',
        school: '华东理工大学',
        degree: '本科',
        major: '软件工程',
        duration: '2007-09 ~ 2011-07',
    },
];

class Particulars extends PureComponent {
    handleGoBack = () => {
        // 跳转到人员管理页面
        history.push('/topnavbar00/staffmanage');
    };

    render() {
        return (
            <div className={styles.particularsContainer}>

                {/* 面包屑导航 */}
                <Breadcrumb 
                    className={styles.breadcrumb}
                    items={[
                        {
                            title: '人员管理',
                        },
                        {
                            title: '人员详情',
                        }
                    ]}
                />

                {/* 返回按钮 */}
                <Button type="link" icon={<ArrowLeftOutlined />} onClick={this.handleGoBack} className={styles.backBtn}>
                    返回
                </Button>

                {/* 个人信息卡片 */}
                <Card className={styles.profileCard}>
                    <Row gutter={24} align="middle">
                        <Col xs={24} sm={4} className={styles.avatarCol}>
                            <Avatar size={80} src={girlAvatar} />
                        </Col>
                        <Col xs={24} sm={14}>
                            <div className={styles.profileInfoHeader}>
                                <div className={styles.nameSection}>
                                    <span className={styles.profileName}>林晓梅</span>
                                    <Tag color="blue">高级产品经理</Tag>
                                    <span className={styles.profileDept}>产品研发中心</span>
                                </div>
                                <div className={styles.profileDetails}>
                                    <Row gutter={[24, 8]}>
                                        <Col span={12}>
                                            <div className={styles.detailItem}>
                                                <span className={styles.detailLabel}>员工编号</span>
                                                <span className={styles.detailValue}>EMP20230085</span>
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div className={styles.detailItem}>
                                                <span className={styles.detailLabel}>入职日期</span>
                                                <span className={styles.detailValue}>2018-06-15</span>
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div className={styles.detailItem}>
                                                <span className={styles.detailLabel}>工作年限</span>
                                                <span className={styles.detailValue}>5年4个月</span>
                                            </div>
                                        </Col>
                                        <Col span={12}>
                                            <div className={styles.detailItem}>
                                                <span className={styles.detailLabel}>员工状态</span>
                                                <Tag color="green" className={styles.statusTag}>在职</Tag>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                        </Col>
                        <Col xs={24} sm={6} className={styles.actionCol}>
                            <div className={styles.actionButtons}>
                                <Button type="primary" icon={<EditOutlined />} className={styles.editBtn}>
                                    编辑
                                </Button>
                                <Button icon={<PrinterOutlined />} className={styles.printBtn}>
                                    打印
                                </Button>
                            </div>
                        </Col>
                    </Row>
                </Card>

                {/* 个人信息区 */}
                <Card className={styles.infoCard} title={<><UserOutlined /> 个人信息</>}>
                    <Descriptions column={2}>
                        <Descriptions.Item label="身份证号">310******19900823****</Descriptions.Item>
                        <Descriptions.Item label="婚姻状况">已婚</Descriptions.Item>
                        <Descriptions.Item label="联系电话">138****5678</Descriptions.Item>
                        <Descriptions.Item label="电子邮箱">linxiaomei@company.com</Descriptions.Item>
                        <Descriptions.Item label="现居住地" span={2}>上海市浦东新区张江高科技园区科苑路88号</Descriptions.Item>
                    </Descriptions>
                </Card>

                {/* 工作信息区 */}
                <Card className={styles.infoCard} title={<><TeamOutlined /> 工作信息</>}>
                    <Descriptions column={2}>
                        <Descriptions.Item label="所属部门">产品研发中心 - 产品设计部</Descriptions.Item>
                        <Descriptions.Item label="直接上级">张伟（产品研发中心总监）</Descriptions.Item>
                        <Descriptions.Item label="工作职责" span={2}>负责公司核心产品线的规划与设计，主导产品全生命周期管理，协调跨部门资源推动产品落地</Descriptions.Item>
                    </Descriptions>
                </Card>

                {/* 职业履历表格 */}
                <Card className={styles.infoCard} title={<><HistoryOutlined /> 职业履历</>}>
                    <div className={styles.tableWrapper}>
                        <Table
                            columns={[
                                { title: '公司', dataIndex: 'company', key: 'company', width: '25%' },
                                { title: '职位', dataIndex: 'position', key: 'position', width: '20%' },
                                { title: '时间', dataIndex: 'duration', key: 'duration', width: '25%' },
                                { title: '描述', dataIndex: 'description', key: 'description', width: '30%' },
                            ]}
                            dataSource={careerTableData}
                            pagination={false}
                            size="small"
                            className={styles.customTable}
                        />
                    </div>
                </Card>

                {/* 职业履历时间轴（自定义实现） */}
                {/* <Card className={styles.infoCard} title={<><HistoryOutlined /> 职业履历时间轴</>}>
                    <div className={styles.careerTimeline}>
                        {careerTableData.map((item, idx) => (
                            <div key={item.key} className={styles.timelineItem}>
                                <div className={styles.timelineDot + (item.status === 'current' ? ' ' + styles.timelineDotActive : '')}></div>
                                <div className={styles.timelineContent}>
                                    <div className={styles.timelineHeader}>
                                        <span className={styles.timelineCompany}>{item.company}</span>
                                        {item.status === 'current' && <Tag color="blue">当前公司</Tag>}
                                    </div>
                                    <div className={styles.timelinePosition}>{item.position}</div>
                                    <div className={styles.timelineDuration}>{item.duration}</div>
                                    <div className={styles.timelineDescription}>{item.description}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </Card> */}

                {/* 教育经历表格 */}
                <Card className={styles.infoCard} title={<><BookOutlined /> 教育经历</>}>
                    <div className={styles.tableWrapper}>
                        <Table
                            columns={[
                                { title: '学校', dataIndex: 'school', key: 'school', width: '30%' },
                                { title: '学历', dataIndex: 'degree', key: 'degree', width: '20%' },
                                { title: '专业', dataIndex: 'major', key: 'major', width: '30%' },
                                { title: '时间', dataIndex: 'duration', key: 'duration', width: '20%' },
                            ]}
                            dataSource={educationTableData}
                            pagination={false}
                            size="small"
                            className={styles.customTable}
                        />
                    </div>
                </Card>

                {/* 组织架构图 */}
                {/* <Card className={styles.infoCard} title={<><ApartmentOutlined /> 组织架构</>}>
                    <div className={styles.orgChartWrapper}>
                        <img src="https://ai-public.mastergo.com/gen_page/map_placeholder_1280x720.png" alt="组织架构图" className={styles.orgChartImg} />
                    </div>
                </Card> */}

                {/* 页脚 */}
                <Divider />
                <div className={styles.footer}>
                    <div className={styles.footerLinks}>
                        <a href="#">公司简介</a>
                        <a href="#">发展历程</a>
                        <a href="#">企业文化</a>
                        <a href="#">管理团队</a>
                        <a href="#">加入我们</a>
                        <a href="#">隐私政策</a>
                        <a href="#">服务条款</a>
                        <a href="#">法律声明</a>
                        <a href="#">沪ICP备12345678号-1</a>
                    </div>
                    <div className={styles.footerCopyright}>© 2023 人力资源管理系统 版权所有</div>
                </div>
            </div>
        );
    }
}

export default Particulars;
