<template>
  <view class="WithdrawingCoin ">
    <view class="withdrawing-content">
      <view class="item-name">账户能量球将提现到银行卡</view>
      <view class="item">
        <view style="flex: 1;">
          <input class="input_num" v-model="withdraw_input" @input='inputNum' type="number"
            placeholder-style="color:#999;font-weight:normal; font-size:30rpx;" placeholder="请输入能量球数量" />
          <view v-if="total">≈ ￥{{total}}</view>
        </view>
        <view class="all" @click="all">全部提现</view>
      </view>
      <view class="item">
        <input class="input_num" v-model="card" type="number"
          placeholder-style="color:#999;font-weight:normal; font-size:30rpx;" placeholder="请输入您要收款得银行卡卡号" />
      </view>
      <view class="item">
        <input class="input_num" v-model="name" maxlength="10"
          placeholder-style="color:#999;font-weight:normal; font-size:30rpx;" placeholder="请输入收款人姓名" />
      </view>
      <number-jpan :length="6" @closeChange="closeChange($event)" ref="numberPad"></number-jpan>
      <view class="item-total">
        <view class="total"><span>能量球总数 : {{balance}}</span><span class="money">总估值(CNY)≈￥{{(balance*price).toFixed(2)}}</span></view>
      </view>
    </view>
    <view class="btn" @click="open">提现至银行卡</view>
    <view class="ew_lists" v-if="withdrawLists.length>0">
      <view class="" v-for="(item,index) in withdrawLists " :key="index">
        <view class="receiptCode">
          回执单号：{{item.receipt_code}}
        </view>
        <view class="item">
          <view class="left">
            <span>能量球:{{item.total}}</span>
            <span>金额≈￥{{item.arrival}}</span>
          </view>
          <view class="right">
            <span> {{item.created_at}} 提现</span>
            <span> {{item.paid_at?item.paid_at+'到账':'努力打款中'}}</span>
          </view>
        </view>
      </view>
      <view class="hasmore">
        {{has_more?'努力加载中~':'我是有底线的~'}}
      </view>
    </view>
	<no-list v-else name='no-records' txt="暂无任何提现记录哦~" />
  </view>
</template>

<script>
  import {
    withdraw,
    withdrawLogs,
    withdrawDo
  } from '@/apis/interfaces/wallet.js';
  import numberJpan from "@/components/numberJpan/numberJpan.vue";
  export default {
    data() {
      return {
        balance: 0, // 钱包能量球数量
        price: 0, // 当前能量球价格
        card: '', // 银行卡号
        name: '', // 姓名
        password: '', // 
        withdraw_input: '', // 提现能量球数量
        total: '', // 提现能量球转化成的钱数
        page: 1,
        has_more: true,
        withdrawLists: [],
      };
    },
    components: {
      'number-jpan': numberJpan
    },
    onLoad() {
      this.reset()
    },
    onReachBottom() {
      if (this.withdrawLists.length > 0) {
        if (this.has_more) {
          this.withdrawLogs()
        } else {
          uni.showToast({
            title: '没有更多~',
            icon: 'none'
          })
        }
      }
    },
    methods: {
      // 提现基本信息
      withdraw() {
        withdraw().then(res => {
          this.balance = Number(res.balance)
          this.price = Number(res.price)
        }).catch(err => {
          uni.showToast({
            title: err.message,
            icon: 'none'
          })
        })
      },
      // 提现记录
      withdrawLogs() {
        withdrawLogs({
          page: this.page
        }).then(res => {
          this.withdrawLists = this.withdrawLists.concat(res.data)
          if (res.page.has_more) {
            this.page = this.page + 1
            this.has_more = true
          } else {
            this.has_more = false
          }
        }).catch(err => {
          uni.showToast({
            title: err.message,
            icon: 'none'
          })
        })
      },
      //  输入提现能量球数量
      inputNum(e) {
        let number = Number(e.detail.value)
        if (number <= this.balance) {
          this.total = Number(e.detail.value) * this.price
        } else {
          uni.showToast({
            title: '最大值能超过' + this.balance+'',
            icon: 'none',
            duration: 2000
          });
          this.withdraw_input = ''
          this.total = 0
        }

      },
      //  点击全部
      all() {
        if (this.balance > 0) {
          this.withdraw_input = this.balance
          this.total = this.balance * this.price
        } else {
          uni.showToast({
            title: '啥也没有，我也做不到~',
            icon: 'none',
            duration: 2000
          })
        }
      },
      //  打开密码 出发提现功能
      open() {
        if (this.total > 0) {
          let params = {
            name: this.name,
            card: this.card,
            total: this.withdraw_input
          }
          if (params.name === '' || params.card === '' || params.total === 0) {
            uni.showToast({
              title: '重新确认提现信息',
              icon: 'none',
              duration: 2000
            })
          } else {
            this.$refs.numberPad.open()
          }
        } else {
          uni.showToast({
            title: '啥也没有，我也做不到~',
            icon: 'none',
            duration: 2000
          })
        }
      },
      // 输入密码成功后，，，
      closeChange(e) {
        uni.showLoading({
          title: '提现中~'
        })
        let params = {
          name: this.name,
          card: this.card,
          total: this.withdraw_input,
          code: e
        }
        withdrawDo(params).then(res => {
          uni.showToast({
            title: '申请提现成功，耐心等待打款',
            icon: 'none',
            duration: 2000
          })
          this.reset()
        }).catch(err => {
          uni.showToast({
            title: err.message,
            icon: 'none',
            duration: 2000
          })
        })
      },
      reset() {
        this.name = ''
        this.card = ''
        this.page = 1
        this.has_more = true
        this.withdraw_input = ''
        this.total = 0
        this.withdrawLists = []
        this.withdrawLogs();
        this.withdraw();
      }
    }
  }
