<script setup>

import "@/lib/array.js"
import {inject, ref} from "vue"
import LabelOn from "@/components/common/LabelOn.vue";
import ListTable from "@/components/common/ListTable.vue";
import TinyBasicLabel from "@/components/common/TinyBasicLabel.vue";
import NavTab from "@/components/common/NavTab.vue";
import Navbar from "@/components/common/Navbar.vue";
import TColumn from "@/components/ui/TColumn.vue";

const utils = inject("$utils")
const props = defineProps(["v-redirects"])
const emits = defineEmits(["change"])

const {redirects, statusOptions, id} = (function () {
	let redirects = props.vRedirects
	if (redirects == null) {
		redirects = []
	}

	let id = 0
	redirects.forEach(function (v) {
		id++
		v.id = id
	})

	return {
		redirects: ref(redirects),
		statusOptions: ref([
			{"code": 301, "text": "Moved Permanently"},
			{"code": 308, "text": "Permanent Redirect"},
			{"code": 302, "text": "Found"},
			{"code": 303, "text": "See Other"},
			{"code": 307, "text": "Temporary Redirect"}
		]),
		id: ref(id)
	}
})()

const add = function () {
	window.UPDATING_REDIRECT = null

	utils.popup("/servers/server/settings/redirects/createPopup", {
		width: "50em",
		height: utils.POPUP_HEIGHT_LG,
		callback: function (resp) {
			id.value++
			resp.data.redirect.id = id.value
			redirects.value.push(resp.data.redirect)
			change()
		}
	})
}

const indexOf = function (redirect) {
	let index = -1
	redirects.value.forEach((v, k) => {
		if (v === redirect) {
			index = k
		}
	})
	return index
}

const update = function (redirect) {
	const index = indexOf(redirect)
	window.UPDATING_REDIRECT = utils.clone(redirect)

	utils.popup("/servers/server/settings/redirects/createPopup", {
		width: "50em",
		height: utils.POPUP_HEIGHT_LG,
		callback: function (resp) {
			resp.data.redirect.id = redirect.id
			redirects.value [index] = resp.data.redirect
			change()
		}
	})
}

const remove = function (redirect) {
	const index = indexOf(redirect)

	utils.confirm("确定要删除这条跳转规则吗？", function () {
		redirects.value.$remove(index)
		change()
	})
}

const change = function () {
	setTimeout(function () {
		emits("change", redirects.value)
	}, 100)
}

const updateRedirects = function (newRedirects) {
	redirects.value = newRedirects
	change()
}

const sortTable = function (ids) {
	let newRedirects = []
	ids.forEach(function (id) {
		redirects.value.forEach(function (redirect) {
			if (redirect.id == id) {
				newRedirects.push(redirect)
			}
		})
	})
	updateRedirects(newRedirects)
}

</script>

