import React from 'react';

import {
  Icon,
  Balloon,
  Radio,
  Form, Input, Checkbox, Select} from '@alicloud/console-components';

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    fixedSpan: 10
  },
  wrapperCol: {
    span: 14
  }
}
export const dataSource = [
  {
    value: '10001',
    label: '选项A',
  },
  {
    value: '10002',
    label: '选项B',
  },
];

export default () => {
  const handleSubmit = (values) => {
    console.log('Get form value:', values)
  }
  const renderLable = (text: string) => (
    <span>
      {text}
      <Balloon
        type="primary"
        trigger={<Icon style={{ marginLeft: 4, display: 'inline-flex' }} type="help" size="xs" />}
        closable={false}
      >
        blablablablablablablabla
      </Balloon>
    </span>
  )
  return <Form style={{ width: '50%' }} {...formItemLayout} labelAlign="top">
    <FormItem label={renderLable('输入框')}>
      <Input
        name="id"
        placeholder="请输入内容"
      />
    </FormItem>
    <FormItem label={renderLable('必选项')} required requiredMessage="请输入必选项">
      <Select
        name='required_data'
        placeholder="请选择"
        size="medium"
        dataSource={dataSource}
        style={{ width: '100%' }}
      />
    </FormItem>
    <FormItem label="多个下拉框组合">
      <div style={{ display: 'flex', gap: '8px' }}>
        <Select
          name='province'
          placeholder="请选择"
          size="medium"
          dataSource={dataSource}
          style={{ width: '33%' }}
        />
        <Select
          name='city'
          placeholder="请选择"
          size="medium"
          dataSource={dataSource}
          style={{ width: '33%' }}
        />
        <Select
          name='county'
          placeholder="请选择"
          size="medium"
          dataSource={dataSource}
          style={{ width: '33%' }}
        />
      </div>
      <Select
        name='address'
        placeholder="请选择"
        size="medium"
        dataSource={dataSource}
        style={{ width: '100%', marginTop: '8px' }}
      />
    </FormItem>
    <FormItem label="单选选项">
      <Radio.Group name="radio" direction="ver">
        <Radio value="apple">选项1</Radio>
        <Radio value="banana">选项2</Radio>
        <Radio disabled value="cherry">
          选项3
        </Radio>
      </Radio.Group>
    </FormItem>
    <FormItem label="多选选项">
      <Checkbox.Group name="checkbox" direction="ver">
        <Checkbox value="a">选项1 </Checkbox>
        <Checkbox value="b">选项2</Checkbox>
        <Checkbox disabled value="c">
          选项3
        </Checkbox>
      </Checkbox.Group>
    </FormItem>
    <FormItem label="多选选项有备注">
      <Checkbox.Group name="checkboxs" direction="ver">
        <Checkbox value="a">
          选项1
          <p style={{ margin: '0 0 4px 24px', color: '#808080', fontSize: '12px', height: 0 }}>对于选项的描述/解释文案，#808080，12px</p>
        </Checkbox>
        <Checkbox value="b">
          选项2
          <p style={{ margin: '0 0 4px 24px', color: '#808080', fontSize: '12px', height: 0 }}>对于选项的描述/解释文案，#808080，12px</p>
        </Checkbox>
      </Checkbox.Group>
    </FormItem>
    <FormItem label="" style={{ marginTop: 24 }}>
      <Form.Submit onClick={handleSubmit} validate type="primary">提交</Form.Submit>
      <Form.Reset style={{ marginLeft: 8 }}>取消</Form.Reset>
    </FormItem>
  </Form>
};