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

const ctx = ctxRef(new Context())

</script>

<template>
	<div v-if="ctx.bills.length > 0" class="mb-4">
		<p>未支付账单总额：{{ctx.unpaidAmount}}元，账号总余额为：{{ctx.accountTotal}}元。<a href="/finance/charge"><span class="red" v-if="ctx.unpaidAmount > ctx.accountTotal">您的余额已不足以支付账单，请及时充值。</span></a></p>
	</div>

	<form method="get" action="/finance/bills">
		<div class="ui fields inline">
			<div class="ui field">
				<TSelect name="paidFlag" v-model="ctx.paidFlag">
					<TOption value="-1">[支付状态]</TOption>
					<TOption value="0">未支付</TOption>
					<TOption value="1">已支付</TOption>
				</TSelect>
			</div>
			<div class="ui field">
				<TButton secondary="" type="submit">搜索</TButton>
			</div>
		</div>
	</form>

	<NotFoundInfo v-if="ctx.bills.length == 0">暂时还没有账单。</NotFoundInfo>

	<div v-if="ctx.bills.length > 0" class="mt-4">
		<ListTable :items="ctx.bills">
			<Column header="账单编号" frozen style="min-width: 14em">
				<template #body="{data:bill}">
					<a :href="'/finance/bills/bill?code=' + bill.code">{{bill.code}}</a>
					<div v-if="bill.isOverdue">
						<span class="ui red basic small">逾期</span>
					</div>
				</template>
			</Column>
			<Column header="结算周期" class="value-column">
				<template #body="{data:bill}">
					{{bill.pricePeriodName}}
				</template>
			</Column>
			<Column header="月份" class="value-column">
				<template #body="{data:bill}">
					{{bill.month}}
				</template>
			</Column>
			<Column header="日期" class="date-column">
				<template #body="{data:bill}">
			   		<span v-if="bill.pricePeriod == 'daily'">
						<span v-if="bill.dayFrom == bill.dayTo">{{bill.dayFrom}}</span>
						<span v-else>{{bill.dayFrom}} - {{bill.dayTo}}</span>
					</span>
				</template>
			</Column>
			<Column header="项目" class="value-column">
				<template #body="{data:bill}">
					{{bill.typeName}}
				</template>
			</Column>
			<Column header="金额" class="value-column">
				<template #body="{data:bill}">
					<span :class="{disabled: bill.amount == 0}">¥{{bill.amount}}元</span>
					<span class="grey small" v-if="!bill.canPay"><br/>预估</span>
				</template>
			</Column>
			<Column header="已支付" class="bool-column">
				<template #body="{data:bill}">
					<span class="green" v-if="bill.isPaid">Y</span>
					<span v-else class="disabled">N</span>
				</template>
			</Column>
			<Column header="操作" class="one op" frozen align-frozen="right">
				<template #body="{data:bill}">
					<a href="" v-if="!bill.isPaid && bill.canPay" @click.prevent="ctx.payBill(bill.id)">支付</a>
					<span v-if="bill.isPaid" class="disabled" title="已支付，无需重复支付">支付</span>
				</template>
			</Column>
		</ListTable>
	</div>

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

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