<template>
    <div class="page-cell">
        <co-header title="UI组件">
            <a @click="goBack()" slot="left">
                <co-button icon="back"></co-button>
            </a>
        </co-header>
        <div class="wrapper">
            <co-cell @click.native="nativeAlert" title="弹出只有一个确定按钮的对话框"></co-cell>
            <co-cell @click.native="nativeConfirm" title="弹出一个确认框"></co-cell>
            <co-cell @click.native="nativePrompt" title="弹出包含两个按钮且带输入框的对话框"></co-cell>
            <co-cell @click.native="toast()" title="自动消失的提示框"></co-cell>
            <co-cell @click.native="openDateTimePicker" title="时间选择器"></co-cell>
        </div>
    </div>
</template>
<style>
</style>
<script>
  export default {
    data() {
      return {
        nativeList: []
      };
    },
    methods: {
      goBack: function() {
        history.go(-1);
      },
      //  弹出一个按钮框
      nativeAlert: function() {
        let params = {
          title: '系统提示信息',
          msg: '下雨了，该收衣服了！'
        };
        // 执行
        corNative.alertDlg(params, function(error, data) {

          // data = corJS.strToJson(data);
          if (!error) {
            alert('位置： ' + data.buttonIndex);
          } else {
            alert('error');
          }

        });
      },
      // 弹出一个确认框
      nativeConfirm: function() {
        let params = {
          title: '系统提示信息',
          msg: '下雨了，该收衣服了！',
          buttons: ['忽略', '知道了']
        };
        // 执行
        corNative.confirmDlg(params, function(error, data) {
          //  data = corJS.strToJson(data);
          if (!error) {
            alert('位置： ' + data.buttonIndex);
          } else {
            alert('error');
          }
        });
      },
      // 弹出带输入框的按钮
      nativePrompt: function() {
        corNative.promptDlg({
          title: '提示',
          message: '请输入内容:',
          defaultValue: '',
          buttonLabels: '取消,确定'
        }, function(index, data) {
          if (index === 1) {
            corNative.alertDlg({
              'title': '提示',
              message: '您输入的内容是：' + data,
              buttonLabel: '确定'
            });
          }
        });
      },
      // 自动消息的提示框
      toast: function() {
        // 入参
        let params = {
          type: 0,
          duration: 3000,
          msg: '我会自动消失的'
        };
        // 执行
        corNative.toastDlg(params);
      },
      // 时间选择器
      openDateTimePicker: function() {
        // 入参
        let params = {
          title: '请选择'
        };
        // 执行
        corNative.openDateTimePicker(params, function(error, data) {
          if (error === 0) {
            alert(JSON.stringify(data));
          } else {
            alert('error');
          }
        });
      }
    },
    created() {
      window.vm = this;
    }
  };
</script>