<template>
	<div>
		<input type="hidden" name="hostRedirectsJSON" :value="JSON.stringify(redirects)"/>

		<Navbar secondary>
			<template #tabs>
				<NavTab href="" name="所有跳转规则" active></NavTab>
				<NavTab separator></NavTab>
				<NavTab @click.prevent="add" name="创建跳转规则" action-create></NavTab>
			</template>
		</Navbar>

		<p class="comment" v-if="redirects.length == 0">暂时还没有URL跳转规则。</p>
		<div v-show="redirects.length > 0">
			<ListTable :items="redirects" @sort="sortTable">
				<TColumn rowReorder headerStyle="width: 3em"></TColumn>
				<TColumn header="跳转前">
					<template #body="{data:redirect}">
						<div v-if="redirect.type == '' || redirect.type == 'url'">
							{{ redirect.beforeURL }}
							<div class="label-group mt-1">
								<TinyBasicLabel><strong>URL跳转</strong></TinyBasicLabel>
								<TinyBasicLabel v-if="redirect.matchPrefix">匹配前缀</TinyBasicLabel>
								<TinyBasicLabel v-if="redirect.matchRegexp">正则匹配</TinyBasicLabel>
								<TinyBasicLabel v-if="!redirect.matchPrefix && !redirect.matchRegexp">精准匹配</TinyBasicLabel>
								<TinyBasicLabel v-if="redirect.exceptDomains != null && redirect.exceptDomains.length > 0" v-for="domain in redirect.exceptDomains">排除:{{ domain }}</TinyBasicLabel>
								<TinyBasicLabel v-if="redirect.onlyDomains != null && redirect.onlyDomains.length > 0" v-for="domain in redirect.onlyDomains">仅限:{{ domain }}</TinyBasicLabel>
							</div>
						</div>
						<div v-if="redirect.type == 'domain'">
							<span v-if="redirect.domainsAll">所有域名</span>
							<span v-if="!redirect.domainsAll && redirect.domainsBefore != null">
								<span v-if="redirect.domainsBefore.length == 1">{{ redirect.domainsBefore[0] }}</span>
								<span v-if="redirect.domainsBefore.length > 1">{{ redirect.domainsBefore[0] }}等{{ redirect.domainsBefore.length }}个域名</span>
							</span>
							<div class="label-group mt-1">
								<TinyBasicLabel><strong>域名跳转</strong></TinyBasicLabel>
								<TinyBasicLabel v-if="redirect.domainAfterScheme != null && redirect.domainAfterScheme.length > 0">{{ redirect.domainAfterScheme }}</TinyBasicLabel>
								<TinyBasicLabel v-if="redirect.domainBeforeIgnorePorts">忽略端口</TinyBasicLabel>
							</div>
						</div>
						<div v-if="redirect.type == 'port'">
							<span v-if="redirect.portsAll">所有端口</span>
							<span v-if="!redirect.portsAll && redirect.portsBefore != null">
								<span v-if="redirect.portsBefore.length <= 5">{{ redirect.portsBefore.join(", ") }}</span>
								<span v-if="redirect.portsBefore.length > 5">{{ redirect.portsBefore.slice(0, 5).join(", ") }}等{{ redirect.portsBefore.length }}个端口</span>
							</span>
							<div class="label-group mt-1">
								<TinyBasicLabel><strong>端口跳转</strong></TinyBasicLabel>
								<TinyBasicLabel v-if="redirect.portAfterScheme != null && redirect.portAfterScheme.length > 0">{{ redirect.portAfterScheme }}</TinyBasicLabel>
							</div>
						</div>

						<div style="margin-top: 0.5em" v-if="redirect.conds != null && redirect.conds.groups != null && redirect.conds.groups.length > 0">
							<TinyBasicLabel>匹配条件</TinyBasicLabel>
						</div>
					</template>
				</TColumn>
				<TColumn bodyClass="whitespace-nowrap">
					<template #body>
						-&gt;
					</template>
				</TColumn>
				<TColumn header="跳转后">
					<template #body="{data:redirect}">
						<span v-if="redirect.type == '' || redirect.type == 'url'">{{ redirect.afterURL }}</span>
						<span v-if="redirect.type == 'domain'">{{ redirect.domainAfter }}</span>
						<span v-if="redirect.type == 'port'">{{ redirect.portAfter }}</span>
					</template>
				</TColumn>
				<TColumn header="HTTP状态码">
					<template #body="{data:redirect}">
						<span v-if="redirect.status > 0">{{ redirect.status }}</span>
						<span v-else class="disabled">默认</span>
					</template>
				</TColumn>
				<TColumn header="状态" headerClass="two wide">
					<template #body="{data:redirect}">
						<LabelOn :v-is-on="redirect.isOn"></LabelOn>
					</template>
				</TColumn>
				<TColumn header="操作" headerClass="two op">
					<template #body="{data:redirect}">
						<a href="" @click.prevent="update(redirect)">修改</a> &nbsp;
						<a href="" @click.prevent="remove(redirect)">删除</a>
					</template>
				</TColumn>
			</ListTable>

			<p class="comment items items-center" v-if="redirects.length > 1">所有规则匹配顺序为从上到下，可以拖动左侧的<i class="icon bars"></i>排序。
			</p>
		</div>
	</div>
</template>

<style scoped>
</style>
