/**
 * title: "操作型"
 * description: "通过设置align属性设置气泡出现方向，气泡内容通过Children自定义。"
 */
import React from 'react';
import { Balloon, Button } from '@alicloud/console-components';

const titleStyle = {
  fontSize: '12px',
  fontWeight: 500,
  lineHeight: '20px',
  marginBottom: '8px',
};
const centerStyle = {
  lineHeight: '20px',
  fontSize: '12px',
  fontWeight: 'normal',
};

const but = (
  <Button
    id="topRight"
    style={{
      margin: '25px 0 25px 400px',
      background: '#E5E5E5',
    }}
  />
);
const ExtraWithOperation = {
  trigger: but,
  content: (
    <div style={{ width: '266px' }}>
      <div style={titleStyle}>第一步标题</div>
      <span style={centerStyle}>
        点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。点击/鼠标移入元素，弹出气泡浮层，内容文案超出长度后允许自动换行。
      </span>
      <div style={{ marginTop: 8 }}>
        <Button type="primary" size="small">
          下一步
        </Button>
      </div>
    </div>
  ),
};

export default () => {
  return (
    <Balloon align="l" trigger={ExtraWithOperation.trigger} triggerType="click">
      {ExtraWithOperation.content}
    </Balloon>
  );
};