<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '%wallet.myWallet.title%',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app' // 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'

import { getWalletAccountInfo, walletFlowList } from '@/api/wallet'
import { formatNumber } from '@/utils'
import { toPage } from '@/utils/page'
// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)

const dayType = ref(1)
const walletInfo = ref<any>({})
async function getWalletInfo() {
  // 获取钱包信息-查询余额
  const res = await getWalletAccountInfo()
  console.log(res)
  walletInfo.value = res?.data
}
const dataList = ref<any[]>([])
async function getWalletFlowList(pageNo: number, pageSize: number) {
  const data = {
    page: pageNo,
    size: pageSize,
    type: dayType.value,
  }
  try {
    const res = await walletFlowList(data)
    console.log(res)
    paging.value.complete(res.data.list)
  }
  catch (error) {
    paging.value.complete(false)
  }
}
onShow(() => {
  getWalletInfo()
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" use-page-scroll @on-refresh="getWalletInfo" @query="getWalletFlowList">
    <view class="px-24rpx pt-20rpx">
      <view
        class="mb-20rpx flex items-center justify-around rounded-12rpx bg-[rgba(var(--wot-color-theme-rgb),0.1)] px-16rpx py-22rpx"
      >
        <view class="text-center">
          <view class="text-22rpx text-#595959">
            {{ $t('wallet.balance') }}
          </view>
          <view class="mb-22rpx text-44rpx text-[var(--wot-color-theme)] font-bold">
            {{ formatNumber(walletInfo.balance) }}
          </view>
          <view class="flex items-center text-22rpx text-#595959">
            <text class="mr-1px">
              {{ $t('wallet.frozenBalance') }}
            </text>
            <wd-icon name="help-circle" size="20rpx" />
          </view>
          <view class="text-26rpx font-bold">
            {{ formatNumber(walletInfo.freezeAmount) }}
          </view>
        </view>
        <view class="flex flex-col items-end">
          <wd-button size="small" @click="toPage('/pages/wallet/recharge')">
            {{ $t('wallet.recharge') }}
          </wd-button>
        </view>
      </view>
      <view class="mb-20rpx flex justify-center">
        <view class="flex items-center justify-center" @click="toPage('/pages/wallet/withdraw', { balance: walletInfo.balance, type: 1 })">
          <text class="mr-8rpx">
            {{ $t('wallet.withdrawNow') }}
          </text>
          <wd-icon name="arrow-right" size="28rpx" />
        </view>
      </view>
      <view>
        <view class="mb-20rpx text-32rpx">
          {{ $t('wallet.record') }}
        </view>
        <view class="mb-20rpx">
          <wd-radio-group v-model="dayType" shape="button">
            <wd-radio :value="1">
              DT
            </wd-radio>
            <wd-radio :value="2">
              YT
            </wd-radio>
            <wd-radio :value="3">
              L7D
            </wd-radio>
            <wd-radio :value="4">
              MTD
            </wd-radio>
            <wd-radio :value="5">
              YTD
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="rounded-16rpx bg-white px-20rpx">
          <view
            v-for="(item, index) in dataList" :key="item.id" class="py-20rpx"
            :class="{ 'border-b-1 border-b-solid border-b-#E1E1E1': index !== dataList.length - 1 }"
          >
            <view class="mb-8rpx flex items-center justify-between text-24rpx">
              <text class="truncate">
                Group Buying Reward：PPB123456789Reward：PPB123456789Reward：PPB123456789
              </text>
              <text class="flex-shrink-0 pl-16rpx">
                ৳ 8
              </text>
            </view>
            <view class="flex items-center justify-between text-22rpx">
              <text class="text-#5B5B5B">
                2025/05/05 12:30:30
              </text>
              <wd-text type="success" text="Completed" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
:deep(.wd-radio-group) {
  background: transparent;

  .wd-radio.is-button.is-checked {
    .wd-radio__label {
      background: #ff334a !important;
      border-color: #ff334a !important;
      color: #fff !important;
    }
  }

  .wd-radio__label {
    width: 100rpx !important;
    height: 40rpx !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(151, 151, 151, 0.2) !important;
  }
}
</style>
