<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 "./index.css"
import Menu from "./@menu.vue"
import TMessage from "@/components/ui/TMessage.vue";
import WarningMessage from "@/components/common/WarningMessage.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TButton from "@/components/ui/TButton.vue";
import TDivider from "@/components/ui/TDivider.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import Keyword from "@/components/common/Keyword.vue";
import PopupIcon from "@/components/common/PopupIcon.vue";
import ServerTrafficLimitStatusViewer from "@/components/server/ServerTrafficLimitStatusViewer.vue";
import TipIcon from "@/components/common/TipIcon.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>
	<Menu active-tab="index"></Menu>

	<TMessage error="" v-if="!ctx.serversIsEnabled">
		当前账号下的网站不可用，请检查账号状态以及是否有逾期未支付的账单。
	</TMessage>

	<WarningMessage v-if="ctx.serversIsEnabled && ctx.countUnpaidBills > 0">
		<a href="/finance/bills?paidFlag=0">有逾期未支付的账单，可能会影响你的CDN服务正常运行，请尽快完成支付。</a>
	</WarningMessage>

	<form action="/servers" v-show="ctx.checkedServerIds.length == 0">
		<div class="ui fields inline">
			<div class="ui field">
				<TInputText name="keyword" v-model="ctx.keyword" placeholder="域名"/>
			</div>
			<div class="ui field" v-if="ctx.groups.length > 0">
				<TSelect name="groupId" v-model="ctx.groupId">
					<TOption value="0">[分组]</TOption>
					<TOption v-for="group in ctx.groups" :value="group.id">{{group.name}}</TOption>
				</TSelect>
			</div>
			<div class="ui field">
				<TButton type="submit" secondary="">搜索</TButton>
				&nbsp;
				<a href="/servers" v-if="ctx.keyword.length > 0 || ctx.groupId > 0">[清除条件]</a>
			</div>
		</div>
	</form>

	<NotFoundInfo v-if="ctx.servers.length == 0">暂时还没有任何网站。</NotFoundInfo>

	<div v-if="ctx.checkedServerIds.length > 0">
		<TButton secondary="" outlined @click.prevent="ctx.resetCheckedServers">取消所选</TButton> &nbsp; &nbsp;
		<TButton secondary="" outlined @click.prevent="ctx.deleteServers">删除所选{{ctx.checkedServerIds.length}}网站</TButton>
	</div>

	<div v-if="ctx.servers.length > 0" class="mt-4">
		<ListTable :items="ctx.servers">
			<Column style="width: 1em" class="server-checkbox-td" frozen>
				<template #header>
					<TCheckboxBinary @change="ctx.changeAllChecked" v-model="ctx.allChecked"></TCheckboxBinary>
				</template>
				<template #body="{data: server}">
					<TCheckboxBinary v-model="server.isChecked" @change="ctx.changeServerChecked"></TCheckboxBinary>
				</template>
			</Column>
			<Column header="域名" class="domain-column server-td" frozen>
				<template #body="{data: server}">
					<a :href="'/servers/server?serverId=' + server.id">
                <span v-if="server.serverNames.length > 0">
                    <span v-if="server.serverNames[0].subNames == null || server.serverNames[0].subNames.length == 0"><Keyword :v-word="ctx.keyword">{{server.serverNames[0].name}}</Keyword></span>
                        <span v-else>{{server.serverNames[0].subNames[0]}}</span>
                        <span v-if="server.countServerNames > 1">等{{server.countServerNames}}个域名 <PopupIcon :href="'/servers/serverNamesPopup?serverId=' + server.id" height="30em"></PopupIcon></span>
			        </span>
						<span v-else class="disabled">-</span>
					</a>

					<!-- name -->
					<span class="server-name-box inline-block ml-2">
						<span class="grey small flex items-center gap-1"><i class="icon tag small"></i><span>{{server.name}}</span>
							&nbsp; <a href="" @click.prevent="ctx.updateServerName(server.id)">[修改]</a>
						</span>
					</span>

					<div v-if="server.userPlan != null && server.userPlan.id > 0">
						<span style="margin-top: 1em" class="small" :class="{grey: !server.userPlan.isExpired, red: server.userPlan.isExpired}">套餐：{{server.userPlan.name}} / {{server.userPlan.dayTo}} <span v-if="server.userPlan.isExpired">已过期</span></span>
					</div>
					<div v-if="server.trafficLimitStatus != null">
						<ServerTrafficLimitStatusViewer v-model="server.trafficLimitStatus"></ServerTrafficLimitStatusViewer>
					</div>
					<div v-if="server.groups.length > 0">
						<span style="margin-top: 1em" class="small grey" v-for="serverGroup in server.groups">[{{serverGroup.name}}] &nbsp; </span>
					</div>
				</template>
			</Column>
			<Column header="CNAME" class="domain-column">
				<template #body="{data: server}">
					{{server.cname}}
				</template>
			</Column>
			<Column header="状态" class="status-column">
				<template #body="{data: server}">
					<span v-if="!server.isOn" class="grey">停用中</span>
					<span v-else-if="server.status.isOk" class="green">正常</span>
					<span v-else-if="server.status.message.length == 0">检查中</span>
					<span v-else class="red flex items-center gap-1">
						<span>{{server.status.message}}</span>
                		<TipIcon :content="server.status.todo"></TipIcon>
            		</span>
				</template>
			</Column>
			<Column header="HTTP" class="bool-column">
				<template #body="{data: server}">
					<span v-if="server.httpIsOn" class="green">Y</span>
				</template>
			</Column>
			<Column header="HTTPS" class="bool-column">
				<template #body="{data: server}">
					<span v-if="server.httpsIsOn" class="green">Y</span>
				</template>
			</Column>
			<Column header="操作" class="three op" frozen align-frozen="right">
				<template #body="{data: server}">
					<a :href="'/servers/server?serverId=' + server.id">管理</a> &nbsp;
					<a href="" v-if="server.isOn" @click.prevent="ctx.updateServerOff(server.id)">停用</a><a href="" v-if="!server.isOn" @click.prevent="ctx.updateServerOn(server.id)"><span class="red">启用</span></a> &nbsp;
					<a href="" @click.prevent="ctx.deleteServer(server.id)">删除</a>
				</template>
			</Column>
		</ListTable>

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


</template>

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