<template>
  <div class="page-msgbox">
    <co-header fixed title="Message Box">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="page-msgbox-wrapper co-wrapper">
      <co-cell title="打开 alert 提示框" @click.native="openAlert"></co-cell>
      <co-cell title="打开 confirm 提示框" @click.native="openConfirm"></co-cell>
      <co-cell title="打开 prompt 提示框" @click.native="openPrompt"></co-cell>
    </div>
  </div>
</template>

<script type="text/babel">
  export default {
    methods: {
      openAlert() {
        this.$messagebox.alert('操作成功!', '提示');
      },

      openConfirm() {
        this.$messagebox.confirm('确定执行此操作?', '提示').catch(function(reason) {
          console.log('取消' + reason);
        });
      },

      openPrompt() {
        var self = this;
        this.$messagebox.prompt(' ', '请输入姓名', {inputPattern: /^.{0,10}$/, inputErrorMessage: '最多可输入10个字符'}).then(({ value }) => {
          if (value) {
            self.$messagebox.alert(`你的名字是 ${value}`, '输入成功');
          }
        }).catch(function(reason) {
          console.log('取消' + reason);
        });
      }
    }
  };
</script>
