import React from 'react'
import { Modal, Form, Button, Input, Switch, Select } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { IClassification } from '../types'

const FormItem = Form.Item

interface IClassificationsFormModalProps
  extends FormComponentProps<IClassification> {
  visible: boolean
  loading: boolean
  formView: IClassification
  onSave: (view: IClassification) => void
  onCancel: () => void
}

class ClassificationsFormModal extends React.PureComponent<IClassificationsFormModalProps> {
  // @ts-ignore
  private formItemStyle = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
  }

  private save = () => {
    const { form, formView, onSave } = this.props
    form.validateFieldsAndScroll((err, fieldsValue) => {
      if (err) {
        return
      }
      const copyView: IClassification = { ...fieldsValue }
      onSave(copyView)
    })
  }

  private clearFieldsValue = () => {
    this.props.form.resetFields()
  }

  public render() {
    const { form, visible, loading, formView, onCancel } = this.props
    const { getFieldDecorator } = form

    const modalButtons = [
      <Button key={'back'} size={'large'} onClick={onCancel}>
        取 消
      </Button>,
      <Button
        disabled={loading}
        key={'submit'}
        size={'large'}
        type={'primary'}
        onClick={this.save}
      >
        保 存
      </Button>
    ]

    return (
      <Modal
        title={formView?.id ? '编辑' : '新增'}
        visible={visible}
        footer={modalButtons}
        onCancel={onCancel}
        afterClose={this.clearFieldsValue}
        destroyOnClose
      >
        <Form>
          <FormItem label={'稽核类型'} {...this.formItemStyle} required>
            {getFieldDecorator<IClassification>('name', {
              initialValue: formView?.name,
              rules: [
                {
                  required: true,
                  message: '请输入'
                }
              ]
            })(<Input />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }
}

export default Form.create<IClassificationsFormModalProps>()(
  ClassificationsFormModal
)
