/**
 * title: "信息录入/搜索"
 * description: "通过设置align属性设置气泡出现方向，气泡内容通过Children自定义。"
 */
import React from 'react';
import { Balloon, Button, Icon, Input } from '@alicloud/console-components';

const but = (
  <Button
    style={{
      margin: '25px 0 25px 400px',
      background: '#E5E5E5',
    }}
  />
);
const ExtraWithInputOrSearch = {
  trigger: but,
  content: (
    <div style={{ width: '266px' }}>
      <Input
        innerBefore={<Icon style={{ marginLeft: '16px' }} type="search" />}
        placeholder="请输入内容"
      />
      <div style={{ marginTop: '8px' }}>
        <Button type="primary" size="small" style={{ marginRight: '8px' }}>
          确定
        </Button>
        <Button type="normal" size="small">
          取消
        </Button>
      </div>
    </div>
  ),
};
export default () => {
  return (
    <Balloon
      triggerType="click"
      align="l"
      trigger={ExtraWithInputOrSearch.trigger}
      closable={false}
    >
      {ExtraWithInputOrSearch.content}
    </Balloon>
  );
};