<template>
  <div id="clearanceList">
    <div class="content">
      <van-pull-refresh class="list" ref="supplierList" v-model="isRefreshing" @refresh="onRefresh">
        <van-list
          v-model="isLoading"
          :finished="finished"
          finished-text="没有更多了"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          @load="onLoad">
          <div class="invoiceItem"
            v-for="(item, index) in invoiceList"
            :key="index">
              <clearance-list-item :item="item"/>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
// 引入接口
import { getOrderClearanceList } from '@/api/myOrder'
import clearanceListItem from './clearanceListItem.vue'
export default {
  name: 'ClearanceList',
  components: {
    clearanceListItem
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      isRefreshing: false,
      isLoading: false,
      finished: false,
      error: false,
      logInfoShow: false,
      invoiceList: [],
      invoiceItem: {},
      sphImage: require('@/assets/img/u48.png'),
    }
  },
  computed: {
    linkInfo () {
      return this.$store.state.linkInfo
    },
    routKey() {
      return this.$route.path
    },
    searchTime() {
      let time = this.time.start + '/' + this.time.end
      return time
    }
  },
  mounted() {
    // this.onLoad()
  },
  methods: {
    gotoDetail(model) {
      // console.log(model)
      this.$emit('gotoDetail', model)
    },
    onRefresh() {
      this.currentPage = 1
      this.isRefreshing = true
      this.getPostData()
    },
    onLoad() {
      this.isLoading = true
      this.getPostData()
    },
    getPostData() {
      let _this = this
      let data = {
        'clientID': [],
        'endDate': '2021-03-18',
        'goodsCode': '',
        'goodsDesc': '',
        'goodsId': '',
        'goodsName': '',
        'goodsSpec': '',
        'manufacturer': '',
        'mdmClientCode': '',
        'order': '',
        'orderDealStatus': '',
        'orderId': '',
        'orderNo': this.$route.query.orderNo,
        // 'orderNo': '879202103180835',
        'pageNum': _this.currentPage,
        'pageSize': _this.pageSize,
        'reqOrderStatus': '',
        'shippingAdress': '',
        'sort': '',
        'sourceDb': this.$route.query.sourceDb,
        'sourceGoodsId': '',
        'sourceOrderNo': '',
        'sourceSystem': '',
        'startDate': '2021-03-08',
        'supplierId': []
      }
      getOrderClearanceList(data).then(rt => {
        if (rt.data.code === '00000') {
          if (_this.isRefreshing) {
            _this.invoiceList = rt.data.entity.reqOrderList
          } else if (rt.data.entity.reqOrderList || rt.data.entity.reqOrderList.length > 0) {
            _this.invoiceList = _this.invoiceList.concat(rt.data.entity.reqOrderList)
          }
          // 重置刷新提示
          _this.isRefreshing = false
          // 重置加载更多提示
          _this.isLoading = false
          if (rt.data.entity.reqOrderList.length < 10) {
            _this.finished = true
          } else {
            // 加载成功后下一页自增1
            _this.currentPage++
          }
        } else {
          _this.$toast(rt.message)
          _this.isRefreshing = false
          _this.error = true
          _this.finished = false
        }
        // 加载状态结束
        _this.isLoading = false
      }).catch(e => {
        this.$toast('获取信息失败！')
        _this.isRefreshing = false
        _this.isLoading = false
        _this.error = true
        _this.finished = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  #clearanceList {
    height: 100%;
    .content{
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 10PX;
      -webkit-overflow-scrolling: touch;
      .invoiceItem{
        // height: 145PX;
        background-color: white;
        margin-bottom: 10PX;
        border-radius: 10PX;
        font-size: 14PX;
        color: #333333;
        padding: 0PX 10PX 10PX 10PX;
      }
    }
  }
</style>
