/**
 * title: "带多选标签形态交互"
 * description: "设置mode值为multiple，选择器为带多选标签形态。"
 */
import React from 'react';
import { Select } from '@alicloud/console-components';

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

export default () => {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap' }}>
      <div style={{ marginRight: '78px' }}>
        <h4 style={h4Style}>默认</h4>
        <Select
          placeholder="请选择"
          onChange={onChange}
          defaultValue={['3', '4']}
          dataSource={dataSource}
          style={{
            width: 280,
          }}
          mode="multiple"
        />
      </div>
      <div>
        <h4 style={h4Style}>禁用</h4>
        <Select
          placeholder="请选择"
          onChange={onChange}
          defaultValue={['3', '4']}
          dataSource={dataSource}
          style={{
            width: 280,
          }}
          mode="multiple"
          disabled
        />
      </div>
    </div>
  );
};