<template>
  <div class="page-indicator">
    <co-header fixed title="Indicator">
      <fallback slot="left"></fallback>
    </co-header>

    <div class="page-indicator-wrapper co-wrapper">
      <co-cell title="点击弹出 Indicator" @click.native="openIndicator"></co-cell>
      <co-cell title="自定义点击弹出 Indicator" @click.native="openIndicator1"></co-cell>
      <co-cell title="可配置 spinner" @click.native="openIndicatorWithSpinner"></co-cell>
      <co-cell title="点击弹出带有文字的 Indicator" @click.native="openIndicatorWithText"></co-cell>
    </div>
  </div>
</template>

<script type="es6">
  export default {
    methods: {
      openIndicator() {
        this.$indicator.open();
        setTimeout(() => this.$indicator.close(), 2000);
      },
      openIndicator1() {
        this.$indicator.open({ className: 'co-indicator-default' });
        setTimeout(() => this.$indicator.close(), 2000);
      },
      openIndicatorWithSpinner() {
        var self = this;
        this.$indicator.open({ spinnerType: 'double-bounce' });
        setTimeout(() => self.$indicator.close(), 2000);
      },

      openIndicatorWithText() {
        var self = this;
        this.$indicator.open('加载中...');
        setTimeout(() => self.$indicator.close(), 2000);
      }
    },

    beforeDestroy() {
      this.$indicator.close();
    }
  };
</script>
