<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '提现',
  },
}
</route>
<template>
  <view class="min-h-screen pb-100">
    <NavBar title-color="#333">
      <template #right>
        <image
          @click="onWithdrawalDetail"
          src="/static/images/page-sub/recharge.png"
          class="w-24 h-24"
        />
      </template>
    </NavBar>
    <view
      class="m-15 text-white flex rounded-tl-10 rounded-br-10 justify-between items-center p-15 bg-[linear-gradient(90deg,rgba(59,129,243,0.5),#3B81F3)]"
    >
      <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="text-14 text-#889BC6 mt-30">提现说明（TIPS）</view>
        <view class="text-12 text-#889BC6 mt-15">
          <view>1、如遇到系统结算繁忙，结算将会延迟到账</view>
          <view class="mt-4">2、提现将会提现至您的工商银行卡;</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 onSubmit = async () => {
  if (!form.value.money) {
    return uni.showToast({
      title: '请输入提现金额',
      icon: 'none',
    })
  }

  await showModal('确认提现？')
  await submitWithdrawalAPI(form.value)
  await showModal('提交成功')
  onWithdrawalDetail()
}
</script>

<style scoped></style>
