import { Form, Input, Modal } from 'antd'
import { FC } from 'react'

export interface BatchFillingModalProps {
  visible: boolean
  setVisible: (v: boolean) => void
  onOk: (form: any) => void
}

export const BatchFillingModal: FC<BatchFillingModalProps> = ({ visible, setVisible, onOk }) => {
  const [form] = Form.useForm()

  const handleCancel = () => {
    setVisible(false)
  }

  const handleSubmit = async () => {
    if (!(await form.validateFields())) return
    onOk(form.getFieldsValue())
    setVisible(false)
    form.resetFields()
  }

  return (
    <Modal
      title='批量填写'
      width={700}
      maskClosable={false}
      open={visible}
      onCancel={handleCancel}
      onOk={handleSubmit}
    >
      <Form form={form} labelCol={{ span: 3 }}>
        <Form.Item name='checker' label='盘点人' rules={[{ required: true }]}>
          <Input placeholder='请填写' maxLength={20} />
        </Form.Item>
        <Form.Item name='remark' label='备注'>
          <Input placeholder='请填写' maxLength={20} />
        </Form.Item>
      </Form>
    </Modal>
  )
}