<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 PlanLimitView from "@/components/plans/PlanLimitView.vue";
import PlanBandwidthLimitView from "@/components/plans/PlanBandwidthLimitView.vue";
import PlanPriceView from "@/components/plans/PlanPriceView.vue";
import ListTable from "@/components/common/ListTable.vue";
import Column from "primevue/column";
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";
import TinyBasicLabel from "@/components/common/TinyBasicLabel.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu :ctx="ctx"></Menu>

	<NotFoundInfo disable-spacing v-if="ctx.userPlans.length == 0">暂时还没有已购套餐。</NotFoundInfo>

	<div v-if="ctx.userPlans.length > 0">
		<ListTable :items="ctx.userPlans">
			<Column header="套餐" class="name-column" frozen>
				<template #body="{data:userPlan}">
					<span v-if="userPlan.plan.id > 0">
                		{{userPlan.plan.name}}
						<div>
							<TinyBasicLabel v-if="userPlan.plan.lbMode == 'on'">负载均衡</TinyBasicLabel>
						</div>
					</span>
					<span class="red" v-else>[已删除]</span>
				</template>
			</Column>
			<Column header="备注名" class="name-column">
				<template #body="{data:userPlan}">
					<span v-if="userPlan.name.length > 0">{{userPlan.name}}</span>
					<span v-else class="disabled">-</span>
				</template>
			</Column>
			<Column header="价格" class="name-column">
				<template #body="{data:userPlan}">
					<div v-if="userPlan.plan != null">
						<!-- 价格设置 -->
						<PlanPriceView :v-plan="userPlan.plan"></PlanPriceView>

						<!-- 流量限制 -->
						<PlanLimitView :value="userPlan.plan"></PlanLimitView>

						<!-- 带宽限制 -->
						<PlanBandwidthLimitView :value="userPlan.plan"></PlanBandwidthLimitView>
					</div>
				</template>
			</Column>
			<Column header="有效期" class="date-column">
				<template #body="{data:userPlan}">
					{{userPlan.dayTo}}
				</template>
			</Column>
			<Column header="网站" class="name-column">
				<template #body="{data:userPlan}">
					<div v-if="userPlan.servers != null && userPlan.servers.length > 0">
						<div v-for="server in userPlan.servers">
							<a :href="'/servers/server/settings/plan?serverId=' + server.id" v-if="server.type == 'httpProxy' || server.type == 'httpWeb'">{{server.name}}</a>
							<a :href="'/lb/server/settings/plan?serverId=' + server.id" v-if="server.type == 'tcpProxy' || server.type == 'udpProxy'">{{server.name}}</a>
						</div>
					</div>
					<span v-else class="disabled">尚未绑定</span>
				</template>
			</Column>
			<Column header="操作" class="two op" frozen align-frozen="right">
				<template #body="{data:userPlan}">
					<a href="" @click.prevent="ctx.renewUserPlan(userPlan.id)">续费</a> &nbsp;
					<a href="" @click.prevent="ctx.deleteUserPlan(userPlan.id)">删除</a>
				</template>
			</Column>
		</ListTable>

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

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