</script>

<style lang="scss">
  .hasmore {
    color: #808080;
    font-size: $title-size-m;
    text-align: center;
    padding: $padding*2;
  }

  .nomore {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: $title-size-m;
    color: #808080;
    margin-top: $margin*4;

    image {
      width: 320rpx;
      margin-bottom: $margin*2;
    }
  }

  .receiptCode {
    color: #808080;
    text-align: left;
    // margin: $margin 0;
    font-size: $title-size-m;
  }

  .WithdrawingCoin {
    background-color: #fff;
    width: 100%;
    min-height: 100vh;
	padding-bottom: 100rpx;
  }

  .all {
    color: $mian-color;
    width: 160rpx;
    text-align: center;
  }

  .withdrawing-content {
    min-height: 300rpx;
    background-color: #fff;
    box-shadow: 0 0 30rpx 1rpx rgba($color: #000000, $alpha: 0.2);
    margin: $margin*1.4;
    border-radius: $radius*1.5;
    padding: $padding*1.4;
    font-size: $title-size-m;

    .item-name {
      text-align: center;
      padding: $padding * .6;
      color: #303030;
      font-weight: bold;
      margin-bottom: $margin;
      font-size: $title-size *1.4;
    }

    .item {
      border-bottom: solid 1rpx #f8f8f8;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      box-sizing: border-box;
      padding: $padding 0;

      span:nth-child(1) {
        color: #666;
        margin-right: 20rpx;
      }

      .input_num {
        font-size: $title-size*1.5;
        color: #3a3a3a;
        font-weight: bolder;
        flex: 1;

      }
    }

    .item-total {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: $padding*2 0 0 0;
      color: #3a3a3a;

      .total {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        box-sizing: border-box;

        .money {
          padding-top: $padding *0.5;
        }
      }

      .lists {
        color: $text-price;
      }
    }

  }

  .btn {
    // background-color: $text-price;
	background-image: linear-gradient(to right, $text-price, $mian-color);
    color: #fff;
    border-radius: 50rpx;
    text-align: center;
    padding: $padding ;
    margin: $margin * 2;
    font-size: $title-size;
    font-weight: bold;
  }

  .ew_lists {
    padding: $padding *2;
    border-top: solid 4rpx #f8f8f8;

    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      border-bottom: solid 1rpx #f8f8f8;
      background-color: #fff;
      padding: 0 0 $padding*0.8 0;

      .left,
      .right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        box-sizing: border-box;
      }

      .left {
        font-size: $title-size-m;
        font-weight: bold;
        color: #808080;

        span:nth-child(2) {
          color: $text-price;
          font-size: $title-size-m;
          font-weight: normal;
          padding-top: $padding *0.5;
        }
      }

      .right {
        font-size: $title-size-m;
        align-items: flex-end;
        color: #666;

        span:nth-child(1) {
          padding-bottom: $padding*0.5;
        }
      }
    }
  }
</style>
