/* 境外企业 表单项 */
import React from 'react';
import { Form, Input, Button, Row, Col, Upload } from 'antd';
import {
  MobileOutlined,
  UploadOutlined
} from '@ant-design/icons';

import { validateFileSize } from '@/utils/utils';


interface ForeignFormProps {
  form: any;
  countdown: number;
  handleGetCaptcha: () => void;
  surveyQuestions?: API.SurveyQuestionResponse; // 本身就是数组类型
}

/**
 * 个人注册表单
 * 基本信息部分为个人
 */
const ForeignForm: React.FC<ForeignFormProps> = ({ form, countdown, handleGetCaptcha, surveyQuestions }) => {

  return (
    <>
      {/* 境外企业特有的基本信息部分 */}
      <div className="form-section-title">基本信息</div>

      <Row gutter={24}>
        <Col span={13}>
          <Form.Item
            name={['coscoSupplierBase', 'name']}
            label="姓名"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input placeholder="请输入姓名" />
          </Form.Item>
        </Col>

        <Col span={13}>
          <Form.Item
            name={['coscoSupplierBase', 'idCard']}
            label="身份证号"
            rules={[{ required: true, message: '请输入身份证号' }]}
          >
            <Input placeholder="请填写正确的身份证号" />
          </Form.Item>
        </Col>
        <Col span={13}>
          <Form.Item
            name={['coscoSupplierBase', 'contactPhone']}
            label="联系电话"
            rules={[
              { required: true, message: '请输入联系电话' },
              { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的联系电话' },
            ]}
          >
            <Input
              placeholder="请输入11位联系电话"
              prefix={<MobileOutlined />}
            />
          </Form.Item>
        </Col>
        <Col span={13}>
          <Form.Item
            name={['coscoSupplierBase', 'personBank']}
            label="开户行"
            rules={[{ required: true, message: '请输入开户行' }]}
          >
            <Input placeholder="请输入开户行" />
          </Form.Item>
        </Col>
        <Col span={13}>
          <Form.Item
            name={['coscoSupplierBase', 'personAccount']}
            label="银行账号"
            rules={[{ required: true, message: '请输入银行账号' }]}
          >
            <Input placeholder="请输入银行账号" />
          </Form.Item>
        </Col>
        <Col span={13}>
          <Form.Item
            name="attachments"
            label="相关证照"
            extra="pdf,jpg,jpeg,png类型的文件,大小不超过10MB"
            rules={[{ required: true, message: '请上传相关证照' }]}
          >
            <Upload
              name="file"
              action="/api/fileConfig/files/upload"
              listType="text"
              maxCount={1}
              beforeUpload={(file) => validateFileSize(file, 10, ['pdf', 'jpg', 'jpeg', 'png'])}
            >
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
          </Form.Item>
        </Col>
      </Row>
    </>
  );
};

export default ForeignForm;