<template>
  <div class="div_page_bg">
    <div class="div_screen_value" v-if="showScreen">
      <span class="span_screen_value">{{screenText}}</span>
      <img src="../../assets/images/img_delete.png" width="20px" height="20px" @click="onDeleteScreen"/>
    </div>
    <search
      :auto-fixed="false"
      placeholder="搜索电话/姓名/路址"
      ref="search"
      v-model="searchText"
      @on-submit="onSubmit"></search>
    <scroller :lockX="true" :use-pulldown="true" :use-pullup="true"
              :height="height"
              :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}"
              :pullup-config="{upContent: '上拉加载更多', downContent: '释放后加载'}"
              @on-pullup-loading="loadMoreData"
              @on-pulldown-loading="refreshData"
              ref="myApplyList">
      <div :class="contentArea">
        <charge-record-item v-for="(data,index) in chargeRecords" :key="index" :record-item="data"></charge-record-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 Search from "vux/src/components/search/index";
  import ChargeRecordItem from "../../components/mobileCharge/chargeRecordItem";
  import {mapMutations, mapState} from "vuex";
  import util from "../../util/util";
  import {getMyLendList, getOrderRecordsByProjectAndUser} from "../../service/getData";
  export default {
    name: "chargeRecordList",
    data(){
      return {
        userId:localStorage.getItem("memberId"),
        showScreen:false,
        screenText:'',
        searchText:"",
        size: 10, // 每页数量
        page: 1, // 页码
        total: 0,
        chargeRecords:[],
        loading: false,
        hasMoreData: true,
        noMoreDataTips: '已无更多数据',
        content_area_79:"content-area-79",
        content_area_44:"content-area-44",
        height:"-44"
      }
    },
    components: {ChargeRecordItem, Search},
    computed: {
      ...mapState({
        controller: state => state.chargeScreenStore.chargeScreenLogic
      }),
      contentArea(){
        let classes = {};
        if (this.showScreen) {
          classes[this.content_area_79] = true;
        } else {
          classes[this.content_area_44] = true;
        }
        return classes;
      }
    },
    created(){
      setTimeout(() => {
        try {
          EbeiPlugins.setNavigationItemTitle("收费记录");
          EbeiPlugins.setNavigationRightButtons([{'name':'筛选','script':'goToScreen()'}]);
        }
        catch (e) {

        }
        let that = this;
        window['goToScreen'] = () => {
          this.$router.push({
            path:"chargeScreen"
          })
        };
        this.initScreen();
        this.refreshData();
      }, 200);

    },
    methods:{
      ...mapMutations('chargeScreenStore',[
          'setChargeScreenLogic',
          'clearChargeScreenLogic'
        ]
      ),
      initScreen(){
        if (util.isNotEmpty(this.controller.startTime)){
          this.showScreen = true;
          this.height = "-79";
          this.screenText = this.controller.startTime+' 到 '+this.controller.endTime+' 的收费记录'
        } else {
          this.showScreen = false;
          this.height = "-44";
          this.screenText = "";
        }
      },
      onSubmit(){
        this.refreshData();
      },
      loadMoreData(){
        this.loading = true
        this.page++;
        let params = {
          userId:this.userId,
          searchContent:this.searchText,
          beginDate:this.controller.startTime,
          endDate:this.controller.endTime,
          current:this.page,
          size:this.size,
        }
        let that = this
        getOrderRecordsByProjectAndUser(params).then((res) => {
          if (res.status === 200) {
            that.total = res.data.total;
            for (let i = 0; i < res.data.records.length; i++) {
              that.chargeRecords.push(res.data.records[i]);
            }
            that.hasMoreData = false;
            if (that.chargeRecords.length < that.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('网络错误')
        })
      },
      refreshData(){
        this.page = 1;
        this.loading = true
        let params = {
          userId:this.userId,
          searchContent:this.searchText,
          beginDate:this.controller.startTime,
          endDate:this.controller.endTime,
          current:this.page,
          size:this.size,
        }
        let that = this
        getOrderRecordsByProjectAndUser(params).then((res) => {
          that.chargeRecords = [];
          if (res.status === 200) {
            that.total = res.data.total;
            for (let i = 0; i < res.data.records.length; i++) {
              that.chargeRecords.push(res.data.records[i]);
            }
            that.hasMoreData = false;
            if (that.chargeRecords.length < that.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('网络错误')
        })
      },
      donePulldown() {
        this.$refs.myApplyList.donePulldown()
        this.$refs.myApplyList.reset({ top: 0 });
      },

      donePullup() {
        this.$refs.myApplyList.donePullup()
        this.$refs.myApplyList.reset()
      },
      onDeleteScreen(){
        this.clearChargeScreenLogic();
        this.initScreen();
      },
      showTips (tip) {
        this.$vux.toast.show({
          type: 'text',
          text: tip,
          position: 'bottom'
        })
      }
    },
    watch: {
      hasMoreData: function (newVal) {
        if (newVal) {
          this.$refs.myApplyList.enablePullup()
        } else {
          this.$refs.myApplyList.disablePullup()
        }
      },

    },
    beforeDestroy() {
      try {
        EbeiPlugins.setBackButtonAction("");
      }
      catch(e) {

      }
    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }
  .content-area-79 {
    width: 100%;
    min-height: calc(100vh - 79px);
    padding: 0 15px 15px 15px;
    background-color: white;
  }
  .content-area-44 {
    width: 100%;
    min-height: calc(100vh - 44px);
    padding: 0 15px 15px 15px;
    background-color: white;
  }
  /deep/ .weui-search-bar__label{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .div_screen_value{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.5);
    height: 35px;
    padding: 0 15px;
  }
  .span_screen_value{
    font-size: 14px;
    color: white;
  }
  .common-content-no-more-data-tip {
    width: 100%;
    height: 40px;
    font-size: 14px;
    color: #999;
    line-height: 40px;
    text-align: center;
  }
</style>
