<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '提现',
  },
}
</route>
<template>
  <view class="min-h-screen pb-100">
    <NavBar>
      <template #right>
        <image
          @click="onWithdrawalDetail"
          src="/static/images/page-sub/recharge.png"
          class="w-24 h-24"
        />
      </template>
    </NavBar>
    <view class="p-15">
      <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.cash_money"
            type="number"
            placeholder="请输入提现金额"
            class="text-14 text-#333 flex-1"
          />
          <view
            class="text-12 text-#04A9F9"
            @click="form.cash_money = Number(userStore.userInfo.member_balance ?? 0)"
          >
            全部
          </view>
        </view>
        <view class="text-12 text-#889BC6 mt-15">
          当前余额：{{ userStore.userInfo.member_balance }}
        </view>
      </view>

      <view class="mt-50">
        <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">
            {{ typeName ? `${typeName}：${currentBank?.card_account}` : '请选择收款方式' }}
          </view>
          <wd-icon name="arrow-right" size="16px"></wd-icon>
        </view>
      </view>

      <view class="mt-50">
        <view class="text-14 text-#333">交易密码</view>
        <view class="text-14 mt-15 text-#333 p-16 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
          <input
            type="password"
            v-model="form.pay_password"
            placeholder="请输入交易密码"
            class="text-14 text-#333"
          />
        </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="flex items-center pb-safe">
        <view class="text-gradient flex-1 text-14">到账CNY:13123.00</view>
        <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 { applyWithdrawalAPI } from '@/service'
import { useUserStore } from '@/store'
import { showModal } from '@/utils'
import { ref } from 'vue'

const userStore = useUserStore()

const form = ref({
  cash_money: 0,
  cash_remark: '',
  bank_id: '',
  pay_password: '',
})

const typeName = computed(() => {
  return ['银行卡', '支付宝', '微信'][Number(unref(currentBank)?.card_type) - 1]
})

const currentBank = ref<any>(null)

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

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

const onSubmit = async () => {
  if (!form.value.bank_id) {
    return uni.showToast({
      title: '请选择收款方式',
      icon: 'none',
    })
  }
  if (!form.value.bank_id) {
    return uni.showToast({
      title: '请选择收款方式',
      icon: 'none',
    })
  }

  if (!form.value.pay_password) {
    return uni.showToast({
      title: '请输入交易密码',
      icon: 'none',
    })
  }
  if (!form.value.cash_money) {
    return uni.showToast({
      title: '请输入提现金额',
      icon: 'none',
    })
  }
  await applyWithdrawalAPI(form.value)
  await showModal('申请成功')
  uni.redirectTo({
    url: '/pages-sub/invest-result/index',
  })
}
</script>

<style scoped></style>
