import React from 'react';
import { Button, Form, Input, Modal, Upload, Select } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

interface CreateDocumentProps {
  //新增文档标题参数
  title: string;
  //控制弹出参数
  modalVisible: boolean;
  //返回参数
  onCancel: () => void;
}

const layout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 12 },
};

const validateMessages = {
  required: '请填写${label}',
};

const CreateDocument: React.FC<CreateDocumentProps> = (props) => {
  const { modalVisible, onCancel, title } = props;

  const { Option } = Select;
  const { TextArea } = Input;
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(values);
  };

  return (
    <Modal
      destroyOnClose
      title={title}
      visible={modalVisible}
      onCancel={() => onCancel()}
      okText="保存"
      cancelText="取消"
      width={800}
    >
      <Form
        {...layout}
        form={form}
        name="nest-messages"
        onFinish={onFinish}
        validateMessages={validateMessages}
      >
        <span
          style={{
            float: 'right',
            marginRight: 221,
            marginTop: -22,
            position: 'relative',
            top: 25,
            color: '#808080',
          }}
        >
          最多上传一个文件，每个最大50MB
        </span>
        <Form.Item label="选择文档" rules={[{ required: true }]}>
          <Upload>
            <Button type="primary">
              <UploadOutlined />
              上传
            </Button>
          </Upload>
        </Form.Item>
        <Form.Item label="文档类型" rules={[{ required: true }]}>
          <Input placeholder="请填写文档类型" />
        </Form.Item>
        <Form.Item label="存档目录" rules={[{ required: true }]}>
          <Select style={{ width: 200 }} placeholder="请选择" optionFilterProp="children">
            <Option value="jack">项目建档</Option>
            <Option value="lucy">谈判邀请</Option>
            <Option value="tom">谈判准备</Option>
            <Option value="tom1">项目谈判</Option>
            <Option value="tom2">谈判结果</Option>
          </Select>
        </Form.Item>
        <Form.Item label="文档说明" rules={[{ required: true }]}>
          <TextArea rows={6} maxLength={2000} placeholder="请填写文档说明" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateDocument;