<template>
  <view class="page-container">
	  <view class="status-bar"></view>
	  <view class="page-head">
	    <view class="page-head-btn" @click="back">
	      <uni-icons type="back" color="#fff" size="26"></uni-icons>
	    </view>
	    <view class="page-head-title">提现记录</view>
	   
	  </view>
    <view class="withdraw-recird card">
      <view class="card-content">
        <view v-for="(item, index) in list" :key="index" class="record-item">
          <view class="flex-row">
            <text class="title">提现金额：</text>
            <text class="money value">¥{{ item.cash_money }}</text>
          </view>
          <view class="flex-row">
            <text class="title">提现账号：</text>
            <text class="value">{{ item.cash_to_account }}</text>
          </view>
          <view class="flex-row">
            <text class="title">提现状态：</text>
            <view class="status value flex-row">
              <u-tag v-if="item.cash_status == 1" text="成功" plain type="success"></u-tag>
              <u-tag v-else-if="item.cash_status == 2" text="被拒" plain type="error"></u-tag>
              <u-tag v-else text="待审核" plain></u-tag>
            </view>
          </view>
          <view class="flex-row">
            <text class="title">提现时间：</text>
            <text class="value">{{ formatTime(item.cash_time) }}</text>
          </view>
          <view v-if="item.cash_status > 0" class="flex-row">
            <text class="title">审核时间：</text>
            <text class="value">{{ formatTime(item.cash_time_audit) }}</text>
          </view>
        </view>
      </view>
      <view class="load-more">
        <u-loadmore :status="loadStatus" loading-icon="semicircle" />
      </view>
    </view>
  </view>
</template>

<script>
import { user } from '@/utils/api'

export default {
  data() {
    return {
      list: [],
      page: 1,
      count: 0,
      refreshTriggered: false,
      loadStatus: 'loadmore'
    }
  },
  onPullDownRefresh() {
    this.refreshTriggered = true
    this.loadStatus = 'loadmore'
    this.page = 1
    this.list = []
    this.getData()
  },
  onReachBottom() {
    this.getData()
  },
  async onLoad() {
    await this.$onLaunched
    const token = getApp().globalData.userToken
    if (!token) {
      uni.redirectTo({
        url: '/pages/user/login'
      })
    } else {
      this.getData()
    }
  },
  methods: {
    async getData() {
      if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
        return
      }
      this.loadStatus = 'loading'
      await user.cashList(this.page).then(res => {
        if (res.code == 1) {
          if (res.data.page < res.data.page_total) {
            this.loadStatus = 'loadmore'
            this.page++
          } else {
            this.loadStatus = 'nomore'
          }
          this.list = this.list.concat(res.data.list)
          this.count = res.data.count
        } else {
          this.loadStatus = 'loadmore'
        }
      }).catch(e => {
        this.loadStatus = 'loadmore'
      })
      if (this.refreshTriggered) {
        this.refreshTriggered = false
        uni.stopPullDownRefresh()
      }
    }
  }
}
</script>

<style lang="scss">
.page-container {
  padding: 15px 0;
   background-color: $uni-bg-color;
  .withdraw-recird {
    margin: 0 15px;
    .record-item {
      font-size: 14px;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eef0f3;
      &:last-child {
        margin-bottom: 0;
      }
      .flex-row {
        min-height: 26px;
        margin: 2px 0;
        .title {
          height: 26px;
          line-height: 26px;
          color: #8c8c8c;
        }
        .value {
          line-height: 26px;
          flex: 1 1 0%;
        }
        .money {
          color: #fd6202;
        }
      }
    }
  }
}
</style>