<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {inject, ref, watch} from "vue"
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import TinyBasicLabel from "@/components/common/TinyBasicLabel.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import TLabel from "@/components/ui/TLabel.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import NavButton from "@/components/common/NavButton.vue";

const utils = useUtils()

const props = defineProps(["v-enable-global-pages", "v-pages", "v-shutdown-config", "v-is-location", "webId"])

const {pages, shutdownConfig, shutdownStatus, enableGlobalPages} = (function () {
	let pages = []
	if (props.vPages != null) {
		pages = props.vPages
	}
	let shutdownConfig = {
		isPrior: false,
		isOn: false,
		bodyType: "html",
		url: "",
		body: "",
		status: 0
	}
	if (props.vShutdownConfig != null) {
		if (props.vShutdownConfig.body == null) {
			props.vShutdownConfig.body = ""
		}
		if (props.vShutdownConfig.bodyType == null) {
			props.vShutdownConfig.bodyType = "html"
		}
		shutdownConfig = props.vShutdownConfig
	}

	let shutdownStatus = ""
	if (shutdownConfig.status > 0) {
		shutdownStatus = shutdownConfig.status.toString()
	}

	return {
		pages: ref(pages),
		shutdownConfig: ref(shutdownConfig),
		shutdownStatus: ref(shutdownStatus),
		enableGlobalPages: ref(props.vEnableGlobalPages)
	}
})()

const addPage = function () {
	utils.popup("/servers/server/settings/pages/createPopup?webId=" + props.webId, {
		callback: function (resp) {
			pages.value.push(resp.data.page)
			notifyChange()
		},
		height: utils.POPUP_HEIGHT_LG
	})
}

const updatePage = function (pageIndex, pageId) {
	utils.popup("/servers/server/settings/pages/updatePopup?pageId=" + pageId, {
		callback: function (resp) {
			pages.value [pageIndex] = resp.data.page
			notifyChange()
		},
		height: utils.POPUP_HEIGHT_LG
	})
}

const removePage = function (pageIndex) {
	utils.confirm("确定要删除此自定义页面吗？", function () {
		pages.value.$remove(pageIndex)
		notifyChange()
	})
}

const addShutdownHTMLTemplate = function () {
	shutdownConfig.value.body = `<!DOCTYPE html>
<html lang="en">
<head>
\t<title>升级中</title>
\t<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
\t<style>
\t\taddress { line-height: 1.8; }
\t</style>
</head>
<body>

<h1>网站升级中</h1>
<p>为了给您提供更好的服务，我们正在升级网站，请稍后重新访问。</p>

<address>Connection: \${remoteAddr} (Client) -&gt; \${serverAddr} (Server)</address>
<address>Request ID: \${requestId}</address>

</body>
</html>`
}

const postForm = inject("$postForm")
const notifyChange = function () {
	setTimeout(function () {
		postForm.exposed.submit()
	}, 100)
}

watch(shutdownStatus, function (status) {
	let statusInt = parseInt(status)
	if (!isNaN(statusInt) && statusInt > 0 && statusInt < 1000) {
		shutdownConfig.value.status = statusInt
	} else {
		shutdownConfig.value.status = 0
	}
})

</script>

