<template>
  <div class="ui">
    <s-button size="sm">small default</s-button>
    <s-button>default</s-button>
    <s-button size="lg">large default</s-button>
    <s-button icon="remind">icon</s-button>
    <s-button type="error">icon<s-icon icon="arrow-down"/></s-button>
    <s-button type="primary">primary</s-button>
    <s-button circle type="primary">primary</s-button>
    <s-button type="error">error</s-button>
    <s-button ghost type="primary">primary</s-button>
    <s-button ghost type="error">error</s-button>
    <s-button ghost dashed type="error">error</s-button>
    <s-button ghost dashed type="primary">error</s-button>
    <s-button ghost type="primary" disabled>error</s-button>
    <s-button disabled icon="close">disabled</s-button>
    <s-button disabled link>link disabled</s-button>
    <s-button link>link</s-button>
    <s-button block>block</s-button>
    <s-modal ref="modal" title="你好" @ok="ok" @quit="quit">
      <div>大家好才是真的好</div>
    </s-modal>
    <s-button @click="clickHandle">命令模式弹框</s-button>
    <s-button type="primary" @click="showModal">自定义模版模式弹框</s-button>
    <s-button type="error" @click="showNotice(1)">通知</s-button>
    <s-button type="error" @click="showNotice(3)">简易通知</s-button>
    <s-button type="error" @click="showNotice(2)">简易通知常驻</s-button>
  </div>
</template>

<script>
export default {
  methods: {
    showModal() {
      this.$refs.modal.open();
    },
    ok() {
      alert('你点击了ok');
    },
    quit() {
      alert('你点击了quit');
    },
    showNotice(mode) {
      switch (mode) {
        case 1:
          this.$snotice({
            title: '通知',
            text: '你收到了一个通知',
            type: 'info',
            btnTxt: '很好',
          });
          break;
        case 2:
          this.$snotice({
            title: '通知',
            type: 'error',
            duration: 0,
          });
          break;
        case 3:
          this.$snotice({
            title: '通知',
            type: 'error',
          });
          break;
      }
    },
    clickHandle() {
      this.$smodal({
        title: '提醒',
        text: '大家快来点我吧',
        type: 'info',
        btns: 2,
        okTxt: '一秒后消失',
        quitTxt: '取消',
        onOk(resolve) {
          setTimeout(() => {
            resolve();
          }, 1000);
        },
        onQuit() {},
        async: true,
        mask: false,
      });
    },
  },
};
</script>
