<template>
  <div class="container">
    <h2 class="title">我的申请记录</h2>
    <div class="better-scroll wrapper" ref="wrapper">
      <ul>
        <!--orderStatusId：0-初始化 1-进行中 2-成功 3-失败-->
        <li class="list" :class="item.orderStatusId === 3 ? 'bg-0' : 'bg-1'" v-for="(item, index) in listData"
            :key="index" @click="funJumpDetail(item)">
          <div class="top border-bottom-1px">
            <div class="left-wrap">
              <img :src="item.orderProduceImgUrl" alt="">
            </div>
            <div class="right-wrap">
              <p>{{ item.orderProduceName }}申请</p>
              <p>
                <span>需求金额：</span>
                <span :class="item.orderStatusId === 3 ? 'col-0' : 'col-1'">{{ item.orderPrice / 10000 }}</span>
                <span :class="item.orderStatusId === 3 ? 'col-0' : 'col-1'">万元</span>
              </p>
            </div>
          </div>
          <p class="bottom">
            <span>{{ item.createdAt }}</span>
            <span>></span>
          </p>
          <img class="fail" src="./image/fail@2x.png" alt="" v-if="item.orderStatusId === 3">
        </li>
        <li class="load-status" v-if="listData.length && booFetchData">
          <p>{{ arrFetchStatus[numFetchStatus] }}</p>
        </li>
        <li class="bitmap" v-if="!listData.length && booFetchData">
          <img src="./image/bitmap@2x.png" alt="">
          <p>暂无申请记录</p>
        </li>
      </ul>
    </div>
  </div>
</template>

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

  const PAGESIZE = 20
  export default {
    name: 'home',
    props: {
      tabindex: {
        type: Number,
        default: 1
      }
    },
    data () {
      return {
        pager: {
          pagenum: 1,
          pagesize: PAGESIZE,
          pagecount: 1
        },
        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.$route.meta.isUseCache = false
      this.$nextTick(() => {
        this.$refreshTitle('进度查询')
      })
    },
    methods: {
      funFetch () {
        const vm = this
        vm.numFetchStatus = 0
        getOrderList(vm.pager.pagenum, vm.pager.pagesize).then(response => {
          if (response.status) {
            const data = response.data
            const temp = data.data
            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
        })
      },
      funJumpDetail (item) {
        this.$router.push({ path: '/loan/detail/' + item.id })
      }
    },
    beforeDestroy () {
      if (this.scroll) {
        this.scroll.destroy()
      }
    },
    beforeRouteLeave (to, from, next) {
      if (['loanDetail'].includes(to.name)) {
        from.meta.isUseCache = true
      }
      this.numPositionY = this.scroll ? this.scroll.y : 0
      next()
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    padding-top: 25px;
    background: #fff;
  }

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

  .wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - 82px);
    margin-top: 24px;
    overflow: hidden;

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

  .list {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 343px;
    margin-bottom: 26px;
    border-radius: 4px;

    &.bg-0 {
      background: linear-gradient(270deg, #E2E2E2 0%, #C7C7C7 100%);
    }

    &.bg-1 {
      background: linear-gradient(90deg, #44403B 0%, #93806B 100%);
    }
  }

  .top {
    display: flex;
    align-items: center;
    width: 297px;
    padding: 18px 0 12px;
    @include border-bottom-1px(#fff);
  }

  .left-wrap {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;

    img {
      display: block;
      width: 100%;
    }
  }

  .right-wrap {
    margin-left: 18px;

    p:nth-of-type(1) {
      line-height: 25px;
      font-size: 18px;
      font-weight: 500;
      color: #fff;
    }

    p:nth-of-type(2) {
      display: flex;
      align-items: flex-end;

      span:nth-of-type(1) {
        padding-bottom: 5px;
        line-height: 20px;
        font-size: 15px;
        color: #fff;
      }

      span:nth-of-type(2) {
        line-height: 33px;
        font-size: 24px;
        font-weight: bold;
      }

      span:nth-of-type(3) {
        padding-bottom: 4px;
        line-height: 20px;
        font-size: 15px;
        font-weight: bolder;
      }

      .col-0 {
        color: #A7A7A7;
      }

      .col-1 {
        color: #D6BDA1;
      }
    }
  }

  .fail {
    position: absolute;
    right: 14px;
    top: 21px;
    z-index: 1;
    display: block;
    width: 77px;
    height: 49px;
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 297px;
    padding: 11px 0 12px;

    span {
      line-height: 20px;
      font-size: 15px;
      color: #fff;
    }
  }

  .load-status {
    p {
      line-height: 20px;
      font-size: 14px;
      color: #666;
    }
  }

  .bitmap {
    img {
      display: block;
      width: 168px;
      height: 168px;
      margin-top: 81px;
    }

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