<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '%wallet.recharge.title%',
    navigationBarBackgroundColor: '#fff',
    "app-plus": {
      "titleNView": {
        "buttons": [
          {
            "text": "Record",
            "fontSize": "28rpx",
            "width": "85px"
          }
        ]
      }
    }
  },
}
</route>

<script lang="ts" setup>
import { paymentMethod, rechargeAdd, rechargeGoodsList } from '@/api/wallet'
import { formatNumber } from '@/utils'
import { toPage } from '@/utils/page'

defineOptions({
  name: 'Recharge', // 充值
})
const selectData = ref<any>({
  methodId: '',
  id: '',
  amount: '',
  customAmount: '',
})
const methodIconMap = {
  BKASH: '/static/icons/bkash.png',
  NAGAD: '/static/icons/nagad.png',
  ROCKET: '/static/icons/rocket.png',
}
// 触发确定按钮
onNavigationBarButtonTap((event: any) => {
  if (event.text === 'Record') {
    toPage('/pages/wallet/rechargeRecord')
  }
})
const methodList = ref<any[]>([])

async function getMethodList() {
  const res = await paymentMethod()
  methodList.value = res.data
  await getRechargeGoodsList()
}

const dataList = ref<any[]>([])
const interval = ref<any>({
  maxPrice: 0,
  miniPrice: 0,
})
async function getRechargeGoodsList(id?: string) {
  selectData.value.methodId = id || methodList.value[0].id
  const res = await rechargeGoodsList({ id: selectData.value.methodId })
  if (res.code === '200') {
    dataList.value = res.data.list
    interval.value = {
      maxPrice: res.data.maxPrice,
      miniPrice: res.data.miniPrice,
    }
  }
}

function handleSelectAmount(item: any) {
  selectData.value.id = item.id
  selectData.value.amount = item.amount
  selectData.value.customAmount = ''
}

function focusAmount() {
  selectData.value.id = ''
  selectData.value.amount = ''
}

async function submit() {
  const amount = selectData.value.customAmount || selectData.value.amount
  const addRes = await rechargeAdd({ amount, methodId: selectData.value.methodId })
  if (addRes.code === '200') {
    toPage('/pages/webLink/webLink', { link: addRes.data.payUrl }, true)
  }
}

onShow(() => {
  getMethodList()
})
</script>

<template>
  <z-paging>
    <view class="px-24rpx pt-36rpx">
      <view class="mb-24rpx text-24rpx font-bold">
        Select Your Wallet Provider
      </view>
      <view class="grid grid-cols-3 mb-30rpx gap-20rpx">
        <view
          v-for="item in methodList" :key="item.id"
          :style="{
            borderColor: item.id === selectData.methodId ? 'var(--wot-color-theme)' : '',
          }"
          class="border-1 border-transparent rounded-16rpx border-solid bg-white py-30rpx text-center shadow-[0rpx_2rpx_8rpx_0rpx_rgba(184,184,184,0.5)]"
          @click="getRechargeGoodsList(item.id)"
        >
          <image
            :src="methodIconMap[item.methodName]"
            class="mb-20rpx h-120rpx w-120rpx"
          />
          <view class="text-28rpx">
            {{ item.methodName }}
          </view>
        </view>
      </view>
      <view class="mb-24rpx text-24rpx font-bold">
        Deposit Amount
      </view>
      <view class="grid grid-cols-3 mb-20rpx gap-20rpx">
        <view
          v-for="i in dataList"
          :key="i.id"
          class="border-1 border-transparent rounded-12rpx border-solid bg-white py-22rpx text-center"
          :style="{
            borderColor: i.id === selectData.id ? 'var(--wot-color-theme)' : '',
          }"
          @click="handleSelectAmount(i)"
        >
          <view>
            <text class="text-24rpx">
              ৳
            </text>
            <text class="text-36rpx">
              {{ formatNumber(i.amount) }}
            </text>
          </view>
        </view>
      </view>
      <wd-input
        v-model="selectData.customAmount"
        no-border
        :placeholder="`৳ Min ${formatNumber(interval.miniPrice)} ~ ৳ ${formatNumber(interval.maxPrice)}`"
        custom-class="bandhu-auth-input-field"
        @focus="focusAmount"
      />
    </view>

    <template #bottom>
      <view class="mb-20rpx px-24rpx text-24rpx text-#5A5A5A">
        Reminder: If the recharge is not successful, please select another channel. Transaction ID must be filled in correctly.
      </view>
      <view class="bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
        <wd-button block :disabled="!selectData.amount && !selectData.customAmount" @click="submit">
          {{ $t('wallet.recharge.submit') }}
        </wd-button>
      </view>
    </template>
  </z-paging>
</template>

<style lang="scss" scoped></style>
