# Form 表单

import Form from "@sula/form";

  {
    span: 24;
    offset: 0;
    gutter: 24;
    labelCol: {
      span: 8,
    };
    wrapperCol: {
      span: 12,
    }
  }

// 基本写法
container: <div style={{ border: '1px solid #000' }}/>

// 配置化方法写法
container: (ctx) => {
  return <Card title={ctx.layout} />;
}

// 配置化属性写法：
container: {
  type: 'card',
  props: {
    title: 'Title',
  }
}

{
  container: {
    type: 'div',
    props: {
      style: {
        padding: 4,
        border: '1px solid tomato',
      }
    },
  },
  initialVisible: false,
  dependency: {
    visible: {
      relates: ['type'],
      inputs: [
        ['content']
      ],
      output: true,
      defaultOutput: false,
    }
  },
  fields: [{
    name: 'contentInput',
    render: 'input',
    label: '内容输入框',
  }]
}

fields: [
  {
    name: "sula",
    label: "Sula",
    render: "input"
  }
];

remoteValues: {
  url: '表单初始值数据请求地址',
  method: '请求方法',
  params: {
    // 请求参数
  },
  converter: (ctx, config) => {
    //请求返回数据转化 可通过ctx.data获取接口返回数据
  },
}

<Form
  state={{
    name: this.state.name
  }}
  fields={[
    {
      name: "input",
      label: "input",
      render: ctx => {
        return <Input placeholder={ctx.state.name} />;
      }
    }
  ]}
/>

setFields([
  {
    name: "input",
    value: "sula",
    touched: true,
    validating: false,
    errors: ["Sula is required"]
  }
]);

setFieldSource("checkboxgroup", [
  { text: "Sula", value: "sula" },
  { text: "AntD", value: "antd" }
]);

setFieldDisabled("input", true);

setFieldsValue({
  input: "sula",
  checkboxgroup: "antd"
});

setFieldValue("input", "sula");

setFieldVisible("input", false);

// sula代表了groupName
validateGroupFields("sula").then(data => {
  // 校验通过
  fetch({
    url: '/api/info',
    method: 'POST',
    params: data,
  })
}, (error) => {
  // 校验不通过
});

validateFields().then(data => {
  // 校验通过，发起请求或者其他操作
  fetch({
    url: '/api/info',
    method: 'POST',
    params: data,
  })
}, (error) => {
  // 校验不通过
});

getFieldValue("sula");

getFieldsValue();

resetFields();

submit();

const fields = [
  {
    name: "input",
    label: "Input",
    render: ctx => {
      return <Input disabled={ctx.disabled} />;
    }
  }
];

"fields": [
  {
    "container": {
      "type": "card",
    },
    "fields": [
      {
        "name": [1, 'apple'],
        "label": "苹果1",
        "render": {
          "type": "input",
          "props": {
            "placeholder": "苹果1"
          }
        }
      }
    ]
  },
  {
    "container": {
      "type": "card",
    },
    "fields": [
      {
        "name": [2, 'apple'],
        "label": "苹果2",
        "render": {
          "type": "input",
          "props": {
            "placeholder": "苹果2"
          }
        }
      }
    ]
  },
  {
    "container": {
      "type": "card",
    },
    "fields": [
      {
        "name": [3, 'apple'],
        "label": "苹果3",
        "render": {
          "type": "input",
          "props": {
            "placeholder": "苹果3"
          }
        }
      }
    ]
  }
]

// 配置化方法写法
render: (ctx) => {
  return <Input disabled={ctx.disabled} />
}

// 配置化属性写法
render: {
  type: 'input',
  props: {
    placeholder: 'Please input',
  }
}

rules: [
  {
    validator: ctx => {
      if (ctx.value === "ice cream") {
        return Promise.reject("Can not be ice cream");
      }
      return Promise.resolve();
    }
  },
  {
    validator: "whitespace"
  }
];

remoteSource: {
  url: 'api/tasklist.json',
  mehtod: 'get',
}

  dependency: {
    visible: { // 当type字段输入'fruit'或者'vegetables'时，可见 其余不可见
      relates: ['type'],
      inputs: [['fruit', 'vegetables']],
      output: true,
      defaultOutput: false,
    },
    source: { // type字段输入不同字段对应不同数据源
      relates: ['type'],
      cases: [
        { inputs: [['fruit']], output: fruitSource },
        { inputs: [['vegetables']], output: vegetablesSource },
      ],
      defaultOutput: [],
    },
    value: { // type变化时 清空值
      relates: ['type'],
      defaultOutput: '',
    }
  },

const groupFields = [
  {
    name: "group1",
    container: {
      type: "card",
      props: {
        title: "group1",
        style: {
          marginBottom: 16
        }
      }
    },
    fields: [
      {
        name: "input1-1",
        label: "input1-1",
        render: "input"
      },
      {
        name: "input1-2",
        label: "input",
        render: "input"
      }
    ]
  },
  {
    name: "group2",
    container: {
      type: "card",
      props: {
        title: "group2"
      }
    },
    fields: [
      {
        name: "input2-1",
        label: "input2-1",
        render: "input"
      }
    ]
  }
];