<template>
  <div class="div_page_bg">
    <search
      :auto-fixed="false"
      placeholder="合同名称"
      v-model="searchText"
      ref="search"
      @on-cancel="onCancel"
      @on-submit="onSubmit"></search>
    <tab custom-bar-width="30px">
      <tab-item  v-for="(data,index) in types" :key="index" :selected="index === 0" @on-item-click="onClickType(index)">{{data.typeName}}</tab-item>
    </tab>
    <scroller :lockX="true" :use-pulldown="true" :use-pullup="true"
              height="-88"
              :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}"
              :pullup-config="{upContent: '上拉加载更多', downContent: '释放后加载'}"
              @on-pullup-loading="loadMoreData"
              @on-pulldown-loading="refreshData"
              ref="myApplyList">
      <div class="content-area">
        <provider-agreement-item v-for="(data,index) in agreements" :key="index" :agreement="data"></provider-agreement-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 ProviderAgreementItem from "../../components/providerInfo/providerAgreementItem";
  import {getContract} from "../../service/getData";
  export default {
    name: "providerDocumentAgreement",
    components: {ProviderAgreementItem},
    data(){
      return{
        searchText:'',
        types:[],
        typeId:'',
        agreements:[],
        companyId:'',
        fbId:'',
        size: 10, // 每页数量
        page: 1, // 页码
        total: 0,
        loading: false,
        hasMoreData: true,
        noMoreDataTips: '已无更多数据',
      }
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("合同列表");
      }
      catch (e) {

      }
      this.companyId = this.$route.query.companyId;
      this.fbId = this.$route.query.fbId;
      this.types = JSON.parse(localStorage.getItem("types"));
      if (this.types.length !== 0) {
        this.typeId = this.types[0].typeId;
      }
      this.refreshData()
    },
    methods:{

      refreshData () {
        this.loading = true
        this.page = 1
        let params = this.makeListQueryParams()
        let that = this
        getContract([this.size,this.page],params).then((res) => {
          if (res.status === 200) {
            that.agreements = [];
            for (let i = 0; i < res.data.records.length; i++) {
              that.agreements.push(res.data.records[i]);
            }
            that.hasMoreData = false;
            if (that.agreements.length < res.data.total) {
              that.hasMoreData = true;
            }
          } else {
            that.showTips(res.message)
          }
          that.loading = false
          that.donePulldown()
        }).catch((err) => {
          that.util.debugLog(err)
          that.loading = false
          that.donePulldown()
          that.showTips('网络错误')
        })
      },
      makeListQueryParams () {
        let params = {
          fbId: this.fbId,
          typeId: this.typeId,
          contractName:this.searchText
        }
        return params
      },

      checkDataList () {
        if (this.applyList.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 = this.makeListQueryParams()
        let that = this
        getContract([this.size,this.page],params).then((res) => {
          if (res.status === 200) {
            for (let i = 0; i < res.data.records.length; i++) {
              that.agreements.push(res.data.records[i]);
            }
            that.hasMoreData = false;
            if (that.agreements.length < res.data.total) {
              that.hasMoreData = true;
            }
          } else {
            that.showTips(res.message)
          }
        }).catch((err) => {
          that.util.debugLog(err)
          that.loading = false
          that.donePulldown()
          that.showTips('网络错误')
        })
      },
      donePulldown() {
        this.$refs.myApplyList.donePulldown()
        this.$refs.myApplyList.reset({ top: 0 });
      },

      donePullup() {
        this.$refs.myApplyList.donePullup()
        this.$refs.myApplyList.reset()
      },
      onCancel(){
        this.searchText = "";
      },
      onSubmit(){
        this.refreshData();
      },
      onClickType(index){
        this.typeId = this.types[index].typeId;
        this.refreshData();
      }
    },
    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 - 88px);
  }
  /deep/ .scrollable .vux-tab-item{
    flex: 0 0 30%;
  }
</style>
