import React, { PureComponent } from 'react';
import {
  Card,
  Form,
  Input,
  Button,
  Upload,
  message,
  Avatar,
  Row,
  Col,
  Space,
  Typography
} from 'antd';
import {
  CameraOutlined,
  UserOutlined,
  IdcardOutlined,
  PlusOutlined,
  CheckCircleOutlined
} from '@ant-design/icons';
import styles from './OnBoardingRegister.less';

const { TextArea } = Input;
const { Title, Text } = Typography;

class OnBoardingRegister extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      faceVerified: false,
      idCardFront: null,
      idCardBack: null,
      formData: {
        department: '技术研发部',
        position: '前端开发工程师',
        joinDate: '2025-07-02',
        name: '',
        age: '',
        phone: '',
        idNumber: '',
        remark: ''
      }
    };
  }

  // 刷脸认证
  handleFaceVerification = () => {
    // 模拟刷脸认证
    setTimeout(() => {
      this.setState({ faceVerified: true });
      message.success('刷脸认证成功');
    }, 2000);
    message.loading('正在进行刷脸认证...', 2);
  };

  // 处理表单字段变化
  handleFormChange = (field, value) => {
    this.setState(prevState => ({
      formData: {
        ...prevState.formData,
        [field]: value
      }
    }));
  };

  // 处理身份证上传
  handleIdCardUpload = (type, info) => {
    if (info.file.status === 'uploading') {
      return;
    }
    if (info.file.status === 'done') {
      // 获取上传结果
      const imageUrl = URL.createObjectURL(info.file.originFileObj);
      this.setState({
        [type]: imageUrl
      });
      message.success(`身份证${type === 'idCardFront' ? '正面' : '反面'}上传成功`);
    }
  };

  // 自定义上传
  customUpload = ({ file, onSuccess }) => {
    setTimeout(() => {
      onSuccess("ok");
    }, 0);
  };

  // 提交表单
  handleSubmit = () => {
    const { formData, faceVerified, idCardFront, idCardBack } = this.state;
    
    if (!faceVerified) {
      message.error('请先完成刷脸认证');
      return;
    }
    
    if (!formData.name) {
      message.error('请输入姓名');
      return;
    }
    
    if (!formData.age) {
      message.error('请输入年龄');
      return;
    }
    
    if (!formData.phone) {
      message.error('请输入手机号');
      return;
    }
    
    if (!formData.idNumber) {
      message.error('请输入身份证号');
      return;
    }
    
    if (!idCardFront || !idCardBack) {
      message.error('请上传身份证正反面照片');
      return;
    }
    
    console.log('提交入职申请数据：', {
      ...formData,
      faceVerified,
      idCardFront,
      idCardBack
    });
    
    message.success('入职申请提交成功，请等待审核');
  };

  render() {
    const { faceVerified, idCardFront, idCardBack, formData } = this.state;

    return (
      <div className={styles.container}>
        <div className={styles.content}>
          <Title level={2} className={styles.title}>
            人员入职登记
          </Title>
          
          <Card className={styles.formCard}>
            {/* 刷脸认证区域 */}
            <div className={styles.faceSection}>
              <div className={styles.faceContainer}>
                {faceVerified ? (
                  <Avatar size={120} icon={<UserOutlined />} className={styles.faceAvatar} />
                ) : (
                  <div className={styles.faceUpload}>
                    <CameraOutlined className={styles.cameraIcon} />
                  </div>
                )}
                {faceVerified && (
                  <CheckCircleOutlined className={styles.verifiedIcon} />
                )}
              </div>
              <Button 
                type="primary" 
                onClick={this.handleFaceVerification}
                disabled={faceVerified}
                className={styles.faceButton}
              >
                {faceVerified ? '刷脸认证成功' : '点击刷脸认证'}
              </Button>
            </div>

            {/* 表单区域 */}
            <Form layout="vertical" className={styles.form}>
              {/* 入职信息 */}
              <Row gutter={16}>
                <Col span={8}>
                  <Form.Item label="入职部门">
                    <Input 
                      value={formData.department}
                      disabled
                      className={styles.readOnlyInput}
                    />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="岗位">
                    <Input 
                      value={formData.position}
                      disabled
                      className={styles.readOnlyInput}
                    />
                  </Form.Item>
                </Col>
                <Col span={8}>
                  <Form.Item label="入职时间">
                    <Input 
                      value={formData.joinDate}
                      disabled
                      className={styles.readOnlyInput}
                    />
                  </Form.Item>
                </Col>
              </Row>

              {/* 个人信息 */}
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item 
                    label="姓名" 
                    required
                    className={styles.requiredField}
                  >
                    <Input 
                      value={formData.name}
                      onChange={(e) => this.handleFormChange('name', e.target.value)}
                      placeholder="请输入真实姓名"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item 
                    label="年龄" 
                    required
                    className={styles.requiredField}
                  >
                    <Input 
                      type="number"
                      value={formData.age}
                      onChange={(e) => this.handleFormChange('age', e.target.value)}
                      placeholder="请输入年龄"
                    />
                  </Form.Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item 
                    label="手机号" 
                    required
                    className={styles.requiredField}
                  >
                    <Input 
                      value={formData.phone}
                      onChange={(e) => this.handleFormChange('phone', e.target.value)}
                      placeholder="请输入手机号码"
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item 
                    label="身份证号" 
                    required
                    className={styles.requiredField}
                  >
                    <Input 
                      value={formData.idNumber}
                      onChange={(e) => this.handleFormChange('idNumber', e.target.value)}
                      placeholder="请输入身份证号码"
                    />
                  </Form.Item>
                </Col>
              </Row>

              {/* 身份证上传 */}
              <Form.Item 
                label="身份证正反面" 
                required
                className={styles.requiredField}
              >
                <Row gutter={16}>
                  <Col span={12}>
                    <Upload
                      name="idCardFront"
                      listType="picture-card"
                      className={styles.idCardUpload}
                      showUploadList={false}
                      customRequest={this.customUpload}
                      onChange={(info) => this.handleIdCardUpload('idCardFront', info)}
                    >
                      {idCardFront ? (
                        <img src={idCardFront} alt="身份证正面" className={styles.idCardImage} />
                      ) : (
                        <div className={styles.uploadContent}>
                          <IdcardOutlined className={styles.uploadIcon} />
                          <div className={styles.uploadText}>身份证正面</div>
                          <Button size="small" className={styles.uploadButton}>
                            上传照片
                          </Button>
                        </div>
                      )}
                    </Upload>
                  </Col>
                  <Col span={12}>
                    <Upload
                      name="idCardBack"
                      listType="picture-card"
                      className={styles.idCardUpload}
                      showUploadList={false}
                      customRequest={this.customUpload}
                      onChange={(info) => this.handleIdCardUpload('idCardBack', info)}
                    >
                      {idCardBack ? (
                        <img src={idCardBack} alt="身份证反面" className={styles.idCardImage} />
                      ) : (
                        <div className={styles.uploadContent}>
                          <IdcardOutlined className={styles.uploadIcon} />
                          <div className={styles.uploadText}>身份证反面</div>
                          <Button size="small" className={styles.uploadButton}>
                            上传照片
                          </Button>
                        </div>
                      )}
                    </Upload>
                  </Col>
                </Row>
              </Form.Item>

              {/* 备注 */}
              <Form.Item label="备注">
                <TextArea
                  value={formData.remark}
                  onChange={(e) => this.handleFormChange('remark', e.target.value)}
                  rows={3}
                  placeholder="可填写特殊情况说明"
                />
              </Form.Item>

              {/* 提交按钮 */}
              <Form.Item className={styles.submitSection}>
                <Button 
                  type="primary" 
                  size="large"
                  block
                  onClick={this.handleSubmit}
                  className={styles.submitButton}
                >
                  提交入职申请
                </Button>
              </Form.Item>
            </Form>
          </Card>
        </div>
      </div>
    );
  }
}

export default OnBoardingRegister;