<template>
  <div>
    <panel title='modal-event'>
      <div style='flex-direction:row'>
        <button class='mr-base' type="info" size="middle" value="toast" @click.native="toastClick"></button>
      </div>

      <div style='flex-direction:row'>
        <button class='mr-base' type="info" size="middle" value="alert" @click.native="alertClick"></button>
      </div>

      <div style='flex-direction:row'>
        <button class='mr-base' type="info" size="middle" value="confirm" @click.native="confirmClick"></button>
      </div>

      <div style='flex-direction:row'>
        <button class='mr-base' type="info" size="middle" value="prompt" @click.native="promptClick"></button>
      </div>

      <panel title='校验结果：'>
        <text style="font-size:30px">{{toastResult}}</text>
        <text style="font-size:30px">{{alertResult}}</text>
        <text style="font-size:30px">{{confirmResult}}</text>
        <text style="font-size:30px">{{promptResult}}</text>
      </panel>
    </panel>
    <wxc-desc>
      <text class='desc'>
测试点：
  * 测试modal的四个接口：toast、alert、confirm、prompt

测试方式：
  * 调用toast、alert、confirm、prompt，查看是否符合预期

      </text>
    </wxc-desc>
  </div>
</template>
<script>

  var modal = weex.requireModule("modal");
  module.exports = {
    data : {
      toastResult:'',
      alertResult:'',
      confirmResult:'',
      promptResult:'',
    },
    components: {
      "wxc-desc":require('../include/wxc-desc.vue'),
      panel: require('../include/panel.vue'),
      button: require('../include/button.vue'),
    },
    methods : {
      toastClick:function() {
        modal.toast({
          'message': 'message',
          'duration': 3,
        });
        this.toastResult = 'Toast success';
      },

      alertClick:function() {
        var params = {
          'message':'message',
          'okTitle':'OK',
        }
        modal.alert(params,()=>{
          this.alertResult = 'Alert success';
        });
      },

      confirmClick:function() {
        modal.confirm({
          'message': 'msg',
          'okTitle': 'ok',
          'cancelTitle': 'cancel',
        }, ()=>{
          this.confirmResult = "Confirm success";
        });
      },

      promptClick:function() {
        modal.prompt({
          'message': 'I am Prompt!',
          'okTitle': 'ok',
          'cancelTitle': 'cancel'
        }, ()=>{
          this.promptResult = "Prompt success";
        });
      },

    }
  }
</script>

<style scoped>
  .origin{background-color: #FFFFDF;width: 200;height: 50;}
  .mr-base{
    margin: 10px;
  }
  .desc{
    color:#aa0000;
    font-size: 30px;
  }
</style>