<template>
	<view>
		<h-dark title=""></h-dark>
		<view class="bg-[#4E55AF] px-[30rpx] pt-[30rpx]  pb-[300rpx]">
			<view class=" flex flex-col items-center">
				<u-image width="300" height="180" mode="widthFix"
					src="/static/images/withdraw/withdraw_bg.png"></u-image>
			</view>
		</view>
		<view class="bg-[#2C326B]  rounded-lg p-[50rpx] mx-[30rpx] mt-[-260rpx]">
			<view class="flex justify-between mb-[40rpx]">
				<view class="w-1/4">
					{{t('withdraw.withdrawMethod')}}
				</view>
				<view class="w-3/4 text-right ">
					{{orderData.account}}
				</view>
			</view>
			<view class="flex justify-between mb-[40rpx]">
				<view class="w-1/4">
					{{t('orderDetail.status')}}
				</view>
				<view v-if="orderData.status==1" class="w-3/4 text-right text-success ">
					{{t('tabs.finish')}}
				</view>
				<view v-if="orderData.status==0" class="w-3/4 text-right  text-primary ">
					{{t('tabs.pending')}}
				</view>
				<view v-if="orderData.status==2" class="w-3/4 text-right  text-error ">
					{{t('tabs.fail')}}
				</view>
			</view>
			<view class="flex justify-between mb-[40rpx]">
				<view class="w-1/4">
					{{t('orderDetail.orderSn')}}
				</view>
				<view class="w-3/4 text-right ">
					{{orderData.sn}}
				</view>
			</view>
			<view class="flex justify-between mb-[40rpx]">
				<view class="w-1/4">
					{{t('orderDetail.createTime')}}
				</view>
				<view class="w-3/4 text-right ">
					{{orderData.create_time}}
				</view>
			</view>
			<view class="flex justify-between mb-[40rpx]" v-if="orderData.status==2">
				<view class="w-1/4">
					{{t('orderDetail.remark')}}
				</view>
				<view class="w-3/4 text-right  text-error break-words">
					<text v-if="orderData.reamrk==''">{{t('withdraw.withdrawFailTips')}}</text>
					<text v-if="orderData.reamrk!=''">{{orderData.remark}}</text>
				</view>
			</view>
			<u-line class="text-info" margin="20rpx 0 40rpx 0" border-style="dashed" />
			<view class="flex justify-between">
				<view class="w-1/4">
					{{t('orderDetail.money')}}
				</view>
				<view class="w-3/4 text-right">
					<view v-if="orderData.status==1" class="text-lg font-bold text-success">
						{{getCurrency()}}{{formatMoney(orderData.amount)}} {{getCurrency2()}}
					</view>
					<view v-if="orderData.status==0" class="text-lg font-bold text-primary">
						{{getCurrency()}}{{formatMoney(orderData.amount)}} {{getCurrency2()}}
					</view>
					<view v-if="orderData.status==2" class="text-lg font-bold text-error">
						{{getCurrency()}}{{formatMoney(orderData.amount)}} {{getCurrency2()}}
					</view>
					<view class="mt-[10rpx]" v-if="orderData.rate && orderData.rate != 1">
						≈ {{orderData.amount_act}} {{orderData.symbol}}
					</view>
				</view>
			</view>
			<view class="flex justify-between mt-[40rpx]" v-if="orderData.charge>0">
				<view class="w-1/4">
					{{t('orderDetail.charge')}}
				</view>
				<view class="w-3/4 text-right  text-muted">
					{{getCurrency()}}{{formatMoney(orderData.charge)}} {{getCurrency2()}}
				</view>
			</view>
		</view>
		<view class="max-w-[750px] fixed bottom-[50rpx] w-4/5 ml-[10%]">
			<u-button type="primary" @click="handleBack"> {{t('common.back')}} </u-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { withdrawRecordDetail } from '@/api/finance'
	import { getCurrency,getCurrency2, formatDate, formatMoney, t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('withdraw.title') })
	const orderData = ref<any>({})
	let orderId = ''

	const getData = async (id) => {
		orderData.value = await withdrawRecordDetail({ id, date: formatDate(Math.round(Date.now() / 1000)) })
	}
	const handleBack = async () => {
		let canNavBack = getCurrentPages()
		if (canNavBack && canNavBack.length > 1) {
			uni.navigateBack()
		} else {
			history.back();
		}
	}
	onLoad((options : any) => {
		orderId = options.id
		getData(orderId)
	})
</script>

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