<template>
  <view class="px-base">
    <u-navbar back-icon-color="#000000" title-color="#000000" :border-bottom="false" >
         <view class="flex-1 text-center text-32rpx">提现到银行卡</view>
      <view slot="right" class="pr-base text-28rpx text-primary" @tap="$u.routeAuth('/pageA/bank_details/index')"> 提现记录 </view>
    </u-navbar>
    <view class="u-skeleton">
      <block v-if="isFirstLoading">
        <view class="w-750rpx h-750rpx u-skeleton-rect"></view>
        <view class="px-24rpx">
          <view class="w-600rpx h-44rpx u-skeleton-rect mt-20rpx"></view><view class="w-333rpx h-36rpx u-skeleton-rect mt-20rpx"></view>
          <view class="flex justify-between items-center"> <view class="w-142rpx h-44rpx u-skeleton-rect mt-20rpx"></view></view>
        </view>
      </block>
      <block>
        <view class="pb-30rpx bg-white box-shadow mt-50rpx">
          <!-- 有银行信息 -->
          <block v-if="userBank.bank_number">
            <view class="flex items-center px-48rpx pt-30rpx text-lg">
              <view class="text-txBase w-140rpx">银行卡号</view>
              <view class="text-txGray ml-50rpx">{{ userBank.bank_number }}</view>
            </view>
            <view class="flex items-center px-48rpx pt-30rpx text-lg">
              <view class="text-txBase w-140rpx">银行</view>
              <view class="text-txGray ml-50rpx">{{ userBank.bank_name }}</view>
            </view>
            <view class="border-b border-txBorder pb-30rpx flex items-center px-48rpx pt-30rpx text-lg">
              <view class="text-txBase w-140rpx">持卡人</view>
              <view class="text-txGray ml-50rpx">{{ userBank.real_name }}</view>
            </view>
            <view @tap="$u.routeAuth('/pageA/my_bank/index')" class="text-right text-hex-2979ff text-lg mt-30rpx px-base underline"
              >修改银行卡信息</view
            >
          </block>
          <block v-else>
            <view @tap="$u.routeAuth('/pageA/my_bank/index')" class="text-center py-80rpx text-lg underline">暂无银行信息，请先去完善 </view>
          </block>
          <view class="flex items-center text-txBase text-lg mt-60rpx px-48rpx">
            <view class="w-120rpx">金额</view>
            <input
              :adjust-position="false"
              placeholder-class="text-txGray"
              class="inputHeight rounded-lg"
              v-model="amount"
              type="number"
              :placeholder="`可提余额：${wallet.balance}`"
            />
          </view>
          <block v-if="userBank.bank_number">
            <view class="flex items-center justify-between text-txGray text-lg mt-base px-48rpx">
              <view>到账{{ calculation }}</view>
              <view>手续费{{ sx }}元</view>
            </view>
          </block>
          <view class="text-hex-909399 text-20rpx mt-base px-48rpx">{{ withdraw.threshold_amount }}元起提，提现手续费为{{ sxf }}</view>
          <!-- <view class="text-right text-txBase text-lg mt-30rpx px-48rpx">可转余额：{{wallet.balance}}</view> -->
        </view>
        <view class="text-center text-hex-D43030 text-md mt-60rpx">提示：每周一开始对上周提现依次打款 ！</view>
        <!-- 有银行卡信息 -->
        <view v-if="userBank.bank_number" class="mt-50rpx px-20rpx">
          <view class="login-btn" @tap="onSubmit"> 确认提现 </view>
        </view>
        <!-- 没有银行卡信息 -->
        <view v-else class="mt-50rpx px-20rpx">
          <view class="login-btn" @tap="tips"> 确认提现 </view>
        </view>
      </block>
    </view>
    <!-- 判断是否设置了安全密码 -->
    <cu-modal
      v-model="tipsShow"
      title="您还未设置支付密码？"
      :showCancelButton="true"
      confirmText="去设置"
      @confirm="$u.routeAuth('/pageA/reset_password/secure')"
      content="提示：请先设置后在进行操作～"
    ></cu-modal>
    <!-- 账号输入密码确认 -->
    <password-popup v-model="inputShow" @getPassword="confirm">
      <view class="text-md text-txBase text-center">转出余额：{{ (amount * 1).toFixed(2) }}</view>
      <view v-if="passwordError" class="text-txBase text-center text-error">密码错误</view>
    </password-popup>
    <u-skeleton :loading="isFirstLoading" el-color="#f5f5f5" :animation="true" bgColor="#f5f5f5"></u-skeleton>
  </view>
</template>

<script>
import { mcl } from '@/utils/index.js';
export default {
  data() {
    return {
      isFirstLoading: true,
      userBank: {},
      tipsShow: false,
      inputShow: false,
      passwordError: false,
      content: '你还未设置安全密码，是否立即前往设置？',
      amount: '',
      wallet_password: '',
    };
  },
  onShow() {
    this.getDate();
  },
  computed: {
    withdraw() {
      return this.$store.getters.config?.withdraw ?? {};
    },
    wallet() {
      return this.$store.getters.user?.wallet ?? {};
    },
    //判断提现的金额是否大于余额
    judge() {
      return this.amount.trim() * 1 - this.wallet.balance;
    },
    //判断最低金额
    minamount() {
      return this.amount.trim() * 1 - this.withdraw.threshold_amount * 1;
    },
    //处理手续费%
    sxf() {
      let str = Number(this.withdraw.rate )
      str += '%';
      return str;
    },
    //手续费
    sx() {
      return (this.amount.trim() * 1 * this.withdraw.rate/100).toFixed(2);
    },
    //到账
    calculation() {
      const str = (this.amount * (1 - this.withdraw.rate * 1/100)).toFixed(2);
      return str ?? '0.00';
    },
  },
  onLoad() {
    console.log(this.withdraw.rate)
  },
  methods: {
    async getDate() {
      try {
        let resDate = await this.$api.get('/v1/user-bank');
        this.userBank = resDate;
      } catch (err) {
      } finally {
        this.isFirstLoading = false;
      }
    },
    //提交
    onSubmit() {
      if (this.minamount < 0) {
        this.$u.toast(`最低提现${this.withdraw.threshold_amount}元`);
      } else if (this.judge > 0) {
        this.$u.toast(`最高提现金额为${this.wallet.balance}元`);
      } else {
        !this.wallet.has_password ? (this.tipsShow = true) : (this.inputShow = true);
      }
    },
    tips() {
      this.$u.toast('请先去完善银行卡信息');
    },
    async confirm(e) {
      this.inputShow = false;
      try {
        let obj = {
          amount: mcl(this.amount, 100),
          wallet_password: e,
        };
        await this.$api.post('/v1/wallet/wallet-to-bank', obj, {
          custom: {
            loading: true,
            toast: false,
          },
        });
        this.amount = '';
        this.$store.dispatch('user/getUserInfo');
        this.$u.toast('提现成功');
        uni.redirectTo({
          url: '/pageA/bank_details/index',
        });
      } catch (err) {
        if (err.errcode == 10001) {
          this.passwordError = true;
          this.inputShow = true;
        } else {
          this.$u.toast(err.message ?? '系统繁忙，请稍后再试');
          this.inputShow = false;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box-shadow {
  box-shadow: 0px 2rpx 10rpx rgba(0, 0, 0, 0.2);
  border-radius: 15rpx;
}

.inputHeight {
  @apply h-80rpx flex-1 border border-txBorder px-base ml-40rpx text-lg text-txBase;
}
</style>
