import React, { PureComponent } from 'react';
import { render } from 'react-dom';
import Button from '../../button';
import confirm from '../index';
import { Demo, DemoPanel } from '../../../external/demo/index';
import Doc from './doc.md';
import '../style/v2.scss';

export default class App extends PureComponent {

  render() {
    return (
      <Demo name="Confirm" doc={<Doc />}>
        <DemoPanel title="基本使用">
          <Button onClick={() => {
            confirm((
              <ul>
                考虑到不同类型课程的报名人数和课程时长（第一节直播任务与最后一节直播任务的时间间隔）对得分的影响，我们将所有课程分为以下七类，每类课程有不同的奖励标准：
                <li>小班短课：报名人数为50人及以下，该期课程持续25天及以下</li>
                <li>小班中长课：报名人数为50及以下，该期课程持续26天~ 70天</li>
                <li>小班长课：报名人数为50人及以下，该期课程持续71天及以上</li>
                <li>中班中长课：报名人数为51人~ 120人，该期课程持续26天~ 70天</li>
                <li>中班长课：报名人数50-120，且该期课程持续71天及以上</li>
                <li>大班短课：报名人数为50人以上，且该期课程持续25天及以下</li>
                <li>大班长课：报名人数120以上，且该期课程持续25天以上</li>
              </ul>
            )).then(() => {
              alert('你确认了操作');
            }).catch(() => {
              alert('你取消了操作');
            });
          }}>执行操作</Button>
        </DemoPanel>
        <DemoPanel title="消息类型">
          <Button onClick={() => {
            confirm((
              <p>
                <strong>图片要求</strong>
                <a href="//ke.qq.com/docs/cover-description.jpg">点击查看课程封面模版规范</a>
                尺寸大于1080*608
                分辨率小于96dpi
                大小小于2M
                支持JPG/PNG/BMP等格式图片
                <span className="im-msg-sub">不知道这个副标题样式有没有用,可以留着</span>
              </p>
            ), 'alert').then(() => {
              alert('你确认了操作');
            }).catch(() => {
              alert('你取消了操作');
            });
          }}>执行alert类型操作</Button>

          <Button onClick={() => {
            confirm((
              <p>
                操作成功!
              </p>
            ), 'success').then(() => {
              alert('你确认了操作');
            }).catch(() => {
              alert('你取消了操作');
            });
          }}>执行success类型操作</Button>
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById('demo');
if (demo) {
  render(<App />, demo);
}