
import React, { PureComponent } from 'react';
import { Card, Avatar, Breadcrumb, Tag, Descriptions, Table, Row, Col, Button, Divider, Progress, Statistic } from 'antd';
import { UserOutlined, DollarCircleOutlined, FileTextOutlined, CalendarOutlined, BarChartOutlined, ArrowLeftOutlined, EditOutlined, PrinterOutlined, FileExcelOutlined, RiseOutlined, FallOutlined } from '@ant-design/icons';
import { history } from 'umi';
import styles from './SalaryDetail.less';
import girlAvatar from './girl.png';

// 薪资明细表数据
const salaryDetailData = [
    { key: '1', item: '基本工资', standard: '¥10,000', should: '¥10,000', deduct: '-', actual: '¥10,000', remark: '-' },
    { key: '2', item: '绩效工资', standard: '¥6,000', should: '¥5,500', deduct: '¥500', actual: '¥5,500', remark: 'KPI未达标' },
    { key: '3', item: '岗位津贴', standard: '¥1,200', should: '¥1,200', deduct: '-', actual: '¥1,200', remark: '主管级津贴' },
    { key: '4', item: '餐补', standard: '¥600', should: '¥600', deduct: '-', actual: '¥600', remark: '22个工作日' },
    { key: '5', item: '交通补贴', standard: '¥800', should: '¥800', deduct: '-', actual: '¥800', remark: '-' },
    { key: '6', item: '通讯补贴', standard: '¥300', should: '¥300', deduct: '-', actual: '¥300', remark: '-' },
    { key: '7', item: '加班费', standard: '-', should: '¥1,100', deduct: '-', actual: '¥1,100', remark: '国庆加班3天' },
    { key: '8', item: '小计', standard: '-', should: '¥19,500', deduct: '¥500', actual: '¥19,000', remark: '-', isSubtotal: true },
    { key: '9', item: '养老保险', standard: '8%', should: '-', deduct: '¥800', actual: '-¥800', remark: '个人缴纳' },
    { key: '10', item: '医疗保险', standard: '2%', should: '-', deduct: '¥200', actual: '-¥200', remark: '个人缴纳' },
    { key: '11', item: '失业保险', standard: '0.5%', should: '-', deduct: '¥50', actual: '-¥50', remark: '个人缴纳' },
    { key: '12', item: '住房公积金', standard: '12%', should: '-', deduct: '¥1,200', actual: '-¥1,200', remark: '个人缴纳' },
    { key: '13', item: '个人所得税', standard: '-', should: '-', deduct: '¥1,430', actual: '-¥1,430', remark: '累计预扣法' },
    { key: '14', item: '合计扣减', standard: '-', should: '-', deduct: '¥3,680', actual: '-¥3,680', remark: '-', isSubtotal: true },
    { key: '15', item: '实发工资', standard: '-', should: '-', deduct: '-', actual: '¥15,320', remark: '-', isTotal: true },
];

// 考勤数据
const attendanceData = [
    { type: '出勤', count: 21, color: '#52c41a' },
    { type: '迟到/早退', count: 1, color: '#faad14' },
    { type: '缺勤', count: 0.5, color: '#ff4d4f' },
    { type: '加班', count: 3, color: '#1890ff' },
];
class SalaryDetail extends PureComponent {
    handleGoBack = () => {
        // 跳转到薪酬管理页面
        history.push('/topnavbar00/salarymanage/salarydata');
    };

