/* eslint react/no-multi-comp:0, no-console:0 */

import BaseMixin from '../../_util/BaseMixin';
import createDOMForm from '../src/createDOMForm';
import { Modal } from 'ant-design-vue';
import { regionStyle, errorStyle } from './styles';

const Form = {
  mixins: [BaseMixin],
  props: {
    form: Object,
  },

  data() {
    return { visible: false };
  },
  methods: {
    onSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((error, values) => {
        if (!error) {
          console.log('ok', values);
        } else {
          console.log('error', error, values);
        }
      });
    },

    onCancel() {
      this.setState({ visible: false });
    },

    open() {
      this.setState({ visible: true });
    },
  },

  render() {
    const { getFieldProps, getFieldError } = this.form;
    return (
      <div
        style={{
          margin: '20px',
        }}
      >
        <h2>modal</h2>
        <Modal
          visible={this.visible}
          bodyStyle={{
            height: '200px',
            overflow: 'auto',
          }}
          onCancel={this.onCancel}
          title="modal"
        >
          <div ref="dialogContent">
            <form onSubmit={this.onSubmit}>
              <input
                {...getFieldProps('required', { rules: [{ required: true, message: '必填' }] })}
              />
              <div style={errorStyle}>
                {getFieldError('required') ? (
                  getFieldError('required').join(',')
                ) : (
                  <b
                    style={{
                      visibility: 'hidden',
                    }}
                  >
                    1
                  </b>
                )}
              </div>
              <div
                style={{
                  marginTop: '300px',
                }}
              >
                <button>submit</button>
              </div>
            </form>
          </div>
        </Modal>
        <div style={regionStyle}>
          <button onClick={this.open}>open</button>
        </div>
      </div>
    );
  },
};
export default createDOMForm()(Form);