<template>
  <view class="Mall4j page-withdrawal">
    <!-- 可提现余额 -->
    <view class="balance-box">
      <view class="bg" />
      <view class="text-box">
        <view class="text">
          可提现余额（元）
        </view>
        <view class="price">
          <view class="symbol">
            ￥
          </view>
          <view class="big">
            {{ wxs.parsePrice(settledAmount)[0] }}
          </view>
          <view class="symbol">
            .{{ wxs.parsePrice(settledAmount)[1] }}
          </view>
        </view>
      </view>
      <view
        class="withward-record"
        @tap="onToWithdrawalRecord"
      >
        提现记录
      </view>
    </view>

    <!-- 提现 -->
    <view class="withward-box">
      <view class="tit">
        提现金额
      </view>
      <view class="input-box">
        <view class="symbol">
          ￥
        </view>
        <input
          v-model="amount"
          type="digit"
          class="input"
          @blur="onAmountInput"
        >
        <view
          class="all"
          @tap="onAllWithdraw"
        >
          全部提现
        </view>
      </view>
      <view
        class="btn"
        @tap="onConfirmWithdraw"
      >
        申请提现
      </view>
    </view>

    <!-- 规则 -->
    <view class="rule-box">
      <view class="tit">
        提现须知
      </view>
      <view class="item">
        {{ $t('distribution.WithdrawalRules1') }}{{ amountMin }}{{ $t('distribution.yuan') }}{{ $t('distribution.WithdrawalRules2') }}{{ amountMax }}{{ $t('distribution.yuan') }}
      </view>
      <view
        v-if="frequency===-1"
        class="item"
      >
        {{ $t('distribution.WithdrawalRules3') }}
      </view>
      <view
        v-else
        class="item"
      >
        {{ $t('distribution.WithdrawalRules31') }}{{ frequency === 30 ? '' : frequency }}{{ frequency === 30 ? $t('distribution.WithdrawalRules34') : $t('distribution.WithdrawalRules32') }}{{ withdrawalNum }}{{ $t('distribution.WithdrawalRules33') }}
      </view>
      <view
        v-if="paymentExplain!==null"
        class="item"
      >
        3、{{ paymentExplain }}
      </view>
      <view class="item">
        {{ paymentExplain!==null?'4、':'3、' }}{{ $t('distribution.WithdrawalRules4') }}
      </view>
    </view>
  </view>
</template>

<script setup>
const wxs = number()

const amount = ref(null)

onLoad(() => {
  onGetDisInfoData()
  onLoadWithdrawCashRule() // 提现规则
})

const onAmountInput = (e) => {
  amount.value = e.detail.value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
}
const onAllWithdraw = () => {
  amount.value = settledAmount.value / 100
}

// 获取可提现余额
const settledAmount = ref(0)
const onGetDisInfoData = () => {
  http.request({
    url: '/mall4cloud_marketing/distribution_user_wallet',
    method: 'GET'
  }).then(res => {
    settledAmount.value = res.settledAmount
  })
}

/**
 * 加载提现规则
 */
const frequency = ref(0) // 天数
const withdrawalNum = ref(0) // 提现次数
const amountMax = ref(0) // 最大金额
const amountMin = ref(0) // 最低金额
const paymentExplain = ref(null) // 其他提示
const onLoadWithdrawCashRule = () => {
  http.request({
    url: '/mall4cloud_marketing/distribution_set/info',
    method: 'GET',
    dontShowLogin: true
  }).then(res => {
    frequency.value = res.frequency
    withdrawalNum.value = res.number
    amountMax.value = res.amountMax
    amountMin.value = res.amountMin
    paymentExplain.value = res.paymentExplain
  })
}

/**
 * 确认提现
 */
const onConfirmWithdraw = () => {
  /**
   *  不可提现的几个判断
   *  1：输入框输入的值为空 || 值小于或等于0的数字（提示：请输入正确金额！）
   *  2：输入框输入的值，大于该分销员的可提现余额（提示：余额不足）
   *  3：输入框输入的值，小于最小提现金额（提示：提现金额小于最小提现金额）
   */
  if (!amount.value || amount.value <= 0) {
    uni.showToast({
      title: $t('distribution.enterCorrectAmount'),
      icon: 'none'
    })
    return
  } else if (amount.value > settledAmount.value) {
    uni.showToast({
      title: $t('distribution.insufficientBalance'),
      icon: 'none'
    })
    return
  } else if (amount.value < amountMin.value) {
    uni.showToast({
      title: $t('distribution.lessThanWithdrawalAmount'),
      icon: 'none'
    })
    return
  }
  http.request({
    url: '/mall4cloud_marketing/distribution_withdraw_cash/apply',
    method: 'POST',
    data: {
      amount: amount.value
    }
  }).then(() => {
    uni.showModal({
      content: $t('distribution.withdrawalApplicationSubmitted'),
      showCancel: false,
      cancelText: $t('distribution.cancel'),
      confirmText: $t('distribution.confirm'),
      complete () {
        uni.navigateTo({
          url: '/package-activities/pages/withdrawal-record/withdrawal-record'
        })
      }
    })
  })
}

// 去提现记录
const onToWithdrawalRecord = () => {
  uni.navigateTo({
    url: '/package-activities/pages/withdrawal-record/withdrawal-record'
  })
}

</script>

<style lang="scss" scoped>
@use "./withdrawal.scss";
</style>
