<template>
  <div class="container">
    <div class="header">
      <h2 class="title">余额(元)</h2>
      <p class="count">{{ totalPrice.toFixed(2) }}</p>
      <button class="cashing" @click="funCashOut">提现</button>
    </div>
    <p class="balance">余额明细</p>
    <div class="better-scroll wrapper" ref="wrapper">
      <ul>
        <li class="list" v-for="(item, index) in listData" :key="index">
          <p class="amount">
            <!--logType: 类型，0-收入 1-提现-->
            <!--logStatus：0-未审核 1-审核成功 2-审核失败-->
            <span>{{ item.logType === 0 ? '奖励' : '提现' }}(元)：</span>
            <span>{{ item.logType === 0 ? '+' : '-' }}{{ item.balance.toFixed(2) }}</span>
          </p>
          <p class="description">状态：{{ ['未审核', '审核成功', '审核失败'][item.logStatus] }}</p>
          <p class="description">{{ item.logContent }}</p>
          <p class="create-time">{{ item.createdAt }}</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 { walletList, postCashOut } from './api'

const PAGESIZE = 20
export default {
  name: 'wallet',
  data () {
    return {
      pager: {
        pagenum: 1,
        pagesize: PAGESIZE,
        pagecount: 1
      },
      totalPrice: 0,
      listData: [],
      scroll: null,
      numFetchStatus: 0,
      arrFetchStatus: ['正在加载，请稍后～', '到底了'],
      booFetchData: false,
      numPositionY: 0,
      booSubmit: false
    }
  },
  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.booSubmit = false
      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
      walletList(vm.pager.pagenum, vm.pager.pagesize).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
      })
    },
    // 提现
    funCashOut () {
      if (this.booSubmit) {
        return
      }
      this.booSubmit = true
      postCashOut().then(res => {
        this.booSubmit = false
        if (res.status) {
          this.totalPrice = 0
        }
        Toast(res.msg)
      }).catch(err => {
        this.booSubmit = false
        Toast(err)
      })
    }
  }
}
</script>

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

.header {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 25px 0 21px;
  background: #fff;
}

.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;
}

.cashing {
  position: absolute;
  right: 16px;
  bottom: 24px;
  width: 96px;
  height: 45px;
  border-radius: 4px;
  line-height: 45px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%), linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
  box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
}

.balance {
  width: 100%;
  padding-left: 32px;
  margin: 31px 0 14px;
  line-height: 20px;
  font-size: 15px;
  color: #333;
}

.wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 192px);
  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;
    }
  }
}

.description {
  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>
