import React from 'react';
import { Form, Col, Select, Input, Button } from 'antd';
let id = 0;
const Table = ({ getFieldDecorator, getFieldValue, data, form }) => {
  getFieldDecorator('keys', { initialValue: [] });

  const renderForm = () => {
    getFieldDecorator('keys', { initialValue: data.columns });
    const keys = getFieldValue('keys');
    return keys.map((item, idx) => (
      <div key={idx}>
        <Col span={12}>
          <Form.Item>
            {getFieldDecorator(`title[${idx}]`, {
              initialValue: item.title
            })(<Input  placeholder="请填写title" />)}
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item>
            {getFieldDecorator(`key[${idx}]`, {
              initialValue: item.key
            })(<Input  placeholder="请填写key" />)}
          </Form.Item>
        </Col>
      </div>
    ));
  };

  const onHandleAdd = () => {
    const keys = getFieldValue('keys');
    const nextKeys = keys.concat(id++);
    form.setFieldsValue({
      keys: nextKeys
    });
  };

  return (
    <>
      <Col span={24}>
        <Form.Item label="表格大小">
          {getFieldDecorator('size', {
            initialValue: data.size || 'default'
          })(
            <Select style={{ width: 200 }}>
              <Select.Option value="middle" key="middle">
                middle
              </Select.Option>
              <Select.Option value="default" key="default">
                default
              </Select.Option>
              <Select.Option value="small" key="small">
                small
              </Select.Option>
            </Select>
          )}
        </Form.Item>
      </Col>
      <Col span={24}>
        <Form.Item label="表头数据:">
        </Form.Item>
      </Col>
      {renderForm()}
      <Col span={24}>
        <Form.Item>
          <Button type="primary" size="small" icon="plus" style={{ marginLeft: 20, width: 250 }} onClick={() => onHandleAdd()}>
            新增
          </Button>
        </Form.Item>
      </Col>
    </>
  );
};

export default Table;