<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 Menu from "./@menu.vue"
import Pager from "@/components/common/Pager.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import Navbar from "@/components/common/Navbar.vue";
import NavTab from "@/components/common/NavTab.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu active-tab="index"></Menu>

	<Navbar secondary>
		<template #tabs>
			<NavTab href="/servers/packages" :active="ctx.type == ''" name="可用流量包"></NavTab>
			<NavTab href="/servers/packages?type=all" :active="ctx.type == 'all'" name="所有流量包"></NavTab>
		</template>
	</Navbar>

	<p class="comment" v-if="ctx.userPackages.length == 0">
		<span v-if="ctx.type == ''">暂时还没有可用的流量包。</span>
		<span v-if="ctx.type == 'all'">暂时还没有流量包。</span>
	</p>

	<div v-if="ctx.userPackages.length > 0">
		<ListTable :items="ctx.userPackages">
			<Column header="流量包" frozen class="normal-value-column">
				<template #body="{data:up}">
					<span v-if="up.package != null">{{ up.package.size }}{{ up.package.unit.toUpperCase().replace(/(.)B/, "$1iB") }}</span>
					<span v-else class="disabled">[已删除]</span>

					<div v-if="up.isUsedAll || up.isExpired">
						<span v-if="up.isUsedAll" class="small red">已用尽</span>
						<span v-else-if="up.isExpired" class="small red">已过期</span>
					</div>
				</template>
			</Column>
			<Column header="区域" class="value-column">
				<template #body="{data:up}">
					<span v-if="up.region != null">{{ up.region.name }}</span>
					<span v-else class="disabled">[已删除]</span>
				</template>
			</Column>
			<Column header="有效期" class="value-column">
				<template #body="{data:up}">
					{{ up.periodCount }}{{ up.periodUnitName }}
				</template>
			</Column>
			<Column header="开始日期" class="date-column">
				<template #body="{data:up}">
					{{ up.dayFrom }}
				</template>
			</Column>
			<Column header="结束日期" class="date-column">
				<template #body="{data:up}">
					{{ up.dayTo }}
				</template>
			</Column>
			<Column header="已用流量" class="value-column">
				<template #body="{data:up}">
					<span :class="{disabled: up.usedSize == '0B'}">{{ up.usedSize }}</span>
				</template>
			</Column>
			<Column header="剩余流量" class="value-column">
				<template #body="{data:up}">
					<span :class="{disabled: up.availableSize == '0B'}">{{ up.availableSize }}</span>
				</template>
			</Column>
			<Column header="购买时间" class="datetime-column">
				<template #body="{data:up}">
					{{ up.createdTime }}
				</template>
			</Column>
		</ListTable>

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

</template>

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