<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./index.js"
import Keyword from "@/components/common/Keyword.vue";
import CardView from "@/components/common/CardView.vue";
import CardRow from "@/components/common/CardRow.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<h5 class="!mb-4">账户余额</h5>
	<CardView>
		<CardRow>
			<template #name>余额</template>
			<template #value>{{ ctx.account.total }}元</template>
		</CardRow>
		<CardRow tip="冻结后不能使用的余额" v-if="ctx.account.totalFrozen > 0">
			<template #name>冻结</template>
			<template #value>{{ ctx.account.totalFrozen }}元</template>
		</CardRow>
	</CardView>

	<h5 class="group-header">最近收支明细<a href="/finance/logs" v-if="ctx.logs.length > 0"><span class="small grey">更多...</span></a>
	</h5>
	<NotFoundInfo v-if="ctx.logs.length == 0">暂时还没有收支明细。</NotFoundInfo>

	<table class="ui table selectable celled" v-if="ctx.logs.length > 0">
		<thead>
		<tr>
			<th class="two wide">操作类型</th>
			<th class="two wide">操作金额</th>
			<th class="two wide">冻结金额</th>
			<th class="two wide">剩余余额</th>
			<th class="two wide">剩余冻结余额</th>
			<th class="four wide">时间</th>
		</tr>
		</thead>
		<tbody v-for="log in ctx.logs">
		<tr>
			<td>
				<span v-if="log.event != null">{{ log.event.name }}</span>
				<span v-else class="disabled">其他</span>
			</td>
			<td>
				<span v-if="log.delta != 0" :class="{red: log.delta < 0, green: log.delta > 0}">{{ log.delta }}元</span>
				<span v-else class="disabled">0</span>
			</td>
			<td>
				<span v-if="log.deltaFrozen != 0">{{ log.deltaFrozen }}元</span>
				<span v-else class="disabled">0</span>
			</td>
			<td>{{ log.total }}元</td>
			<td><span :class="{disabled: log.totalFrozen == 0}">{{ log.totalFrozen }}元</span></td>
			<td>{{ log.createdTime }}</td>
		</tr>
		<tr v-if="log.description.length > 0">
			<td colspan="10">
				<span class="grey">描述：<Keyword :v-word="ctx.keyword">{{ log.description }}</Keyword></span>
			</td>
		</tr>
		</tbody>
	</table>
</template>

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