import { Balloon, Checkbox, Form, FormItem, Icon, Input, Radio, Select } from '@alicloud/console-components';
import React, { useState } from 'react';
const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};

export const dataSource = [
  {
    value: '10001',
    label: '选项A',
  },
  {
    value: '10002',
    label: '选项B',
  },
];
export default () => {
  const [visible, setVisible] = useState(false);
  const handleSubmit = (values) => {
    // @ts-ignore
    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: '100%',
      }}
      {...formItemLayout}
    >
      <FormItem label={renderLable('输入框')}>
        <Input name="id" placeholder="请输入内容" />
      </FormItem>
      <FormItem label="选择框" required requiredMessage="请选择必选项">
        <Select
          required
          name="province"
          placeholder="请选择"
          size="medium"
          dataSource={dataSource}
          style={{
            width: 'calc(50% - 4px)',
          }}
        />
        <Select
          required
          name="city"
          placeholder="请选择"
          size="medium"
          dataSource={dataSource}
          style={{
            width: 'calc(50% - 4px)',
            marginLeft: 8,
          }}
        />
      </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="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>
      <div
        style={{
          display: 'flex',
          justifyContent: 'flex-end',
          marginTop: 16,
        }}
      >
        <Form.Submit onClick={handleSubmit} validate type="primary">
          提交
        </Form.Submit>
        <Form.Reset
          style={{
            marginLeft: 8,
          }}
          onClick={() => setVisible(!visible)}
        >
          取消
        </Form.Reset>
      </div>
    </Form>
  );
};