import React from 'react';
import { Button, Popconfirm, message, Row, Col } from '@btri-ui/base';

export default () => {
  const cancel = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    message.error('Click on No');
  };

  const confirm = (e: React.MouseEvent<HTMLElement>) => {
    message.success('Click on confirm');
  };

  const typeList = [
    {
      type: 'primary',
      btnype: 'primary',
      label: '默认',
      title: '提示事件确认',
    },
    {
      type: 'warning',
      btnype: 'alarm',
      label: '警告',
      title: '警示事件确认',
    },
    { type: 'error', btnype: 'error', label: '错误', title: '错误事件确认' },
  ];
  return (
    <Row>
      {typeList.map(item => {
        return (
          <Col span="4" key={item.type}>
            <Popconfirm
              title={item.title}
              onConfirm={confirm}
              onCancel={cancel}
              type={item.type}
            >
              <Button type={item.btnype}>{item.label}</Button>
            </Popconfirm>
          </Col>
        );
      })}
    </Row>
  );
};