<template>
	<z-paging :refresher-enabled="false" :show-loading-more-when-reload="true" loading-more-default-text=""
		loading-more-loading-text="" loading-more-fail-text="" :empty-view-text="t('common.noData')"
		:show-loading-more-no-more-view="false" ref="paging" v-model="dataList" @query="queryList"
		class="max-w-[750px]">
		<h-dark :title="t('funds.assetDetails')"></h-dark>
		<view class="user-wallet">
			<view class="bg-[#4E55AF] pb-[30rpx]">
				<u-tabs show-bar="false" bg-color="#4E55AF" active-color="#A1DBF5" inactive-color="#FFFFFF" :is-scroll="false" :list="tabList" v-model="current" @change="changeType"></u-tabs>
			</view>
			<view class="pt-2.5 mx-[30rpx]">
				<navigator v-for="item in dataList" :key="item.id" hover-class="none"
					:url="'/packages/pages/user_wallet/order_detail?id='+item.id">
					<view class="bg-[#2C326B] mb-[20rpx] rounded-lg px-[40rpx] py-[35rpx]">
						<view class="flex justify-between">
							<view class="w-3/5">
								<view class="">{{item.create_time}}</view>
								
							</view>
							<view class="text-right w-2/5">
								<text class="font-bold">
									{{item.amount}}
								</text>
							</view>
						</view>
						<view class="flex justify-between mt-[16rpx]">
							<view class="text-[#00D2E0]">
								<view class="">
									{{item.type}}
								</view>
								<view class="text-error mt-[12rpx]" v-if="item.remark">
									{{item.remark}}
								</view>
							</view>
							<view class="text-success" v-if="item.action==1">
								{{tabList[1]['name']}}
							</view>
							<view class="text-error" v-if="item.action==2">
								{{tabList[2]['name']}}
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</z-paging>
</template>

<script lang="ts" setup>
	import { ref, shallowRef } from 'vue'
	import { financeLists } from '@/api/finance'
	import { getUserInfo } from '@/api/user'
	import { getCurrency,getCurrency2, formatDate, formatMoney } from '@/utils/util'
	import { t } from '@/utils/util'
	uni.setNavigationBarTitle({ title: t('funds.assetDetails') })
	const tabList = ref([
		{
			name: t('tabs.all'),
			type: ''
		},
		{
			name: t('tabs.in'),
			type: 1
		},
		{
			name: t('tabs.out'),
			type: 2
		}
	])
	const paging = shallowRef()
	const dataList = ref<any[]>([])
	const current = ref(0)
	const user = ref([])

	const changeType = (index : number) => {
		current.value = index
		paging.value.reload()
	}

	const queryList = async (pageNo : number, pageSize : number) => {
		try {
			const action = tabList.value[current.value].type
			const data = await financeLists({
				frozen: '',
				action: action,
				page_no: pageNo,
				page_size: pageSize,
				date: formatDate(Math.round(Date.now() / 1000))
			})
			Object.keys(data.lists).forEach(key => {
				data.lists[key]['amount'] = getCurrency() + formatMoney(data.lists[key]['amount']) + ' ' +  getCurrency2()
				data.lists[key]['type'] = t("finance.type" + data.lists[key]['type'])
			})
			paging.value.complete(data.lists)
		} catch (error) {
			paging.value.complete(false)
		}
	}
	const getData = async () => {
		user.value = await getUserInfo()
	}
	getData()
</script>

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