/**
 * title: "下拉带搜索形态"
 * description: "自定义 menuProps 实现下拉带搜索形态"
 */
import React from 'react';
import {
  Select,
  Input,
  Button,
  Icon,
  Divider,
} from '@alicloud/console-components';

const onChange = (value: any) => {
  console.log(value);
};
const dataSource1 = [
  {
    value: '1',
    label: '默认项',
  },
  {
    value: '2',
    label: '聚焦项',
  },
  {
    value: '3',
    label: '选中项',
  },
  {
    value: '4',
    label: '默认项',
  },
  {
    value: '5',
    label: '失效项',
    disabled: true,
  },
];
const dataSource = [
  { label: '内容描述，文案超出长度后允许自动换行，内容描述', value: '1' },
  { label: '内容描述，文案超出长度后允许自动换行，内容描述', value: '2' },
];
const menuProps1 = {
  focusable: false,
  header: (
    <div style={{ padding: '0 4px', textAlign: 'center' }}>
      <div style={{ paddingBottom: 4 }}>
        <Input
          size="small"
          placeholder="请输入内容"
          label={<Icon type="search" />}
        />
      </div>
    </div>
  ),
  footer: (
    <div style={{ padding: '0 4px', textAlign: 'center', margin: '0 -4px' }}>
      <Divider style={{ marginBottom: 0, marginTop: 4 }} />
      <Button text type="primary">
        Load More...
      </Button>
    </div>
  ),
};
const menuProps2 = {
  focusable: false,
  header: (
    <div style={{ padding: '4px 4px 0' }}>
      <div style={{ display: 'flex', paddingBottom: 4 }}>
        <Input
          size="small"
          placeholder="请输入内容"
          label={<Icon type="search" />}
        />
        <Button size="small" style={{ marginLeft: '8px', width: '24px', padding: 0, flexShrink: 0 }}>
          <Icon type="arrow_circular" />
        </Button>
      </div>
    </div>
  ),
  footer: (
    <div style={{ padding: '0 4px', margin: '0 -4px' }}>
      <Divider style={{ marginBottom: 0, marginTop: 4 }} />
      <div style={{ paddingLeft: 8 }}>
        <Button text type="primary">
          前往创建ECS
        </Button>
        <Icon type="external" />
      </div>
    </div>
  ),
};
const menuProps3 = {
  focusable: false,
  header: (
    <div style={{ padding: '4px 4px 0' }}>
      <div style={{ display: 'flex', paddingBottom: 4 }}>
        <Input
          size="small"
          placeholder="请输入内容"
          label={<Icon type="search" />}
        />
        <Button size="small" style={{ marginLeft: '8px', width: '24px', padding: 0, flexShrink: 0 }}>
          <Icon type="arrow_circular" />
        </Button>
      </div>
    </div>
  ),
  footer: (
    <div style={{ margin: '0 8px' }}>
      搜索结果：没有找到相关实例
      <Divider style={{ marginBottom: 0, marginTop: 4 }} />
      <div>
        无实例原因
        <p>
          1. A原因造成 <a href="#">解决方案a</a>
          <br />
          2. B原因造成 <a href="#">解决方案b</a>
        </p>
      </div>
    </div>
  ),
};
export default () => {
  return (
    <div>
      <h4 style={{ fontSize: '12px' }}>默认</h4>
      <Select
        showSearch
        placeholder="请选择"
        onChange={onChange}
        dataSource={dataSource1}
        style={{
          width: '280px',
        }}
        mode="multiple"
        menuProps={menuProps1}
      />
      <h4 style={{ fontSize: '12px', marginTop: '24px' }}>带刷新搜索默认</h4>
      <Select
        mode="multiple"
        dataSource={dataSource}
        style={{ width: '280px' }}
        menuProps={menuProps2}
        popupAutoFocus
      />
      <h4 style={{ fontSize: '12px', marginTop: '24px' }}>带刷新搜索无结果</h4>
      <Select
        mode="multiple"
        style={{ width: '280px' }}
        menuProps={menuProps3}
        popupAutoFocus
        dataSource={[]}
      />
    </div>
  );
};