<template>
  <div class="container">
    <div class="header">
      <h2 class="title">放款总额</h2>
      <p class="count">{{ totalPrice / 10000 }}万元</p>
    </div>
    <div class="better-scroll wrapper" ref="wrapper">
      <ul>
        <li class="list" v-for="(item, index) in listData" :key="index">
          <p class="amount">
            <span>放款金额：</span>
            <span>{{ item.orderFinalPrice / 10000}}万元</span>
          </p>
          <p class="order-id">申请单号：{{ item.orderNumber }}</p>
          <p class="create-time">放款时间：{{ item.updatedAt }}</p>
        </li>
        <li class="load-status" v-if="listData.length && booFetchData">
          <p>{{ arrFetchStatus[numFetchStatus] }}</p>
        </li>
        <li class="bitmap" v-if="!listData.length && booFetchData">
          <p>暂无记录</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import { Toast } from 'vant'
  import { saleList } from './api'

  const PAGESIZE = 20
  export default {
    name: 'sale',
    props: {
      id: { // 被邀请合伙人ID
        type: String,
        default: ''
      }
    },
    data () {
      return {
        pager: {
          pagenum: 1,
          pagesize: PAGESIZE,
          pagecount: 1
        },
        totalPrice: 0,
        listData: [],
        scroll: null,
        numFetchStatus: 0,
        arrFetchStatus: ['正在加载，请稍后～', '上拉加载更多', '没有更多了', '出错啦'],
        booFetchData: false,
        numPositionY: 0
      }
    },
    activated () {
      if (!this.$route.meta.isUseCache) {
        this.pager = {
          pagenum: 1,
          pagesize: PAGESIZE,
          pagecount: 1
        }
        this.listData = []
        this.numFetchStatus = 0
        this.booFetchData = false
        this.numPositionY = 0
        this.funFetch()
      } else {
        this.$nextTick(() => {
          if (this.scroll) {
            this.scroll.refresh()
            this.scroll.scrollTo(0, this.numPositionY)
          }
        })
      }
      this.$nextTick(() => {
        this.$refreshTitle('放款总额')
      })
    },
    methods: {
      funFetch () {
        const vm = this
        vm.numFetchStatus = 0
        saleList(vm.pager.pagenum, vm.pager.pagesize, this.id).then(response => {
          if (response.status) {
            const data = response.data
            const temp = data.data
            vm.totalPrice = data.totalPrice
            vm.pager.pagecount = Math.ceil(data.count / PAGESIZE)
            vm.pager.pagenum++
            vm.booFetchData = true
            if (vm.pager.pagecount <= 1) {
              vm.numFetchStatus = 2
            } else {
              vm.numFetchStatus = 1
            }
            if (temp.length) {
              vm.listData = vm.listData.concat(temp)
              vm.$nextTick(() => {
                if (!vm.scroll) {
                  vm.scroll = new BScroll(vm.$refs.wrapper, {
                    click: true,
                    pullUpLoad: {
                      threshold: -20
                    },
                    scrollbar: true
                  })
                  vm.scroll.on('pullingUp', () => {
                    if (vm.pager.pagenum > vm.pager.pagecount) {
                      vm.numFetchStatus = 2
                      return
                    }
                    vm.funFetch()
                  })
                } else {
                  vm.scroll.refresh()
                  vm.scroll.finishPullUp()
                }
              })
            }
          } else {
            Toast(response.msg)
            vm.numFetchStatus = 3
          }
        }).catch(() => {
          Toast('出错啦')
          vm.numFetchStatus = 3
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 25px 0 21px;
  }

  .title {
    width: 343px;
    padding-left: 8px;
    line-height: 33px;
    font-size: 24px;
    font-weight: 500;
    color: #333;
  }

  .count {
    width: 343px;
    padding-left: 5px;
    margin-top: 6px;
    line-height: 42px;
    font-size: 30px;
    font-weight: 500;
    color: #EE0A23;
  }

  .wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - 127px);
    overflow: hidden;

    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding-bottom: 80px;
    }
  }

  .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 343px;
    padding: 16px 0;
    margin-top: 16px;
    border-radius: 4px;
    background: #FFFFFF;

    &:nth-of-type(1) {
      margin-top: 0;
    }
  }

  .amount {
    display: flex;
    align-items: center;
    width: 311px;

    span {
      line-height: 20px;
      font-size: 15px;
      font-weight: 500;

      &:nth-of-type(1) {
        color: #333;
      }

      &:nth-of-type(2) {
        color: #EE0A23;
      }
    }
  }

  .order-id {
    width: 311px;
    margin-top: 8px;
    line-height: 17px;
    font-size: 12px;
    font-weight: 500;
    color: #333;
  }

  .create-time {
    width: 311px;
    margin-top: 8px;
    line-height: 17px;
    font-size: 12px;
    color: #999;
  }

  .load-status {
    margin-top: 12px;

    p {
      line-height: 20px;
      font-size: 14px;
      color: #666;
      text-align: center;
    }
  }

  .bitmap {
    p {
      line-height: 22px;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      color: #333;
    }
  }
</style>
