<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 Pager from "@/components/common/Pager.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import Menu from "./@menu.vue"
import NotFoundInfo from "@/components/common/NotFoundInfo.vue";

const ctx = ctxRef(new Context())

</script>

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

	<NotFoundInfo disable-spacing v-if="ctx.userInstances.length == 0">暂时还没有实例，<a href="/anti-ddos/packages">[点此购买]</a> 。
	</NotFoundInfo>

	<div v-if="ctx.userInstances.length > 0">
		<ListTable :items="ctx.userInstances">
			<TColumn header="高防产品" frozen class="name-column">
				<template #body="{data:userInstance}">
					<span v-if="userInstance.package.id > 0">{{ userInstance.package.summary }}</span>
					<span v-else class="red">已删除</span>
				</template>
			</TColumn>
			<TColumn header="高防IP" frozen class="ip-column">
				<template #body="{data:userInstance}">
					<div v-if="userInstance.ipAddresses != null && userInstance.ipAddresses.length > 0">
						<div v-for="ip in userInstance.ipAddresses">
							{{ ip }}
						</div>
					</div>
					<span v-else class="red">无有效IP</span>
				</template>
			</TColumn>
			<TColumn header="有效期" class="value-column">
				<template #body="{data:userInstance}">
					{{ userInstance.periodCount }}{{ userInstance.periodUnitName }}
				</template>
			</TColumn>
			<TColumn header="开始日期" class="date-column">
				<template #body="{data:userInstance}">
					{{ userInstance.dayFrom }}
				</template>
			</TColumn>
			<TColumn header="结束日期" class="date-column">
				<template #body="{data:userInstance}">
					{{ userInstance.dayTo }}
					<div v-if="userInstance.isExpired">
						<span v-if="userInstance.isExpired" class="small red">已过期</span>
					</div>
				</template>
			</TColumn>
			<TColumn header="防护对象" class="name-column">
				<template #body="{data:userInstance}">
					<!-- 防护对象 -->
					<a href="" v-if="userInstance.isAvailable" @click.prevent="ctx.updateObjectsPopup(userInstance.id)">
						<span v-if="userInstance.countObjects > 0">{{ userInstance.countObjects }}个对象</span>
						<span v-else>设置</span>
					</a>
					<span v-else class="disabled">{{ userInstance.countObjects }}</span>
				</template>
			</TColumn>
			<TColumn header="操作" class="two op" frozen align-frozen="right">
				<template #body="{data:userInstance}">
					<!-- 续费 -->
					<span v-if="userInstance.instance.userInstanceId == userInstance.id"><a :href="'/anti-ddos/instances/renew?userInstanceId=' + userInstance.id">续费</a></span>
					<span v-else class="disabled">续费</span> &nbsp;

					<!-- 删除 -->
					<a href="" v-if="userInstance.canDelete" @click.prevent="ctx.deleteUserInstance(userInstance.id)">删除</a>
				</template>
			</TColumn>
		</ListTable>

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


</template>

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