<template>
  <div class="div_page_bg">
    <scroller :lockX="true" :use-pulldown="true" :use-pullup="true"
              height="-10"
              :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}"
              :pullup-config="{upContent: '上拉加载更多', downContent: '释放后加载'}"
              @on-pullup-loading="loadMoreData"
              @on-pulldown-loading="refreshData"
              ref="myApplyList"
              style="margin-top: 10px">
      <div class="content-area">
        <provider-result-item v-for="(data,index) in rewards" :key="index" :reward="data"></provider-result-item>
        <div class="common-content-no-more-data-tip" v-if="!hasMoreData">{{noMoreDataTips}}</div>
      </div>
    </scroller>
    <loading v-model="loading" text="加载中"></loading>
  </div>
</template>

<script>
  import ProviderResultItem from "../../components/providerInfo/providerResultItem";
  import {queryItemPassportList} from "../../service/itemPassportService";
  import {getRewardAndPenaltyRecord} from "../../service/getData";
  export default {
    name: "providerDocumentResult",
    components: {ProviderResultItem},
    data(){
      return{
        fbId:'',
        searchText:'',
        size: 10, // 每页数量
        page: 1, // 页码
        total: 0,
        rewards:[],
        loading: false,
        hasMoreData: true,
        noMoreDataTips: '已无更多数据',
      }
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("奖罚记录");
      }
      catch (e) {

      }
      this.fbId = this.$route.query.fbId;
      this.refreshData();
    },

    methods:{
      refreshData () {
        this.loading = true

        this.page = 1

        let params = {
          fbId:this.fbId,
          pageNum:this.page,
          pageSize:this.size
        }
        let that = this
        getRewardAndPenaltyRecord(params).then((res) => {
          if (res.status === 200) {
            let data = res.data
            that.rewards = data.records
            that.total = data.total
            that.checkDataList()
          } else {
            that.showTips(res.message)
          }
          that.loading = false
          that.donePulldown()
        }).catch((err) => {
          that.util.debugLog(err)
          that.loading = false
          that.donePulldown()
          that.showTips('网络错误')
        })
      },

      checkDataList () {
        if (this.rewards.length >= this.total) {
          this.hasMoreData = false
        } else {
          this.hasMoreData = true
        }
      },
      showTips (tip) {
        this.$vux.toast.show({
          type: 'text',
          text: tip,
          position: 'bottom'
        })
      },

      loadMoreData () {
        this.page++;
        let params = {
          fbId:this.fbId,
          pageNum:this.page,
          pageSize:this.size
        }
        let that = this
        getRewardAndPenaltyRecord(params).then((res) => {
          if (res.status === 200) {
            that.rewards = that.rewards.concat(res.data.records)
            that.total = res.data.total
            that.checkDataList();
          } else {
            that.showTips(res.message)
          }
          that.donePullup();
        }).catch((err) => {
          that.util.debugLog(err)
          that.loading = false
          that.donePulldown()
          that.showTips('网络错误')
        })
        this.donePullup()
        this.hasMoreData = false;
      },
      donePulldown() {
        this.$refs.myApplyList.donePulldown()
        this.$refs.myApplyList.reset({ top: 0 });
      },

      donePullup() {
        this.$refs.myApplyList.donePullup()
        this.$refs.myApplyList.reset()
      },
      onCancel(){
        this.searchText = "";
      },
      onSubmit(){

      }
    },
    watch: {
      hasMoreData: function (newVal) {
        if (newVal) {
          this.$refs.myApplyList.enablePullup()
        } else {
          this.$refs.myApplyList.disablePullup()
        }
      },

    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100vh;
    background-color: #F7F7F7;
  }
  .content-area {
    width: 100%;
    min-height: calc(100vh - 10px);
  }
</style>
