<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '提现',
  },
}
</route>
<template>
  <view class="min-h-screen pb-100">
    <NavBar title-color="#333" />
    <view
      class="m-15 text-white flex rounded-tl-10 rounded-br-10 justify-between items-center p-15 btn-gradient"
    >
      <view class="text-14">钱包余额</view>
      <view class="text-17 font-bold">{{ userStore.userInfo?.money }}</view>
    </view>
    <view class="p-15 bg-white shadow-[0_-2px_3px_rgba(10,68,245,0.1)] rounded-10">
      <view class="mt-15">
        <view class="text-14 text-#333">提现金额</view>
        <view
          class="flex items-center text-14 mt-15 text-#333 p-16 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10"
        >
          <input
            v-model="form.money"
            type="number"
            placeholder="请输入提现金额"
            class="text-14 text-#333 flex-1"
          />
          <view class="text-12 text-#04A9F9" @click="form.money = userStore.userInfo?.money">
            全部
          </view>
        </view>

        <view class="mt-15">
          <view class="text-14 text-#333">收款方式</view>
          <view
            class="flex items-center text-14 mt-15 text-#333 p-16 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10"
            @click="onSelectPayType"
          >
            <view class="flex-1">
              {{
                currentBank ? `${currentBank.kaihuhang}：${currentBank.banknum}` : '请选择收款方式'
              }}
            </view>
            <wd-icon name="arrow-right" size="16px"></wd-icon>
          </view>
        </view>

        <view class="text-14 text-#889BC6 mt-30">提现说明（TIPS）</view>
        <view class="text-12 text-#889BC6 mt-15">
          <view>1、如遇到系统结算繁忙，结算将会延迟到账</view>
        </view>
      </view>
    </view>
    <view
      class="bg-white fixed bottom-0 left-0 right-0 px-15 py-10 shadow-[0_0_10px_rgba(10,68,245,0.1)]"
    >
      <view class="pb-safe">
        <view
          class="btn-gradient text-center text-white rounded-full text-14 px-30 py-10"
          @click="onSubmit"
        >
          提现
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import { submitWithdrawalAPI } from '@/service'
import { useUserStore } from '@/store'
import { showModal } from '@/utils'

const userStore = useUserStore()

const form = ref({
  money: '',
})

const onWithdrawalDetail = () => {
  uni.navigateTo({
    url: '/pages-sub/withdrawal-detail/index',
  })
}

const currentBank = ref<any>(null)
const onSelectPayType = () => {
  uni.$once('withdrawal-type', (data: any) => {
    form.value.bankid = data.id
    currentBank.value = data
  })
  uni.navigateTo({
    url: '/pages-sub/withdrawal-type/index?type=select',
  })
}

const onSubmit = async () => {
  if (!form.value.money) {
    return uni.showToast({
      title: '请输入提现金额',
      icon: 'none',
    })
  }

  await showModal('确认提现？')
  const res = await submitWithdrawalAPI(form.value)
  await showModal(res.msg ? res.msg : '提交成功')
  onWithdrawalDetail()
}
</script>

<style scoped></style>
