import '../assets/index.less';
import TreeSelect from '../index';
import Select from '../../vc-select';
import { createForm } from '../../vc-form';
import { regionStyle, errorStyle } from './styles';
import { gData } from './util';
import '../../vc-select/assets/index.less';
import './demo.less';

const { Option } = Select;

const TreeSelectInput = {
  props: ['multiple', 'treeData', 'treeCheckable', 'value'],
  methods: {
    onChange(value) {
      console.log(value, arguments);
      this.$emit('change', value);
    },
  },

  render() {
    return <TreeSelect {...{ props: this.$props }} onChange={this.onChange} />;
  },
};

const Form = {
  methods: {
    onSubmit(e) {
      console.log('submit');
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          console.log('ok', values);
        } else {
          console.log('error', error, values);
        }
      });
    },
    reset(e) {
      e.preventDefault();
      this.form.resetFields();
    },
  },

  render() {
    const { form } = this;
    const { getFieldDecorator, getFieldError } = form;
    const tProps = {
      props: {
        multiple: true,
        treeData: gData,
        treeCheckable: true,
        __propsSymbol__: Symbol(),
        // treeDefaultExpandAll: true,
      },
    };
    return (
      <div style={{ margin: '20px' }}>
        <h2>validity</h2>
        <form onSubmit={this.onSubmit}>
          <div style={regionStyle}>
            <div>
              <p style={{ color: 'blue' }}>no onChange</p>
              {getFieldDecorator('tree-select', {
                initialValue: ['0-0-0-value'],
                rules: [{ required: true, type: 'array', message: 'tree-select 需要必填' }],
              })(<TreeSelect {...tProps} style={{ width: '300px' }} />)}
            </div>
            <p style={errorStyle}>
              {getFieldError('tree-select') ? getFieldError('tree-select').join(',') : null}
            </p>
          </div>

          <div style={regionStyle}>
            <div>
              <p style={{ color: 'blue' }}>custom onChange</p>
              {getFieldDecorator('tree-select1', {
                initialValue: ['0-0-0-value'],
                rules: [{ required: true, type: 'array', message: 'tree-select1 需要必填' }],
              })(
                <TreeSelectInput
                  {...tProps}
                  style={{ width: '300px' }}
                  // treeData={gData}
                />,
              )}
            </div>
            <p style={errorStyle}>
              {getFieldError('tree-select1') ? getFieldError('tree-select1').join(',') : null}
            </p>
          </div>

          <div style={regionStyle}>
            {getFieldDecorator('select', {
              initialValue: ['jack'],
              rules: [{ required: true, type: 'array', message: 'select 需要必填' }],
            })(
              <Select style={{ width: '200px' }} allowClear multiple>
                <Option value="jack">jack</Option>
                <Option value="lucy">lucy</Option>
                <Option value="disabled" disabled>
                  disabled
                </Option>
                <Option value="yiminghe">yiminghe</Option>
              </Select>,
            )}
            <p style={errorStyle}>
              {getFieldError('select') ? getFieldError('select').join(',') : null}
            </p>
          </div>

          <div style={regionStyle}>
            <button onClick={this.reset}>reset</button>
            &nbsp;
            <input type="submit" value="submit" />
          </div>
        </form>
      </div>
    );
  },
};

export default createForm()(Form);