<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '充值',
  },
}
</route>
<template>
  <view class="recharge-page min-h-screen pb-100">
    <NavBar>
      <template #right>
        <image @click="onRecharge" 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="text-14 mt-15 text-#333 p-16 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
          <input
            v-model="form.change_money"
            type="number"
            placeholder="请输入充值金额"
            class="text-14 text-#333"
          />
        </view>
      </view>

      <view class="mt-15">
        <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">
          <wd-select-picker
            type="radio"
            custom-class="!p-0"
            custom-value-class="text-14 text-#889BC6"
            class="flex-1"
            placeholder="请选择充值方式"
            v-model="walletType"
            :columns="columns"
          ></wd-select-picker>

          <!-- 用卡片展示收款银行信息 -->
          <view class="mt-15">
            <!-- 银行卡信息 -->
            <view class="mt-15" v-if="walletType === 1">
              <view class="mt-15 flex items-center justify-between">
                <view class="text-14 text-#333">银行名称</view>
                <view class="text-14 text-#889BC6">{{ currentWallet.wallet_name }}</view>
              </view>
              <view class="mt-15 flex items-center justify-between">
                <view class="text-14 text-#333">银行账号</view>
                <view class="text-14 text-#889BC6">{{ currentWallet.wallet_account }}</view>
              </view>
              <view class="mt-15 flex items-center justify-between">
                <view class="text-14 text-#333">银行户名</view>
                <view class="text-14 text-#889BC6">{{ currentWallet.wallet_username }}</view>
              </view>
            </view>
            <!-- 支付宝信息 -->
            <view class="mt-15" v-if="walletType === 2">
              <view class="mt-15 flex items-center justify-between">
                <view class="text-14 text-#333">支付宝账号</view>
                <view class="text-14 text-#889BC6">{{ currentWallet.wallet_account }}</view>
              </view>
              <view class="mt-15 flex items-center justify-between">
                <view class="text-14 text-#333">支付宝户名</view>
                <view class="text-14 text-#889BC6">{{ currentWallet.wallet_username }}</view>
              </view>
            </view>
            <!-- 微信信息 -->
            <view class="mt-15" v-if="walletType === 3">
              <view class="mt-15 flex items-center justify-between">
                <view class="text-14 text-#333">微信账号</view>
                <view class="text-14 text-#889BC6">{{ currentWallet.wallet_account }}</view>
              </view>
              <view class="mt-15 flex items-center justify-between">
                <view class="text-14 text-#333">微信户名</view>
                <view class="text-14 text-#889BC6">{{ currentWallet.wallet_username }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="mt-15">
        <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
            v-model="form.bank_account"
            type="number"
            placeholder="请输入充值账号"
            class="text-14 text-#333"
          />
        </view>
      </view>
      <view class="mt-15">
        <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">
          <view @click="handleUpload" class="text-14 text-gradient">上传截图</view>
          <image
            v-if="form.change_image"
            mode="aspectFill"
            @click="handlePreview"
            class="w-100 h-100 mt-15 rounded-10"
            :src="form.change_image"
          />
        </view>
      </view>
    </view>
    <view class="fixed bottom-0 left-0 right-0 px-15 pb-safe">
      <view
        class="btn-gradient mb-15 text-center text-white rounded-full text-16 px-30 py-10"
        @click="onSubmit"
      >
        提交
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import { getSystemRechargeAccountAPI, rechargeAPI } from '@/service'
import { mergeStep, showModal } from '@/utils'

const walletType = ref(1)
const columns = [
  {
    label: '银行卡',
    value: 1,
  },
  {
    label: '支付宝',
    value: 2,
  },
  {
    label: '微信',
    value: 3,
  },
]

const form = ref({
  change_money: '',
  bank_account: '',
  change_image: '',
  wall_id: '',
})

const currentWallet = ref<any>(null)

watch(
  () => columns[walletType.value - 1]?.value,
  async (walletCradType) => {
    const {
      data: { list },
    } = await getSystemRechargeAccountAPI({
      wallet_type: 1,
      wallet_crad_type: walletCradType,
    })
    currentWallet.value = list[0]
    form.value.wall_id = list[0].id
  },
  { immediate: true },
)

const { data, run } = useUpload<any>()
const handleUpload = () => {
  run()
}

watch(data, async (newVal) => {
  const path = JSON.parse(newVal)?.data?.path
  form.value.change_image = path
})

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

const onSubmit = mergeStep(async () => {
  if (!form.value.change_image) {
    uni.showToast({
      title: '请上传付款截图',
      icon: 'none',
    })
    return
  }
  if (!form.value.bank_account) {
    uni.showToast({
      title: '请输入充值账号',
      icon: 'none',
    })
    return
  }

  if (!form.value.change_money) {
    uni.showToast({
      title: '请输入充值金额',
      icon: 'none',
    })
    return
  }
  await rechargeAPI(form.value)
  await showModal('充值成功')
  uni.redirectTo({
    url: '/pages-sub/invest-result/index',
  })
})
const handlePreview = () => {
  uni.previewImage({
    urls: [form.value.change_image],
  })
}
</script>

<style lang="scss" scoped>
.recharge-page {
  --wot-input-placeholder-color: #889bc6;
  --wot-cell-wrapper-padding: 0;
  --wot-cell-padding: 0;
}
</style>
