<script lang="ts" setup>
import dayjs from "dayjs";
import {appUserWithdrawalDetailPost} from "@/service";

const {t} = useI18n()

const withdrawalDetail = ref({});
onLoad((options) => {
  appUserWithdrawalDetailPost({
    body: {
      id: options.id,
    }
  }).then((res) => {
    console.log('Withdrawal Detail:', res);
    // 处理提现详情数据
    withdrawalDetail.value = res.data;
  })
})
</script>
<template>
  <navbar :title="t('pages-user.income.title')"/>
  <view class="relative">
    <image class="w-full h-322rpx" src="@img/chef/100415@2x.png"></image>
    <view class="center w-full absolute top-66rpx left-1/2 -translate-x-1/2">
      <image v-if="+withdrawalDetail.status === 2" class="w-80rpx h-80rpx" src="@img/chef/100417@2x.png"></image>
      <image v-if="+withdrawalDetail.status === 3" class="w-80rpx h-80rpx" src="@img/chef/100418@2x.png"></image>
      <image v-if="+withdrawalDetail.status === 1" class="w-80rpx h-80rpx" src="@img/chef/100419@2x.png"></image>
      <text class="text-36rpx text-#fff font-bold ml-38rpx">
        <view v-if="+withdrawalDetail.status === 1">{{ t('pages-user.store-settle-in.audit.submitted') }}</view>
        <view v-if="+withdrawalDetail.status === 2">{{
            t('pages-user.store-settle-in.audit.pass')
          }}
        </view>
        <view v-if="+withdrawalDetail.status === 3">{{
            t('pages-user.store-settle-in.audit.reject')
          }}
        </view>
      </text>
    </view>
    <image class="w-683rpx h-34rpx absolute top-200rpx left-1/2 -translate-x-1/2" src="@img/chef/100414@2x.png"></image>
    <view class="w-640rpx bg-white absolute top-217rpx left-1/2 -translate-x-1/2">
      <view class="pt-42rpx pb-36rpx border-bottom text-center">
        <view class="text-45rpx text-#005018 leading-45rpx font-bold">${{ withdrawalDetail.withdrawalAmount }}</view>
        <view class="text-28rpx text-#999 leading-28rpx mt-16rpx">{{ t('pages-user.income.index.withdrawalAmount') }}</view>
      </view>

      <view class="px-30rpx py-36rpx">
        <view class="flex items-start">
          <view class="text-28rpx text-#999 leading-28rpx">{{ t('pages-user.income.index.withdrawalAccount') }}</view>
          <view class="text-28rpx text-#333 leading-28rpx">
            {{ withdrawalDetail.card }}
            <br>
            {{ withdrawalDetail.bankName }}
          </view>
        </view>

        <view class="my-44rpx flex items-start">
          <view class="text-28rpx text-#999">{{ t('pages-user.income.index.withdrawalTime') }}</view>
          <view class="text-28rpx text-#333">
            {{ dayjs(Number(withdrawalDetail.createTime)).format('YYYY-MM-DD HH:mm') }}
          </view>
        </view>

        <view class="my-44rpx flex items-start">
          <view class="text-28rpx text-#999">{{ t('pages-user.income.index.handlingFee') }}</view>
          <view class="text-28rpx text-#333">
            {{ withdrawalDetail.withdrawalFee }}
          </view>
        </view>

        <view v-if="+withdrawalDetail.status === 2">
          <view class="text-28rpx text-#999 leading-28rpx font-bold mb-30rpx">{{ t('pages-user.income.index.paymentVoucher') }}</view>
          <wd-img :enable-preview="true" :src="withdrawalDetail.images" height="160rpx" mode="aspectFill"
                  width="160rpx"/>
        </view>
        <view v-if="+withdrawalDetail.status === 3">
          <view class="text-28rpx text-#999 leading-28rpx font-bold">{{ t('pages-user.income.index.auditFailureReason') }}</view>
          <text class="text-26rpx text-#000 leading-36rpx font-bold">{{ withdrawalDetail.failReason }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
page {
  background-color: #F5F5F5;
}
</style>