<template>
	<div>
		<input type="hidden" name="pagesJSON" :value="JSON.stringify(pages)"/>
		<input type="hidden" name="shutdownJSON" :value="JSON.stringify(shutdownConfig)"/>

		<h5 class="mb-4">自定义页面</h5>

		<p class="comment !mb-4" style="padding-top: 0; margin-top: 0">根据响应状态码返回一些自定义页面，比如404，500等错误页面。</p>

		<div v-if="pages.length > 0">
			<ListTable :items="pages">
				<TColumn header="响应状态码" class="normal-value-column" frozen>
					<template #body="{data: page}">
						<a href="" @click.prevent="updatePage(index, page.id)">
							<span v-if="page.status != null && page.status.length == 1">{{ page.status[0] }}</span>
							<span v-else>{{ page.status }}</span>&nbsp;

							<i class="icon expand small"></i>
						</a>
					</template>
				</TColumn>
				<TColumn header="页面类型" class="normal-value-column" style="word-wrap: break-word">
					<template #body="{data: page}">
						<div v-if="page.bodyType == 'url'">
							{{ page.url }}
							<div class="mt-1">
								<TinyBasicLabel>读取URL</TinyBasicLabel>
							</div>
						</div>
						<div v-if="page.bodyType == 'redirectURL'">
							{{ page.url }}
							<div class="label-group mt-1">
								<TinyBasicLabel>跳转URL</TinyBasicLabel>
								<TinyBasicLabel v-if="page.newStatus > 0">{{ page.newStatus }}</TinyBasicLabel>
							</div>
						</div>
						<div v-if="page.bodyType == 'html'">
							[HTML内容]
							<div class="mt-1">
								<TinyBasicLabel v-if="page.newStatus > 0">{{ page.newStatus }}</TinyBasicLabel>
							</div>
						</div>
					</template>
				</TColumn>
				<TColumn header="新状态码" class="normal-value-column">
					<template #body="{data: page}">
						<span v-if="page.newStatus > 0">{{ page.newStatus }}</span>
						<span v-else class="disabled">保持</span>
					</template>
				</TColumn>
				<TColumn header="例外URL" class="name-column">
					<template #body="{data: page}">
						<div class="label-group" v-if="page.exceptURLPatterns != null && page.exceptURLPatterns">
							<TLabel outlined="" v-for="urlPattern in page.exceptURLPatterns">{{ urlPattern.pattern }}</TLabel>
						</div>
						<span v-else class="disabled">-</span>
					</template>
				</TColumn>
				<TColumn header="限制URL" class="name-column">
					<template #body="{data: page}">
						<div class="label-group" v-if="page.onlyURLPatterns != null && page.onlyURLPatterns">
							<TLabel outlined="" v-for="urlPattern in page.onlyURLPatterns">{{ urlPattern.pattern }}</TLabel>
						</div>
						<span v-else class="disabled">-</span>
					</template>
				</TColumn>
				<TColumn header="操作" class="two op" frozen align-frozen="right">
					<template #body="{data: page}">
						<a href="" title="修改" @click.prevent="updatePage(index, page.id)">修改</a> &nbsp;
						<a href="" title="删除" @click.prevent="removePage(index)">删除</a>
					</template>
				</TColumn>
			</ListTable>
		</div>
		<div class="mt-4">
			<NavButton action-create size="small" type="button" @click.prevent="addPage()">添加自定义页面</NavButton>
		</div>

		<h5 class="group-header">临时关闭页面</h5>
		<p class="comment !mb-4" style="margin-top: 0; padding-top: 0">开启临时关闭页面时，所有请求都会直接显示此页面。可用于临时升级网站或者禁止用户访问某个网页。</p>
		<div>
			<DefinitionTable>
				<PriorCheckbox :v-config="shutdownConfig" v-if="vIsLocation"></PriorCheckbox>
				<tbody v-show="!vIsLocation || shutdownConfig.isPrior">
				<tr>
					<td class="title">启用临时关闭网站</td>
					<td>
						<TCheckboxBinary value="1" v-model="shutdownConfig.isOn"/>
						<p class="comment">选中后，表示临时关闭当前网站，并显示自定义内容。</p>
					</td>
				</tr>
				</tbody>
				<tbody v-show="(!vIsLocation || shutdownConfig.isPrior) && shutdownConfig.isOn">
				<tr>
					<td>显示内容类型 *</td>
					<td>
						<TSelect v-model="shutdownConfig.bodyType">
							<TOption value="html">HTML</TOption>
							<TOption value="url">读取URL</TOption>
							<TOption value="redirectURL">跳转URL</TOption>
						</TSelect>
					</td>
				</tr>
				<tr v-if="shutdownConfig.bodyType == 'url'">
					<td class="title">显示页面URL *</td>
					<td>
						<TInputText type="text" v-model="shutdownConfig.url" placeholder="类似于 https://example.com/page.html" class="w-full"/>
						<p class="comment">将从此URL中读取内容。</p>
					</td>
				</tr>
				<tr v-if="shutdownConfig.bodyType == 'redirectURL'">
					<td class="title">跳转到URL *</td>
					<td>
						<TInputText type="text" v-model="shutdownConfig.url" placeholder="类似于 https://example.com/page.html" class="w-full"/>
						<p class="comment">将会跳转到此URL。</p>
					</td>
				</tr>
				<tr v-show="shutdownConfig.bodyType == 'html'">
					<td>显示页面HTML *</td>
					<td>
						<TTextarea name="body" ref="shutdownHTMLBody" v-model="shutdownConfig.body" rows="8" class="w-full"></TTextarea>
						<p class="comment"><a href="" @click.prevent="addShutdownHTMLTemplate">[使用模板]</a>。填写页面的HTML内容，支持请求变量。
						</p>
					</td>
				</tr>
				<tr>
					<td>状态码</td>
					<td>
						<TInputText type="text" size="3" maxlength="3" name="shutdownStatus" style="width:5.2em" placeholder="状态码" v-model="shutdownStatus"/>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
		</div>

		<h5 class="group-header">其他设置</h5>
		<DefinitionTable>
			<tbody>
			<tr>
				<td class="title">启用系统自定义页面</td>
				<td>
					<TCheckboxBinary name="enableGlobalPages" v-model="enableGlobalPages"></TCheckboxBinary>
					<p class="comment">选中后，表示如果当前网站没有自定义页面，则尝试使用系统对应的自定义页面。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
		<div class="ui margin"></div>
	</div>
</template>

<style scoped>
</style>