    render() {
        return (
            <div 
                className="salary-detail-main-container"
                style={{ 
                    background: '#f5f5f5', 
                    padding: '24px' 
                }}
            >
                <Card 
                    className="salary-detail-card"
                    style={{ 
                        borderRadius: '8px',
                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                    }}
                >
                    {/* 面包屑导航 */}
                    <Breadcrumb 
                        style={{ marginBottom: '16px' }}
                        items={[
                            { title: '薪酬管理' },
                            { title: '薪酬详情' }
                        ]}
                    />

                    {/* 返回按钮 */}
                    <Button 
                        type="link" 
                        icon={<ArrowLeftOutlined />} 
                        onClick={this.handleGoBack}
                        style={{ marginBottom: '24px', padding: 0 }}
                    >
                        返回
                    </Button>

                    {/* 个人信息卡片 */}
                    <Card className={styles.profileCard} style={{ marginBottom: '24px' }}>
                        <Row gutter={24} align="middle">
                            <Col xs={24} sm={4}>
                                <Avatar size={80} src={girlAvatar} />
                            </Col>
                            <Col xs={24} sm={14}>
                                <div>
                                    <div style={{ marginBottom: '16px' }}>
                                        <span style={{ fontSize: '24px', fontWeight: 'bold', marginRight: '12px' }}>林雅婷</span>
                                        <span style={{ fontSize: '14px', color: '#666' }}>员工ID: HR20230085</span>
                                    </div>
                                    <Row gutter={[24, 8]}>
                                        <Col span={6}>
                                            <div>
                                                <div style={{ color: '#999', fontSize: '12px' }}>年龄</div>
                                                <div style={{ fontWeight: 500 }}>28岁</div>
                                            </div>
                                        </Col>
                                        <Col span={6}>
                                            <div>
                                                <div style={{ color: '#999', fontSize: '12px' }}>性别</div>
                                                <div style={{ fontWeight: 500 }}>女</div>
                                            </div>
                                        </Col>
                                        <Col span={6}>
                                            <div>
                                                <div style={{ color: '#999', fontSize: '12px' }}>部门</div>
                                                <div style={{ fontWeight: 500 }}>市场部</div>
                                            </div>
                                        </Col>
                                        <Col span={6}>
                                            <div>
                                                <div style={{ color: '#999', fontSize: '12px' }}>岗位</div>
                                                <div style={{ fontWeight: 500 }}>市场策划主管</div>
                                            </div>
                                        </Col>
                                    </Row>
                                    <Divider style={{ margin: '16px 0' }} />
                                    <Row gutter={[24, 8]}>
                                        <Col span={6}>
                                            <div>
                                                <div style={{ color: '#999', fontSize: '12px' }}>入职日期</div>
                                                <div style={{ fontWeight: 500 }}>2020-05-15</div>
                                            </div>
                                        </Col>
                                        <Col span={6}>
                                            <div>
                                                <div style={{ color: '#999', fontSize: '12px' }}>工龄</div>
                                                <div style={{ fontWeight: 500 }}>3年6个月</div>
                                            </div>
                                        </Col>
                                        <Col span={6}>
                                            <div>
                                                <div style={{ color: '#999', fontSize: '12px' }}>职级</div>
                                                <div style={{ fontWeight: 500 }}>P2-3</div>
                                            </div>
                                        </Col>
                                        <Col span={6}>
                                            <div>
                                                <div style={{ color: '#999', fontSize: '12px' }}>直属上级</div>
                                                <div style={{ fontWeight: 500 }}>张伟 (市场部经理)</div>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                            </Col>
                            <Col xs={24} sm={6}>
                                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                                    <Button type="primary" icon={<EditOutlined />}>
                                        编辑信息
                                    </Button>
                                    <Button icon={<FileExcelOutlined />}>
                                        导出资料
                                    </Button>
                                    <Button icon={<PrinterOutlined />}>
                                        打印档案
                                    </Button>
                                </div>
                            </Col>
                        </Row>
                    </Card>

                    {/* 薪资概览 */}
                    <Row gutter={24} style={{ marginBottom: '24px' }}>
                        <Col xs={24} md={8}>
                            <Card>
                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                                    <h3 style={{ margin: 0, fontSize: '16px', fontWeight: 600, color: '#333' }}>税前工资</h3>
                                    <Tag color="green" style={{ fontSize: '12px' }}>+5% 上月</Tag>
                                </div>
                                <div style={{ display: 'flex', alignItems: 'end', marginBottom: '16px' }}>
                                    <span style={{ fontSize: '32px', fontWeight: 'bold', color: '#1890ff' }}>¥18,500</span>
                                    <span style={{ color: '#999', marginLeft: '8px', marginBottom: '4px' }}>/月</span>
                                </div>
                                <div style={{ fontSize: '12px', color: '#666' }}>
                                    <div style={{ marginBottom: '4px' }}>年度累计: ¥203,500</div>
                                    <div>上月工资: ¥17,600</div>
                                </div>
                            </Card>
                        </Col>
                        <Col xs={24} md={8}>
                            <Card>
                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                                    <h3 style={{ margin: 0, fontSize: '16px', fontWeight: 600, color: '#333' }}>税后工资</h3>
                                    <Tag color="green" style={{ fontSize: '12px' }}>+4.8% 上月</Tag>
                                </div>
                                <div style={{ display: 'flex', alignItems: 'end', marginBottom: '16px' }}>
                                    <span style={{ fontSize: '32px', fontWeight: 'bold', color: '#1890ff' }}>¥15,320</span>
                                    <span style={{ color: '#999', marginLeft: '8px', marginBottom: '4px' }}>/月</span>
                                </div>
                                <div style={{ fontSize: '12px', color: '#666' }}>
                                    <div style={{ marginBottom: '4px' }}>年度累计: ¥168,520</div>
                                    <div>上月工资: ¥14,620</div>
                                </div>
                            </Card>
                        </Col>
                        <Col xs={24} md={8}>
                            <Card>
                                <h3 style={{ margin: 0, fontSize: '16px', fontWeight: 600, color: '#333', marginBottom: '16px' }}>薪资构成</h3>
                                <div style={{ marginBottom: '12px' }}>
                                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', marginBottom: '4px' }}>
                                        <span style={{ color: '#666' }}>基本工资</span>
                                        <span style={{ fontWeight: 500 }}>¥10,000</span>
                                    </div>
                                    <Progress percent={54} strokeColor="#1890ff" showInfo={false} size="small" />
                                </div>
                                <div style={{ marginBottom: '12px' }}>
                                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', marginBottom: '4px' }}>
                                        <span style={{ color: '#666' }}>绩效工资</span>
                                        <span style={{ fontWeight: 500 }}>¥5,500</span>
                                    </div>
                                    <Progress percent={30} strokeColor="#52c41a" showInfo={false} size="small" />
                                </div>
                                <div>
                                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', marginBottom: '4px' }}>
                                        <span style={{ color: '#666' }}>各类补贴</span>
                                        <span style={{ fontWeight: 500 }}>¥3,000</span>
                                    </div>
                                    <Progress percent={16} strokeColor="#faad14" showInfo={false} size="small" />
                                </div>
                            </Card>
                        </Col>
                    </Row>

                    {/* 工资明细表 */}
                    <Card style={{ marginBottom: '24px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                            <h3 style={{ margin: 0, fontSize: '16px', fontWeight: 600, color: '#333' }}>2023年10月工资明细</h3>
                        </div>
                        <Table
                            columns={[
                                { 
                                    title: '项目', 
                                    dataIndex: 'item', 
                                    key: 'item', 
                                    render: (text, record) => (
                                        <span style={{ 
                                            fontWeight: record.isSubtotal || record.isTotal ? 'bold' : 'normal',
                                            color: record.isTotal ? '#fff' : '#333'
                                        }}>
                                            {text}
                                        </span>
                                    )
                                },
                                { 
                                    title: '标准', 
                                    dataIndex: 'standard', 
                                    key: 'standard',
                                    render: (text, record) => (
                                        <span style={{ 
                                            fontWeight: record.isSubtotal || record.isTotal ? 'bold' : 'normal',
                                            color: record.isTotal ? '#fff' : '#666'
                                        }}>
                                            {text}
                                        </span>
                                    )
                                },
                                { 
                                    title: '应发', 
                                    dataIndex: 'should', 
                                    key: 'should',
                                    render: (text, record) => (
                                        <span style={{ 
                                            fontWeight: record.isSubtotal || record.isTotal ? 'bold' : 'normal',
                                            color: record.isTotal ? '#fff' : '#666'
                                        }}>
                                            {text}
                                        </span>
                                    )
                                },
                                { 
                                    title: '扣减', 
                                    dataIndex: 'deduct', 
                                    key: 'deduct',
                                    render: (text, record) => (
                                        <span style={{ 
                                            fontWeight: record.isSubtotal || record.isTotal ? 'bold' : 'normal',
                                            color: record.isTotal ? '#fff' : '#666'
                                        }}>
                                            {text}
                                        </span>
                                    )
                                },
                                { 
                                    title: '实发', 
                                    dataIndex: 'actual', 
                                    key: 'actual',
                                    render: (text, record) => (
                                        <span style={{ 
                                            fontWeight: record.isSubtotal || record.isTotal ? 'bold' : 'normal',
                                            color: record.isTotal ? '#fff' : '#333'
                                        }}>
                                            {text}
                                        </span>
                                    )
                                },
                                { 
                                    title: '备注', 
                                    dataIndex: 'remark', 
                                    key: 'remark',
                                    render: (text, record) => (
                                        <span style={{ 
                                            fontWeight: record.isSubtotal || record.isTotal ? 'bold' : 'normal',
                                            color: record.isTotal ? '#fff' : '#666'
                                        }}>
                                            {text}
                                        </span>
                                    )
                                },
                            ]}
                            dataSource={salaryDetailData}
                            pagination={false}
                            size="small"
                            rowClassName={(record) => {
                                if (record.isTotal) return 'salary-total-row';
                                if (record.isSubtotal) return 'salary-subtotal-row';
                                return 'salary-normal-row';
                            }}
                        />
                    </Card>

                    {/* 考勤记录 */}
                    <Card>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                            <h3 style={{ margin: 0, fontSize: '16px', fontWeight: 600, color: '#333' }}>2023年10月考勤记录</h3>
                            <div>
                                <Button size="small" style={{ marginRight: '8px' }}>月度</Button>
                                <Button type="primary" size="small">年度</Button>
                            </div>
                        </div>
                        <Row gutter={16} style={{ marginBottom: '24px' }}>
                            <Col xs={12} md={6}>
                                <div style={{ background: '#f6ffed', padding: '16px', borderRadius: '8px', textAlign: 'center' }}>
                                    <div style={{ fontSize: '12px', color: '#666', marginBottom: '8px' }}>应出勤天数</div>
                                    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#52c41a' }}>22</div>
                                </div>
                            </Col>
                            <Col xs={12} md={6}>
                                <div style={{ background: '#e6f7ff', padding: '16px', borderRadius: '8px', textAlign: 'center' }}>
                                    <div style={{ fontSize: '12px', color: '#666', marginBottom: '8px' }}>实际出勤</div>
                                    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1890ff' }}>21</div>
                                </div>
                            </Col>
                            <Col xs={12} md={6}>
                                <div style={{ background: '#fffbe6', padding: '16px', borderRadius: '8px', textAlign: 'center' }}>
                                    <div style={{ fontSize: '12px', color: '#666', marginBottom: '8px' }}>迟到/早退</div>
                                    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#faad14' }}>1</div>
                                </div>
                            </Col>
                            <Col xs={12} md={6}>
                                <div style={{ background: '#fff2f0', padding: '16px', borderRadius: '8px', textAlign: 'center' }}>
                                    <div style={{ fontSize: '12px', color: '#666', marginBottom: '8px' }}>缺勤</div>
                                    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#ff4d4f' }}>0.5</div>
                                </div>
                            </Col>
                        </Row>
                        <div className="attendance-tags">
                            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                                <Tag color="green">10-01 出勤</Tag>
                                <Tag color="green">10-02 出勤</Tag>
                                <Tag color="green">10-03 出勤</Tag>
                                <Tag color="orange">10-04 迟到</Tag>
                                <Tag color="green">10-05 出勤</Tag>
                                <Tag color="green">10-06 出勤</Tag>
                                <Tag color="green">10-07 出勤</Tag>
                                <Tag color="green">10-08 出勤</Tag>
                                <Tag color="green">10-09 出勤</Tag>
                                <Tag color="green">10-10 出勤</Tag>
                                <Tag color="green">10-11 出勤</Tag>
                                <Tag color="green">10-12 出勤</Tag>
                                <Tag color="green">10-13 出勤</Tag>
                                <Tag color="green">10-14 出勤</Tag>
                                <Tag color="green">10-15 出勤</Tag>
                                <Tag color="green">10-16 出勤</Tag>
                                <Tag color="green">10-17 出勤</Tag>
                                <Tag color="green">10-18 出勤</Tag>
                                <Tag color="green">10-19 出勤</Tag>
                                <Tag color="green">10-20 出勤</Tag>
                                <Tag color="red">10-21 缺勤</Tag>
                                <Tag color="green">10-22 出勤</Tag>
                                <Tag color="green">10-23 出勤</Tag>
                                <Tag color="green">10-24 出勤</Tag>
                                <Tag color="green">10-25 出勤</Tag>
                                <Tag color="green">10-26 出勤</Tag>
                                <Tag color="green">10-27 出勤</Tag>
                                <Tag color="green">10-28 出勤</Tag>
                                <Tag color="green">10-29 出勤</Tag>
                                <Tag color="green">10-30 出勤</Tag>
                                <Tag color="green">10-31 出勤</Tag>
                            </div>
                        </div>
                    </Card>
                </Card>
            </div>
        );
    }
}

export default SalaryDetail;
