import React, { PureComponent } from 'react';
import {
  Card,
  Tree,
  Input,
  Button,
  DatePicker,
  Select,
  Row,
  Col,
  Space,
  Radio,
  Checkbox,
  InputNumber,
  Avatar,
  message,
  Timeline,
  Tag,
  Typography,
  Divider
} from 'antd';
import {
  SaveOutlined,
  CloseOutlined,
  PlusCircleOutlined,
  DeleteOutlined,
  ExpandOutlined,
  UserOutlined,
  TeamOutlined,
  ApartmentOutlined,
  SyncOutlined,
  DollarOutlined,
  SettingOutlined,
  CalendarOutlined,
  UsergroupAddOutlined,
  UserSwitchOutlined,
  StopOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  ContactsOutlined,
  PrinterOutlined,
  CheckOutlined,
  ClockCircleOutlined,
  LoadingOutlined,
  EyeOutlined
} from '@ant-design/icons';
import dayjs from 'dayjs';
import styles from './OnBoardingApproval.less';

const { Option } = Select;
const { TextArea } = Input;
const { Title, Text, Paragraph } = Typography;

class OnBoardingApproval extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedOrgKeys: ['0-0-4'], // 默认选中人事部
      expandedKeys: ['0-0', '0-0-0', '0-0-1', '0-0-2'],
      // 审批详情数据
      approvalData: {
        applicant: {
          name: '张三',
          gender: '男',
          age: 28,
          phone: '138****5678',
          department: '产品中心 - 用户体验部',
          position: '高级产品经理',
          joinDate: '2023-11-15',
          salary: '¥18,000/月',
          status: '审批中',
          avatar: '/img/avatar.jpg',
          idCard: '/img/card.jpg'
        },
        education: [
          {
            period: '2014.09 - 2018.06',
            school: '北京大学',
            major: '信息管理与信息系统',
            degree: '本科'
          },
          {
            period: '2018.09 - 2021.06',
            school: '清华大学',
            major: '工商管理',
            degree: '硕士'
          }
        ],
        workExperience: [
          {
            period: '2021.07 - 2023.04',
            company: '字节跳动',
            position: '产品经理'
          },
          {
            period: '2023.05 - 2023.10',
            company: '腾讯科技',
            position: '高级产品经理'
          }
        ],
        approvalFlow: [
          {
            step: '提交申请',
            status: 'completed',
            operator: '张三',
            time: '2023-10-20 09:30',
            comment: '申请人张三提交了入职申请'
          },
          {
            step: '部门初审',
            status: 'completed',
            operator: '张伟',
            time: '2023-10-21 14:15',
            comment: '部门经理张伟审核通过',
            opinion: '候选人专业背景和工作经验符合岗位要求，建议录用'
          },
          {
            step: '部门复审',
            status: 'completed',
            operator: '李强',
            time: '2023-10-23 10:45',
            comment: '产品总监李强审核通过',
            opinion: '面试表现优秀，专业能力突出，同意录用'
          },
          {
            step: 'HR审核',
            status: 'completed',
            operator: '王芳',
            time: '2023-10-25 16:20',
            comment: 'HRBP王芳审核通过',
            opinion: '背景调查无异常，薪资符合公司标准，同意录用'
          },
          {
            step: '总经理审批',
            status: 'processing',
            operator: '赵明',
            time: '待审批',
            comment: '等待总经理赵明审批'
          },
          {
            step: '入职生效',
            status: 'waiting',
            time: '待处理',
            comment: '审批通过后自动生效'
          },
          {
            step: '审批完结',
            status: 'waiting',
            time: '待处理',
            comment: '流程自动归档'
          }
        ]
      },
      organizationData: [
        {
          title: '飞利信科技有限公司',
          key: '0-0',
          count: 356,
          children: [
            {
              title: '技术部',
              key: '0-0-0',
              count: 120,
              children: [
                { title: '前端组', key: '0-0-0-0', count: 45 },
                { title: '后端组', key: '0-0-0-1', count: 52 },
                { title: '测试组', key: '0-0-0-2', count: 23 }
              ],
            },
            {
              title: '产品部',
              key: '0-0-1',
              count: 68,
              children: [
                { title: '产品设计组', key: '0-0-1-0', count: 28 },
                { title: '用户体验组', key: '0-0-1-1', count: 25 },
                { title: '产品运营组', key: '0-0-1-2', count: 15 }
              ],
            },
            {
              title: '运营部',
              key: '0-0-2',
              count: 52,
              children: [
                { title: '市场营销组', key: '0-0-2-0', count: 22 },
                { title: '客户服务组', key: '0-0-2-1', count: 18 },
                { title: '商务合作组', key: '0-0-2-2', count: 12 }
              ],
            },
            {
              title: '财务部',
              key: '0-0-3',
              count: 32,
              children: [
                { title: '会计组', key: '0-0-3-0', count: 18 },
                { title: '审计组', key: '0-0-3-1', count: 14 }
              ],
            },
            {
              title: '人事部',
              key: '0-0-4',
              count: 84,
              children: [
                { title: 'HR专员组', key: '0-0-4-0', count: 25 },
                { title: '招聘组', key: '0-0-4-1', count: 22 },
                { title: '培训组', key: '0-0-4-2', count: 18 },
                { title: '薪酬组', key: '0-0-4-3', count: 19 }
              ],
            },
          ],
        },
      ]
    };
  }

  // 获取处理后的树形数据
  getTreeData = () => {
    const { organizationData } = this.state;

    const processNode = (node) => ({
      key: node.key,
      title: (
        <span className={styles['tree-node-title']}>
          {this.getNodeIcon(node.title)}
          <span className={styles['node-title']}>{node.title}</span>
          <span className={styles['node-count']}>({node.count})</span>
        </span>
      ),
      children: node.children ? node.children.map(processNode) : undefined
    });

    return organizationData.map(processNode);
  };

  // 获取节点图标
  getNodeIcon = (title) => {
    if (title.includes('公司') || title.includes('集团')) return <ApartmentOutlined style={{ color: '#1890ff', fontSize: '14px' }} />;
    if (title.includes('技术') || title.includes('开发') || title.includes('测试')) return <SettingOutlined style={{ color: '#52c41a', fontSize: '14px' }} />;
    if (title.includes('产品') || title.includes('设计') || title.includes('体验')) return <TeamOutlined style={{ color: '#fa8c16', fontSize: '14px' }} />;
    if (title.includes('运营') || title.includes('市场') || title.includes('客户') || title.includes('商务')) return <TeamOutlined style={{ color: '#eb2f96', fontSize: '14px' }} />;
    if (title.includes('财务') || title.includes('会计') || title.includes('审计')) return <DollarOutlined style={{ color: '#722ed1', fontSize: '14px' }} />;
    if (title.includes('人事') || title.includes('HR') || title.includes('招聘') || title.includes('培训') || title.includes('薪酬')) return <UserOutlined style={{ color: '#13c2c2', fontSize: '14px' }} />;
    return <TeamOutlined style={{ color: '#666', fontSize: '14px' }} />;
  };

  // 刷新树数据
  handleTreeRefresh = () => {
    message.info('刷新组织架构数据');
  };

  // 展开/收缩所有节点
  handleTreeToggle = () => {
    const { expandedKeys, organizationData } = this.state;
    if (expandedKeys.length > 0) {
      this.setState({ expandedKeys: [] });
    } else {
      const getAllKeys = (nodes) => {
        let keys = [];
        nodes.forEach(node => {
          keys.push(node.key);
          if (node.children) {
            keys = keys.concat(getAllKeys(node.children));
          }
        });
        return keys;
      };
      this.setState({ expandedKeys: getAllKeys(organizationData) });
    }
  };

  // 组织树选择
  onTreeSelect = (selectedKeys, info) => {
    console.log('选中节点:', selectedKeys, info);
    this.setState({ selectedOrgKeys: selectedKeys });
  };

  // 树展开/收缩
  onTreeExpand = (expandedKeys) => {
    this.setState({ expandedKeys });
  };

  // 审批通过
  handleApprove = () => {
    message.success('审批通过，已提交到下一审批环节');
  };

  // 审批拒绝
  handleReject = () => {
    message.error('审批已拒绝');
  };

  // 打印
  handlePrint = () => {
    window.print();
  };

  // 获取审批状态图标
  getStatusIcon = (status) => {
    switch (status) {
      case 'completed':
        return <CheckCircleOutlined className={styles.completedIcon} />;
      case 'processing':
        return <LoadingOutlined className={styles.processingIcon} />;
      case 'waiting':
        return <ClockCircleOutlined className={styles.waitingIcon} />;
      default:
        return <ClockCircleOutlined className={styles.waitingIcon} />;
    }
  };

  // 获取状态标签
  getStatusTag = (status) => {
    switch (status) {
      case '审批中':
        return <Tag color="processing">审批中</Tag>;
      case '已通过':
        return <Tag color="success">已通过</Tag>;
      case '已拒绝':
        return <Tag color="error">已拒绝</Tag>;
      default:
        return <Tag color="default">{status}</Tag>;
    }
  };

  render() {
    const { selectedOrgKeys, expandedKeys, approvalData } = this.state;
    const { applicant, education, workExperience, approvalFlow } = approvalData;

    return (
      <div className={styles.container}>
        <div className={styles.mainContent}>
          <Card className={styles.contentCard}>
            <Row gutter={24}>
              {/* 左侧组织架构树 - 保持不变 */}
              <Col span={5}>
                <Card
                  title={
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
                      <div style={{ display: 'flex', alignItems: 'center' }}>
                        <TeamOutlined style={{ marginRight: 8, color: '#1890ff' }} />
                        <span>组织架构</span>
                      </div>
                      <Space>
                        <Button
                          type="text"
                          icon={<SyncOutlined />}
                          size="small"
                          style={{ color: '#1890ff' }}
                          onClick={this.handleTreeRefresh}
                          title="刷新"
                        />
                        <Button
                          type="text"
                          icon={<ExpandOutlined />}
                          size="small"
                          style={{ color: '#1890ff' }}
                          onClick={this.handleTreeToggle}
                          title={expandedKeys.length > 0 ? "收缩全部" : "展开全部"}
                        />
                      </Space>
                    </div>
                  }
                  className={styles.treeCard}
                >
                  <div className={styles.treeContainer}>
                    <Tree
                      showIcon
                      selectedKeys={selectedOrgKeys}
                      expandedKeys={expandedKeys}
                      treeData={this.getTreeData()}
                      onSelect={this.onTreeSelect}
                      onExpand={this.onTreeExpand}
                      className={styles.orgTree}
                    />
                  </div>
                </Card>
              </Col>

              {/* 右侧入职审批详情 */}
              <Col span={19}>
                <Card className={styles.mainCard}>
                  {/* 头部标题和操作按钮 */}
                  <div className={styles.header}>
                    <Title level={3} style={{ margin: 0, color: '#333', fontSize: '18px' }}>
                      入职审批详情
                    </Title>
                    <Space>
                      <Button 
                        type="primary" 
                        icon={<CheckOutlined />}
                        onClick={this.handleApprove}
                        // className={styles.approveBtn}
                      >
                        通过
                      </Button>
                      <Button 
                        danger
                        icon={<CloseOutlined />}
                        onClick={this.handleReject}
                        // className={styles.rejectBtn}
                      >
                        拒绝
                      </Button>
                      <Button 
                        icon={<PrinterOutlined />}
                        onClick={this.handlePrint}
                      >
                        打印
                      </Button>
                    </Space>
                  </div>

                  {/* 滚动内容区 */}
                  <div className={styles.content}>
                    {/* 基本信息卡片 */}
                    <Card className={styles.infoCard} title="申请人信息">
                      <Row gutter={24}>
                        {/* 申请人照片 */}
                        <Col span={6}>
                          <div className={styles.photoContainer}>
                            <img 
                              src={applicant.avatar} 
                              alt="申请人照片" 
                              className={styles.applicantPhoto}
                            />
                            <Text className={styles.photoLabel}>申请人照片</Text>
                          </div>
                        </Col>

                        {/* 身份证照片 */}
                        <Col span={6}>
                          <div className={styles.photoContainer}>
                            <img 
                              src={applicant.idCard} 
                              alt="身份证照片" 
                              className={styles.idCardPhoto}
                            />
                            <Text className={styles.photoLabel}>身份证正反面</Text>
                          </div>
                        </Col>

                        {/* 基本信息 */}
                        <Col span={12}>
                          <div className={styles.basicInfo}>
                            <Row gutter={[16, 12]}>
                              <Col span={12}>
                                <div className={styles.infoItem}>
                                  <Text className={styles.infoLabel}>申请人姓名：</Text>
                                  <Text className={styles.infoValue}>{applicant.name}</Text>
                                </div>
                              </Col>
                              <Col span={12}>
                                <div className={styles.infoItem}>
                                  <Text className={styles.infoLabel}>性别：</Text>
                                  <Text className={styles.infoValue}>{applicant.gender}</Text>
                                </div>
                              </Col>
                              <Col span={12}>
                                <div className={styles.infoItem}>
                                  <Text className={styles.infoLabel}>年龄：</Text>
                                  <Text className={styles.infoValue}>{applicant.age}</Text>
                                </div>
                              </Col>
                              <Col span={12}>
                                <div className={styles.infoItem}>
                                  <Text className={styles.infoLabel}>联系电话：</Text>
                                  <Text className={styles.infoValue}>{applicant.phone}</Text>
                                </div>
                              </Col>
                              <Col span={24}>
                                <div className={styles.infoItem}>
                                  <Text className={styles.infoLabel}>申请部门：</Text>
                                  <Text className={styles.infoValue}>{applicant.department}</Text>
                                </div>
                              </Col>
                              <Col span={12}>
                                <div className={styles.infoItem}>
                                  <Text className={styles.infoLabel}>职位：</Text>
                                  <Text className={styles.infoValue}>{applicant.position}</Text>
                                </div>
                              </Col>
                              <Col span={12}>
                                <div className={styles.infoItem}>
                                  <Text className={styles.infoLabel}>入职日期：</Text>
                                  <Text className={styles.infoValue}>{applicant.joinDate}</Text>
                                </div>
                              </Col>
                              <Col span={12}>
                                <div className={styles.infoItem}>
                                  <Text className={styles.infoLabel}>薪资待遇：</Text>
                                  <Text className={styles.infoValue}>{applicant.salary}</Text>
                                </div>
                              </Col>
                              <Col span={12}>
                                <div className={styles.infoItem}>
                                  <Text className={styles.infoLabel}>审批状态：</Text>
                                  {this.getStatusTag(applicant.status)}
                                </div>
                              </Col>
                            </Row>
                          </div>
                        </Col>
                      </Row>
                    </Card>

                    {/* 教育背景 */}
                    <Card className={styles.infoCard} title="教育背景">
                      <div className={styles.backgroundSection}>
                        {education.map((edu, index) => (
                          <Row key={index} gutter={16} className={styles.backgroundRow}>
                            <Col span={6}>
                              <Text strong>{edu.period}</Text>
                            </Col>
                            <Col span={6}>
                              <Text strong>{edu.school}</Text>
                            </Col>
                            <Col span={6}>
                              <Text>{edu.major}</Text>
                            </Col>
                            <Col span={6}>
                              <Text>{edu.degree}</Text>
                            </Col>
                          </Row>
                        ))}
                      </div>
                    </Card>

                    {/* 工作经历 */}
                    <Card className={styles.infoCard} title="工作经历">
                      <div className={styles.backgroundSection}>
                        {workExperience.map((work, index) => (
                          <Row key={index} gutter={16} className={styles.backgroundRow}>
                            <Col span={8}>
                              <Text strong>{work.period}</Text>
                            </Col>
                            <Col span={8}>
                              <Text strong>{work.company}</Text>
                            </Col>
                            <Col span={8}>
                              <Text>{work.position}</Text>
                            </Col>
                          </Row>
                        ))}
                      </div>
                    </Card>

                    {/* 审批流程 */}
                    <Card className={styles.infoCard} title="审批流程">
                      <Timeline className={styles.approvalTimeline}>
                        {approvalFlow.map((flow, index) => (
                          <Timeline.Item
                            key={index}
                            dot={this.getStatusIcon(flow.status)}
                            className={styles.timelineItem}
                          >
                            <div className={styles.timelineContent}>
                              <div className={styles.timelineHeader}>
                                <Text strong className={styles.stepTitle}>{flow.step}</Text>
                                <Text className={styles.stepTime}>{flow.time}</Text>
                              </div>
                              <Paragraph className={styles.stepComment}>
                                {flow.comment}
                              </Paragraph>
                              {flow.opinion && (
                                <div className={styles.stepOpinion}>
                                  <Text>意见：{flow.opinion}</Text>
                                </div>
                              )}
                            </div>
                          </Timeline.Item>
                        ))}
                      </Timeline>
                    </Card>
                  </div>
                </Card>
              </Col>
            </Row>
          </Card>
        </div>
      </div>
    );
  }
}

export default OnBoardingApproval;