<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 TInputText from "@/components/ui/TInputText.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TButton from "@/components/ui/TButton.vue";
import TOption from "@/components/ui/TOption.vue";
import Pager from "@/components/common/Pager.vue";
import Keyword from "@/components/common/Keyword.vue";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<form action="/finance/logs">
		<div class="ui fields inline">
			<div class="ui field">
				<TInputText placeholder="描述" name="keyword" v-model="ctx.keyword"/>
			</div>
			<div class="ui field">
				<TSelect name="eventType" v-model="ctx.eventType">
					<TOption value="">[所有类型]</TOption>
					<TOption v-for="event in ctx.events" :value="event.code">{{event.name}}</TOption>
				</TSelect>
			</div>
			<div class="ui field">
				<TButton secondary="" type="submit">搜索</TButton>
				&nbsp;
				<a href="/finance/logs" v-if="ctx.keyword.length > 0 || ctx.eventType.length > 0">[清除条件]</a>
			</div>
		</div>
	</form>

	<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="three 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.deltaFormatted}}元</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.totalFormatted}}元</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>

	<Pager :data="ctx.page"></Pager>
</template>

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