/**
 * title: "带搜索"
 * description: "通过 showSearch 属性控制显示搜索框。"
 */
import React from 'react';
import { Transfer } from '@alicloud/console-components';

const labels = [
  '默认项',
  '默认项',
  '默认项',
  '聚焦项',
  '默认项',
  '失效项',
  '默认项',
];
const getDataSource = () => {
  const result = [];

  for (let i = 0; i < 10; i++) {
    result.push({
      label: labels[i],
      value: `${i}`,
      disabled: i === 5,
    });
  }

  return result;
};

const handleChange = (value, data, extra) => {
  console.log(value, data, extra);
};

export default () => {
  return (
    <Transfer
      showSearch
      mode="simple"
      defaultValue={['3', '2']}
      defaultLeftChecked={['1']}
      dataSource={getDataSource()}
      onChange={handleChange}
      titles={[
        <span style={{ fontWeight: 500 }}>项目列标题</span>,
        <span style={{ fontWeight: 500 }}>项目列标题</span>,
      ]}
    />
  );
};


