<template>
  <div class="container">
    <div class="better-scroll wrapper" ref="wrapper">
      <ul>
        <!--rewardStatus: 状态 0-未使用 1-已使用 2-已作废-->
        <li class="list" :class="[item.rewardStatus === 0 ? 'bg-0' : '', item.rewardStatus === 1 ? 'bg-1' : '']"
            v-for="(item, index) in listData" :key="index" v-show="[0, 1].indexOf(item.rewardStatus) > -1">
          <p class="coupon-id">
            <span>ID:</span>
            <span>{{ item.rewardCode }}</span>
          </p>
        </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="" alt="">
          <p>暂无记录</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import { Toast } from 'vant'
  import { couponList } 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.$nextTick(() => {
        this.$refreshTitle('优惠券')
      })
      this.$route.meta.isUseCache = false
    },
    methods: {
      funFetch () {
        const vm = this
        vm.numFetchStatus = 0
        couponList(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
        })
      }
    },
    beforeDestroy () {
      if (this.scroll) {
        this.scroll.destroy()
      }
    },
    beforeRouteLeave (to, from, next) {
      if (['loanMine'].includes(to.name)) {
        // from.meta.isUseCache = true
      }
      // this.numPositionY = this.scroll ? this.scroll.y : 0
      next()
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
  }

  .wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    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: 333px;
    height: 114px;
    margin-top: 26px;
    overflow: hidden;

    &.bg-0 {
      background: url("./image/able@2x.png") center center/333px 114px no-repeat;
    }

    &.bg-1 {
      background: url("./image/disable@2x.png") center center/333px 114px no-repeat;
    }
  }

  .coupon-id {
    position: absolute;
    left: 36px;
    bottom: 13px;
    z-index: 1;
    display: flex;
    align-items: center;

    span {
      line-height: 20px;
      font-size: 14px;
      color: #999;

      &:nth-of-type(2) {
        margin-left: 13px;
      }
    }
  }

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

    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>
