<template>
  <div class="div_page_bg">
    <div style="padding: 10px">
      <button-tab v-model="tabIndex">
        <button-tab-item @on-item-click="onClickItem">未归还({{lendCount+toLendCount}})</button-tab-item>
        <button-tab-item @on-item-click="onClickItem">已归还({{noLendCount}})</button-tab-item>
      </button-tab>
    </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="-96"
              :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}"
              :pullup-config="{upContent: '上拉加载更多', downContent: '释放后加载'}"
              @on-pullup-loading="loadMoreData"
              @on-pulldown-loading="refreshData"
              ref="myApplyList">
      <div class="content-area">
        <device-borrow-item :show-back="false" :back-dismiss="false" v-for="(data,index) in deviceList" :key="index" :device-detail="data" :show-lend-name="tabIndex===0"></device-borrow-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 ButtonTab from "vux/src/components/button-tab/button-tab";
  import ButtonTabItem from "vux/src/components/button-tab/button-tab-item";
  import DeviceBorrowItem from "../../components/deviceBorrow/DeviceBorrowItem";
  import {getAdminDeviceList} from "../../service/getData";
  export default {
    name: "manageDeviceBorrowList",
    components: {DeviceBorrowItem, ButtonTabItem, ButtonTab},
    data(){
      return{
        tabIndex:0,
        userId:localStorage.getItem('memberId'),
        lendStatus:2,
        searchText:'',
        deviceList: [],
        lendCount:0,
        toLendCount:0,
        noLendCount:0,
        size: 10, // 每页数量
        page: 1, // 页码
        total: 0,
        loading: false,
        hasMoreData: true,
        noMoreDataTips: '已无更多数据',
      }
    },
    created(){
      setTimeout(() => {
        try {
          EbeiPlugins.setNavigationItemTitle("设备管理");
          EbeiPlugins.setNavigationRightButtons([{'name':'scan','script':'goToManageDetail()'}]);
        }
        catch (e) {

        }
        let that = this;
        window['goToManageDetail'] = () => {
          EbeiPlugins.scanQRCode((banCode) => {
            // let code = banCode;
            // if (banCode.indexOf("@") !== -1) {
            //   code = banCode.substring(0,banCode.indexOf("@"));
            // }
            that.$router.push({
              path: '/myDeviceBorrowDetail',
              query: {
                type:'2',
                deviceNumber:banCode
              }
            });
          }, () => {
            that.showTips('扫码失败')
          })

        };

        this.refreshData();
      }, 200);

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

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

        this.page = 1
        switch (this.tabIndex) {
          case 0:
            this.lendStatus = "1,2";
            break;
          case 1:
            this.lendStatus = 0;
            break;

        }
        let params = {
          pageIndex:this.page,
          pageSize:20,
          userId:this.userId,
          lendStatus:this.lendStatus,
          nameOrCode:this.searchText
        }
        let that = this
        getAdminDeviceList(params).then((res) => {
          that.deviceList = [];
          if (res.resultCode === 200) {
            that.lendCount = res.lendCount;
            that.toLendCount = res.toLendCount;
            that.noLendCount = res.noLendCount;
            for (let i = 0; i < res.data.length; i++) {
              that.deviceList.push(res.data[i]);
            }
            that.hasMoreData = false;
            if (that.deviceList.length < that.totalCount) {
              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('网络错误')
        })
      },

      loadMoreData () {
        this.loading = true

        this.page++;
        switch (this.tabIndex) {
          case 0:
            this.lendStatus = 1;
            break;
          case 1:
            this.lendStatus = 2;
            break;
          case 2:
            this.lendStatus = 0;
            break;

        }
        let params = {
          pageIndex:this.page,
          pageSize:20,
          userId:this.userId,
          lendStatus:this.lendStatus,
          nameOrCode:this.searchText
        }
        let that = this
        getAdminDeviceList(params).then((res) => {
          if (res.resultCode === 200) {
            for (let i = 0; i < res.data.length; i++) {
              that.deviceList.push(res.data[i]);
            }
            that.hasMoreData = false;
            if (that.deviceList.length < that.totalCount) {
              that.hasMoreData = true;
            }
          } else {
            that.showTips(res.message)
          }
          that.loading = false
          that.donePullup()
        }).catch((err) => {
          that.util.debugLog(err)
          that.loading = false
          that.donePullup()
          that.showTips('网络错误')
        })
      },
      donePulldown() {
        this.$refs.myApplyList.donePulldown()
        this.$refs.myApplyList.reset({ top: 0 });
      },

      donePullup() {
        this.$refs.myApplyList.donePullup()
        this.$refs.myApplyList.reset()
      },
      onSubmit(){
        this.refreshData();
      },
      onClickItem(){
        this.refreshData();
      },
      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()
        }
      },
    }
  }
</script>

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

  .vux-button-group /deep/ .vux-button-tab-item-first{
    border-top-left-radius:2px;
    border-bottom-left-radius:2px;
  }
  .vux-button-group /deep/ .vux-button-tab-item-last{
    border-top-right-radius:2px;
    border-bottom-right-radius:2px;
  }
  .vux-button-group /deep/ .vux-button-tab-item-middle::after{
    border-left: 1px solid #269FD5;
  }
  /deep/ .weui-search-bar__label{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .common-content-no-more-data-tip {
    width: 100%;
    height: 40px;
    font-size: 14px;
    color: #999;
    line-height: 40px;
    text-align: center;
  }
</style>
