<template>
<!-- #ifdef WEB -->
  <view>
  <!-- #endif -->
    <list-view class="list-view" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
      refresher-default-style="none" @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"
      @refresherrestore="onRefreshrestore" :refresher-threshold="refresherThreshold" refresher-max-drag-distance="200px">

      <sticky-header>
        <view class="header">
          <text>sticky header</text>
        </view>
      </sticky-header>
      <list-item v-for="i in 20" class="content-item">
        <text class="text">item-{{i}}</text>
      </list-item>
      <refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
    </list-view>
  <!-- #ifdef WEB -->
  </view>
  <!-- #endif -->
</template>

<script>
  import refreshBox from './refresh-box/refresh-box.uvue';
  export default {
    components: { refreshBox },
    data() {
      return {
        refresherTriggered: false,
        refresherThreshold: 40,
        pullingDistance: 0,
        resetting: false
      }
    },
    computed: {
      state() : number {
        if (this.resetting) {
          return 3;
        }
        if (this.refresherTriggered) {
          return 2
        }
        if (this.pullingDistance > this.refresherThreshold) {
          return 1
        } else {
          return 0
        }
      }
    },
    methods: {
      onRefresherpulling(e : RefresherEvent) {
        // console.log('onRefresherpulling',e.detail.dy)
        this.pullingDistance = e.detail.dy
      },
      onRefresherrefresh() {
        this.refresherTriggered = true
        setTimeout(() => {
          this.refresherTriggered = false
          this.resetting = true
        }, 1500)
      },
      onRefreshrestore() {
        this.pullingDistance = 0
        this.resetting = false;
      }
    }
  }
</script>

<style>
  .list-view {
    flex: 1;
    background-color: #f5f5f5;
  }

  .header {
    justify-content: center;
    height: 50px;
    background-color: #f5f5f5;
    padding: 15px;
  }

  .content-item {
    padding: 15px;
    margin: 5px 0;
    background-color: #fff;
    border-radius: 5px;
  }

  .text {
    font-size: 14px;
    color: #666;
    line-height: 20px;
  }
</style>