<template>
  <div class="div_page_bg">
    <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>
    <div class="div_count">
      <span class="span_count">招标次数 {{rate.totalCount}}</span>
      <span class="span_count">投标率 {{rate.bidRate}}</span>
      <span class="span_count">中标率 {{rate.winningBidRate}}</span>
    </div>
    <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-tender-item v-for="(data,index) in tenders" :key="index" :tender="data"></provider-tender-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 ProviderTenderItem from "../../components/providerInfo/providerTenderItem";
  import {queryItemPassportList} from "../../service/itemPassportService";
  import {getInfoTypeRate, getTenderRecord} from "../../service/getData";
  export default {
    name: "providerDocumentTender",
    components: {ProviderTenderItem},
    data(){
      return{
        fbId:'',
        searchText:'',
        types:[],
        typeId:'',
        // year:this.util.formatYear(new Date()),
        year:'2018',
        tenders:[],
        rate:{},
        size: 10, // 每页数量
        page: 1, // 页码
        total: 0,
        loading: false,
        hasMoreData: true,
        noMoreDataTips: '已无更多数据',
      }
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("投标记录");
        EbeiPlugins.setNavigationRightButtons([{'name':'year','script':'goToYear()'}]);
      }
      catch (e) {

      }
      let that = this;
      window['goToYear'] = () => {
        that.showStartDatePicker();
      };
      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.getInfoTypeRateJs();
      this.refreshData();
    },
    methods:{
      getInfoTypeRateJs(){
        let that = this;
        let params = {
          fbId:this.fbId,
          typeId:this.typeId
        }
        getInfoTypeRate(params).then(res => {
          if (res.status === 200) {
            that.rate = res.data;
          }
        }).catch(error => {

        });

      },
      refreshData () {
        this.loading = true

        this.page = 1

        let params = {
          fbId:this.fbId,
          typeId:this.typeId,
          pageNum:this.page,
          pageSize:this.size,
          year:this.year
        }
        let that = this
        getTenderRecord(params).then((res) => {
          if (res.status === 200) {
            let data = res.data
            that.total = data.total
            that.tenders = data.records
            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.tenders.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,
          typeId:this.typeId,
          pageNum:this.page,
          pageSize:this.size,
          year:this.year
        }
        let that = this
        getTenderRecord(params).then((res) => {
          if (res.status === 200) {
            that.tenders = that.tenders.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 = "";
      },
      onClickType(index){
        this.typeId = this.types[index].typeId;
        this.getInfoTypeRateJs();
        this.refreshData();
      },
      onSubmit(){

      },
      showStartDatePicker () {
        let currDate = this.year;
        let that = this
        this.$datePickerUtil.showDatePicker(this, 'YYYY', '', currDate, (dateStr) => {
          that.year = dateStr;
          that.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);
  }
  .div_count{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 44px;

  }
  .span_count{
    font-size: 12px;
    color: #999999;
  }

  /deep/ .scrollable .vux-tab-item{
    flex: 0 0 30%;
  }
</style>
