<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '充值记录',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>
<template>
  <view class="min-h-screen pb-100">
    <template v-if="list.length">
      <view
        class="flex px-15 py-8 border-b border-#E5E5E5 border-b-solid"
        v-for="item in list"
        :key="item.id"
      >
        <image
          v-if="getCurrentWallet(item.wall_id).wallet_crad_type === 1"
          src="/static/images/invest/unionpay-icon.png"
          class="w-32 h-32 self-center"
        />
        <image
          v-if="getCurrentWallet(item.wall_id).wallet_crad_type === 2"
          src="/static/images/invest/alipay-icon.png"
          class="w-32 h-32 self-center"
        />
        <image
          v-if="getCurrentWallet(item.wall_id).wallet_crad_type === 3"
          src="/static/images/invest/wechat-icon.png"
          class="w-32 h-32 self-center"
        />
        <view class="flex flex-col flex-1 justify-between ml-15">
          <view class="text-14 text-#333">{{ getCurrentWallet(item.wall_id).wallet_name }}</view>
          <view class="text-12 text-#999">充值</view>
          <view class="text-12 text-#999">{{ item.create_time }}</view>
        </view>

        <view class="flex flex-col items-end">
          <view class="text-16 text-#FF5F5F">+{{ item.change_money }} RMB</view>
          <view
            class="text-14 mt-18 py-4 px-10 bg-gray-400 text-white"
            v-if="item.change_status === 0"
          >
            充值中
          </view>
          <view
            class="text-14 mt-18 py-4 px-10 bg-#71C78A1A text-#71C78A"
            v-else-if="item.change_status === 1"
          >
            充值成功
          </view>

          <view
            class="text-14 mt-18 py-4 px-10 bg-#FF5F5F text-white"
            v-else-if="item.change_status === 2"
          >
            充值失败
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <wd-status-tip image="content" tip="暂无数据" />
    </template>
  </view>
</template>

<script setup lang="ts">
import { getRechargeRecordAPI, getSystemRechargeAccountAPI } from '@/service'

const { list } = useListPageRequest(getRechargeRecordAPI)

const walletList = ref<any[]>([])
onMounted(async () => {
  const {
    data: { list },
  } = await getSystemRechargeAccountAPI({
    wallet_type: 1,
  })
  walletList.value = list
})

const getCurrentWallet = (id: string) => {
  return walletList.value.find((item) => item.id === id)
}
</script>
