<template>
  <u-navbar title="提现" :autoBack="true" bgColor="#ffffff" placeholder safeAreaInsetTop :titleStyle="{ color: '#000' }">
    <template #right>
      <view class="navleft" @click="proxy.$h.jumpUrl(`/pages2/money/income?flag=withdraw`)">提现记录</view>
    </template>
  </u-navbar>
  <view class="money">
    <!-- <view class="money-title">提现到</view>
    <view class="flexJ" @click="proxy.$h.jumpUrl(`/pages2/money/bankCard?type=select`)">
      <template v-if="!SelectBankCardData?.id">
        <view class="sel">请选择银行卡</view>
      </template>
      <template v-if="SelectBankCardData?.id">
        <view class="flexA">
          <image :src="proxy.$h.downFile(SelectBankCardData?.icon) || '/static/images/auditerror.png'" mode="aspectFill" class="money-icon" />
          <view class="bankCard">{{ SelectBankCardData?.bank }}</view>
        </view>
      </template>
      <u-icon name="arrow-right" color="#666666" size="18"></u-icon>
    </view>
    <u-line margin="32rpx 0 56rpx 0"></u-line> -->
    <view class="money-title">提现金额</view>

    <view class="flexA">
      <view class="f">¥</view>
      <up-input placeholder="" border="none" v-model="params.amount" @change="e => limitDecimal(e)"></up-input>
    </view>
    <u-line margin="36rpx 0"></u-line>
    <view style="margin-bottom: 114rpx">
      <text class="redtext">可提现¥{{ parseFloat(amount).toFixed(2) || '0.00' }}</text>
      <text class="bluetext" @click="params.amount = amount">全部提现</text>
    </view>
    <view class="money-title">提现到</view>
    <u-radio-group iconPlacement="right" v-model="params.type">
      <template v-for="_ in withdrawList">
        <view style="width: 100%; margin-bottom: 32rpx">
          <view class="flexA">
            <image class="icon" :src="_.icon" mode="scaleToFill" />
            <view style="width: 100%">
              <u-radio activeColor="#05B8D2" :label="_.name" :name="_.type"></u-radio>
            </view>
          </view>
        </view>
      </template>
    </u-radio-group>
    <!--  有银行卡信息的时候显示 #05B8D2  没有的时候显示 #DADADA -->
    <up-button :color="'#05B8D2'" shape="circle" text="确认提现" throttleTime="1500" :customStyle="{ height: '94rpx', fontSize: '32rpx', marginTop: '42rpx' }" @click="confirmWithdrawDepositHandler"></up-button>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { storeToRefs } from 'pinia'
import { onShow } from '@dcloudio/uni-app'
import { useSelectDataStore } from '../../store/selectData'
import { updateAdd_withdraw, getMy, getUserCard } from '../../api'
import { BankCardItemType, UserInfoType, GetUserCardType } from '../../types'

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const { SelectBankCardData } = storeToRefs(useSelectDataStore())

const amount = ref(0)

const params = ref({ amount: 0, type: 1 })

const userCard = ref<GetUserCardType>()

const withdrawList = ref([
  { type: 1, icon: '/static/images/wechatpay.png', name: '微信' },
  { type: 2, icon: '/static/images/alipay.png', name: '支付宝' }
])

onShow(async () => {
  const { result }: { result: UserInfoType } = await getMy()

  amount.value = result.amount

  getUserCardHandler()
})

const getUserCardHandler = async () => (userCard.value = (await getUserCard()).result as GetUserCardType)

const confirmWithdrawDepositHandler = async () => {
  if (([null, undefined, ''].includes(userCard.value?.aliUserName) && params.value.type === 2) || ([null, undefined, ''].includes(userCard.value?.wxUserName) && params.value.type === 1))
    return uni.showModal({
      title: '提示',
      content: `您还没有${proxy.$h.optObjectValue('account', params.value.type)}提现账户，是否去绑定`,
      showCancel: true,
      success: ({ confirm }) => {
        if (confirm) {
          proxy.$h.jumpUrl(`/pages2/money/account`)
        }
      }
    })

  if (params.value.amount === 0) return uni.$u.toast('请输入提现金额')

  try {
    await updateAdd_withdraw({ ...params.value })

    uni.showModal({
      title: '提示',
      content: '提现成功,请等候后台审核',
      showCancel: false,
      success: () => {
        proxy.$h.backUrl(1)
      }
    })
  } catch (error) {
    uni.$u.toast(error)
  }
}

const regex = /^\d+(\.\d{0,2})?$/

const limitDecimal = (value: number) => {
  // if (!regex.test(value + '')) {
  //   params.value.amount = Math.floor(value * 100) / 100
  // }
}
</script>

<style lang="scss" scoped>
.navleft {
  color: #26292c;
  font-size: 28rpx;
}
.money {
  box-sizing: border-box;
  padding: 72rpx 32rpx 0;
  &-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    margin-right: 22rpx;
  }
  .bankCard {
    color: #323233;
    font-size: 34rpx;
    font-weight: 700;
  }
  .sel {
    color: #666666;
    font-size: 34rpx;
    font-weight: 700;
  }
  .f {
    color: #323233;
    font-size: 52rpx;
  }
  &-title {
    color: #323233;
    font-size: 36rpx;
    font-weight: 700;
    margin-bottom: 62rpx;
  }
  .bluetext {
    color: #05b8d2;
    font-size: 26rpx;
    font-weight: 700;
  }
  .redtext {
    color: #f33f2e;
    font-size: 26rpx;
    font-weight: 700;
    margin-right: 24rpx;
  }
}
:deep(.u-input__content__field-wrapper__field) {
  color: #323233;
  font-size: 50rpx !important;
  font-weight: 700;
}
.icon {
  width: 52rpx;
  height: 52rpx;
  margin-right: 16rpx;
  border-radius: 12rpx;
}
</style>