/**
 * title: "基础形态交互"
 * description: "设置disabled属性，禁用组件；设置state属性，设置组件状态。"
 */
import React from 'react';
import { Form, Select } from '@alicloud/console-components';

const FormItem = Form.Item;
const onChange = (value: any) => {
  console.log(value);
};
const dataSource = [
  {
    value: '1',
    label: '默认项',
  },
  {
    value: '2',
    label: '聚焦项',
  },
  {
    value: '3',
    label: '选中项',
  },
  {
    value: '4',
    label: '默认项',
  },
  {
    value: '5',
    label: '失效项',
    disabled: true,
  },
];
const h4Style = {
  fontSize: '12px',
  marginTop: '24px',
};

export default () => {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
      <div>
        <h4 style={h4Style}>默认</h4>
        <Select
          placeholder="请选择"
          defaultValue="3"
          onChange={onChange}
          size="medium"
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      </div>
      <div>
        <h4 style={h4Style}>禁用</h4>
        <Select
          placeholder="请选择"
          onChange={onChange}
          size="medium"
          disabled
          dataSource={dataSource}
          style={{ width: '280px' }}
        />
      </div>
      <div>
        <h4 style={h4Style}>错误</h4>
        <Form labelAlign="inset" inline>
          <FormItem
            validateState="error"
            help="错误信息提示文字，上间距4px"
          >
            <Select
              placeholder="内容出错"
              state={'error'}
              dataSource={dataSource}
              style={{ marginTop: 20, width: 280 }}
            />
          </FormItem>
        </Form>
      </div>
    </div>
  );
};