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

const FormItem = Form.Item

interface IDataSubjectFormModalModalProps
  extends FormComponentProps<IDataSubject> {
  subject: string | number
  subjects: IDictData[]
  visible: boolean
  loading: boolean
  fromView: IDataSubject
  onSave: (view: IDataSubject) => void
  onCancel: () => void
}

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

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

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

  public render() {
    const { form, visible, loading, fromView, onCancel, subjects, subject } =
      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={fromView ? '编辑' : '新增'}
        visible={visible}
        footer={modalButtons}
        onCancel={onCancel}
        afterClose={this.clearFieldsValue}
        destroyOnClose
      >
        <Form>
          <FormItem label={'标准主题'} {...this.formItemStyle} required>
            {getFieldDecorator<IDataSubject>('pId', {
              initialValue: subject === -1 ? fromView?.pId : subject,
              rules: [
                {
                  required: true,
                  message: '请输入'
                }
              ]
            })(
              <Select disabled={subject && subject !== -1}>
                {subjects
                  ?.filter((e) => e.dictCode !== -1)
                  ?.map((d) => (
                    <Select.Option key={d.dictCode} value={d.dictCode}>
                      {d.dictLabel}
                    </Select.Option>
                  ))}
              </Select>
            )}
          </FormItem>
          <FormItem label={'标准编码'} {...this.formItemStyle} required>
            {getFieldDecorator<IDataSubject>('standardCode', {
              initialValue: fromView?.standardCode,
              rules: [
                {
                  required: true,
                  message: '请输入'
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label={'标准名称'} {...this.formItemStyle} required>
            {getFieldDecorator<IDataSubject>('standardName', {
              initialValue: fromView?.standardName,
              rules: [
                {
                  required: true,
                  message: '请输入'
                }
              ]
            })(<Input />)}
          </FormItem>
          <FormItem label={'别名'} {...this.formItemStyle}>
            {getFieldDecorator<IDataSubject>('standardAlias', {
              initialValue: fromView?.standardAlias
            })(<Input />)}
          </FormItem>
          <FormItem label={'管理人员'} {...this.formItemStyle}>
            {getFieldDecorator<IDataSubject>('management', {
              initialValue: fromView?.management
            })(<Input />)}
          </FormItem>
          <FormItem label={'管理部门'} {...this.formItemStyle}>
            {getFieldDecorator<IDataSubject>('deptName', {
              initialValue: fromView?.deptName
            })(<Input />)}
          </FormItem>
          <FormItem label={'英文名称'} {...this.formItemStyle}>
            {getFieldDecorator<IDataSubject>('englishName', {
              initialValue: fromView?.englishName
            })(<Input />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }
}

export default Form.create<IDataSubjectFormModalModalProps>()(
  DataSubjectFormModal
)
