<template>
  <!-- template里只能有一个根节点 -->
  <div class="demo-page">
     <refresh class="refresh" onrefresh="refresh" refreshing="{{isRefreshing}}" type="{{refreshType}}">
      <div class="page-title-wrap">
          <text class="page-title ">{{componentName}}</text>
      </div>
      <div class="item-container">
        <input class="btn" type="button" value="停止刷新" onclick="stopRefresh"/>
        <input class="btn" type="button" value="{{refreshType === ‘auto‘ ? ‘开启下拉回弹效果‘ : ‘关闭下拉回弹效果‘}}" onclick="changeType"/>
      </div>
    </refresh>
  </div>
</template>

<script>
 import prompt from ‘@system.prompt‘

  export default {
    private: {
      componentName: ‘refresh‘,
      isRefreshing: false,
      refreshType: ‘auto‘
    },
    onInit () {
      this.$page.setTitleBar({text: ‘Refresh‘})
    },
    changeType () {
      this.refreshType = this.refreshType === ‘auto‘ ? ‘pulldown‘ : ‘auto‘
    },
    refresh (e) {
      const self = this
      // 更新刷新状态（属性refreshing的值从false改为true会触发refresh组件的状态更新，反之亦然）
      self.isRefreshing = e.refreshing
      setTimeout(function(){
        // 关闭刷新状态
        self.isRefreshing = false
        prompt.showToast({
          message: ‘刷新完成‘
        })
      },3000)
    },
    stopRefresh () {
      this.isRefreshing = false
    },
  }
</script>

<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
    .refresh{
    flex-direction: column;
    flex: 1;
    progress-color: #ff0000;
    background-color:#fff000;
  }

  .item-container{
    margin-bottom: 50px;
    margin-right: 60px;
    margin-left: 60px;
    flex-direction: column;
  }

  .title {
    font-size: 40px;
    text-align: center;
  }

  .btn {
    width: 550px;
    height: 86px;
    margin-top: 75px;
    border-radius: 43px;
    background-color: #09ba07;
    font-size: 30px;
    color: #ffffff;
  }
</style>