<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('orderDetail.money')}}
				</view>
				<view class="w-3/4 text-right">
					<text class=" font-bold " :class="orderData.action==1?'text-success':'text-error'">
						{{getCurrency()}}{{formatMoney(orderData.amount)}} {{getCurrency2()}}
					</text>
				</view>
			</view>
			<view class="flex justify-between mb-[40rpx]">
				<view class="w-1/4">
					{{t('orderDetail.name')}}
				</view>
				<view class="w-3/4 text-right ">
					{{t("finance.type"+orderData.type)}}
				</view>
			</view>
			<view class="flex justify-between mb-[40rpx]">
				<view class="w-1/4">
					{{t('orderDetail.type')}}
				</view>
				<view class="w-3/4 text-right " :class="orderData.action==1?'text-success':'text-error'">
					{{orderData.action==1?t('tabs.in'):t('tabs.out')}}
				</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.remark && orderData.remark!=''">
				<view class="w-1/4">
					{{t('orderDetail.remark')}}
				</view>
				<view class="w-3/4 text-right text-error break-words">
					{{orderData.remark}}
				</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 { financeDetail } from '@/api/finance'
	import { getCurrency, getCurrency2,formatDate, formatMoney } from '@/utils/util'
	import { t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('funds.assetDetails') })
	const orderData = ref<any>({})
	let orderId = ''

	const getData = async (id) => {
		orderData.value = await financeDetail({ 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>