<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 class="page-head-btn">
	      <view class="text-btn">
			 <navigator url="/pages/user/withdrawal-record">提现记录</navigator>
		  </view>
	    </view>
	  </view>
    <view class="coin-wallet">
      <view class="title">提现金额</view>
      <view class="justify-between align-center">
        <view class="money align-center">
          <text>¥</text>
          <input v-model="money" type="number" placeholder="0.00" placeholder-style="color: #fff" />
        </view>
        <view class="withdraw-all" @click="onAll">
          全部提现
        </view>
      </view>
      <view class="withdraw-money align-center">
        <text>可提现金额¥{{data.user_money || '0.00'}}</text>
      </view>
    </view>
    <view class="withdraw-way">
      <view class="title">提现方式</view>
      <image src="/static/images/login-alipay.png" mode="widthFix" class="withdraw-img" />
      <view class="input-box">
        <input v-model="data.user_real_name" type="text" placeholder="请输入支付宝真实姓名" />
      </view>
      <view class="input-box">
        <input v-model="data.user_alipay" type="text" placeholder="请输入支付宝收款账号" />
      </view>
    </view>
    <view class="withdraw-remarks">
      注：您填写真实的支付宝账号信息我们会加密存储，请放心填写，虚假信息导致提现无法到账！
    </view>
    <view class="withdraw-button">
      <u-button shape="circle" :disabled="loading" :loading="loading" color="#DA2538" text="确认提现" @click="onSubmit"></u-button>
    </view>
    <view v-if="data.cash_min" class="withdraw-remarks">
      注：累计{{data.cash_min.toFixed(2) || '0.00'}}元即可提现，提现审核通过后，预计2小时内到账，最晚48小时，恶意注册推广将会被禁止提现。
    </view>
  </view>
</template>

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

export default {
  data() {
    return {
      data: {},
      money: '',
      loading: false
    }
  },
  onNavigationBarButtonTap() {
    uni.navigateTo({
      url: '/pages/user/withdrawal-record'
    })
  },
  async onLoad() {
    await this.$onLaunched
    const token = getApp().globalData.userToken
    if (!token) {
      uni.redirectTo({
        url: '/pages/user/login'
      })
    } else {
      this.getData()
    }
  },
  methods: {
    getData() {
      user.wallet().then(res => {
        if (res.code == 1) {
          this.data = res.data
          this.data.user_money = this.data.user_coin > 0 ? parseFloat(this.data.user_coin / this.data.cash_ratio).toFixed(2) : '0.00'
        }
      })
    },
    async onSubmit() {
      const name = /^[\u4e00-\u9fa5]{2,}$/
      const account = /^[A-Za-z0-9@.]+$/
      if (this.money == 0 || this.money == '') {
        uni.showToast({
          icon: 'none',
          title: '请填写提现金额~!'
        })
        return
      }
      if (this.money > parseInt(this.data.user_money)) {
        uni.showToast({
          icon: 'none',
          title: '当前可提现的金额不足~!'
        })
        return
      }
      if (!name.test(this.data.user_real_name)) {
        uni.showToast({
          icon: 'none',
          title: '请填写支付宝真实的姓名~!'
        })
        return
      }
      if (!account.test(this.data.user_alipay)) {
        uni.showToast({
          icon: 'none',
          title: '请填写正确的支付宝账号~!'
        })
        return
      }
      this.loading = true
      await user.cash(this.money, this.data.user_real_name, this.data.user_alipay).then(res => {
        uni.showToast({
          icon: 'none',
          title: res.msg,
          duration: 3000
        })
        if (res.code === 1) {
          this.money = ''
          this.data.user_coin = res.data.user_coin
          this.data.user_money = this.data.user_coin > 0 ? parseFloat(this.data.user_coin / this.data.cash_ratio).toFixed(2) : '0.00'
        }
      }).catch(e => {})
      this.loading = false
    },
    onAll() {
      this.money = parseInt(this.data.user_money)
    }
  }
}
</script>

<style lang="scss">
.page-container {
  background-color: $uni-bg-color;
  padding: 15px 0;
  .coin-wallet {
    margin: 0 15px 25px;
    padding: 15px;
    background: linear-gradient(90deg, #DA2538 0%, #F75F68 100%);
    border-radius: 8px;
    box-shadow: 0 8px 8px rgba(13,173,111,0.2);
    .title {
      margin-bottom: 4px;
      font-size: 15px;
      font-weight: 400;
      color: #fff;
    }
    .money {
      flex: 1 1 0%;
      margin-right: 10px;
      font-size: 19px;
      font-weight: 700;
      color: #fff;
      uni-input {
        flex: 1 1 0%;
        margin-left: 5px;
        font-size: 35px;
      }
    }
    .withdraw-all {
      width: 100px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background-color: rgba(255,255,255,.42);
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      border: 1px solid rgba(255,255,255,.75);
      border-radius: 16px;
    }
    .withdraw-money {
      font-size: 15px;
      font-weight: 500;
      margin-top: 5px;
      color: #fff;
    }
  }
  .withdraw-way {
    padding: 0 15px;
    .title {
      font-size: 16px;
      font-weight: 500;
      color: #1a1a2a;
    }
    .withdraw-img {
      width: 100px;
      margin: 10px auto;
      display: block;
    }
    .input-box {
      width: 100%;
      max-width: 300px;
      margin: 20px auto;
      padding: 0 20px;
      background-color: #f2f5fa;
      border-radius: 22px;
      uni-input {
        height: 44px;
        line-height: 44px;
        font-size: 15px;
        font-weight: 400;
        color: #333;
      }
    }
  }
  .withdraw-remarks {
    font-size: 12px;
    font-weight: 400;
    color: #9798a1;
    line-height: 17px;
    margin: 10px 15px;
    display: flex;
    justify-content: center;
  }
  .withdraw-button {
    width: 100%;
    max-width: 330px;
	
    margin: 20px auto;
    padding: 0 15px;
  }
}
</style>