<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {inject, ref, watch} from "vue"
import TLabel from "@/components/ui/TLabel.vue";
import TDivider from "@/components/ui/TDivider.vue";
import TInputText from "@/components/ui/TInputText.vue";

const utils = useUtils()

const Tea = inject("$Tea")

const props = defineProps(["v-server-names", "autoSubmit"])

const serverNamesRef = ref()
const keywordRef = ref()
const {serverNames, isSearching, keyword} = (function () {
	let serverNames = props.vServerNames;
	if (serverNames == null) {
		serverNames = []
	}
	return {
		serverNames: ref(serverNames),
		isSearching: ref(false),
		keyword: ref("")
	}
})()

const addServerName = function () {
	window.UPDATING_SERVER_NAME = null
	utils.popup("/servers/addServerNamePopup", {
		callback: function (resp) {
			var serverName = resp.data.serverName
			serverNames.value.push(serverName)
			setTimeout(submitForm, 100)
		}
	});
}

const removeServerName = function (index) {
	serverNames.value.$remove(index)
}

const updateServerName = function (index, serverName) {
	window.UPDATING_SERVER_NAME = utils.clone(serverName)
	utils.popup("/servers/addServerNamePopup", {
		callback: function (resp) {
			serverNames.value[index] = resp.data.serverName
			setTimeout(submitForm, 100)
		}
	});
}

const showSearchBox = function () {
	isSearching.value = !isSearching.value
	if (isSearching.value) {
		setTimeout(function () {
			keywordRef.value.focus()
		}, 200)
	} else {
		keyword.value = ""
	}
}

const allServerNames = function () {
	if (serverNames.value == null) {
		return []
	}
	let result = []
	serverNames.value.forEach(function (serverName) {
		if (serverName.subNames != null && serverName.subNames.length > 0) {
			serverName.subNames.forEach(function (subName) {
				if (subName != null && subName.length > 0) {
					if (!result.$contains(subName)) {
						result.push(subName)
					}
				}
			})
		} else if (serverName.name != null && serverName.name.length > 0) {
			if (!result.$contains(serverName.name)) {
				result.push(serverName.name)
			}
		}
	})
	return result
}

const form = inject("$postForm")
const submitForm = function () {
	if (typeof props.autoSubmit === "string" || props.autoSubmit) {
		setTimeout(() => form.exposed.submit(), 200)
	}
}

watch(keyword, function (v) {
	serverNames.value.forEach(function (serverName) {
		if (v.length == 0) {
			serverName.isShowing = true
			return
		}
		if (serverName.subNames == null || serverName.subNames.length == 0) {
			if (!utils.match(serverName.name, v)) {
				serverName.isShowing = false
			} else {
				serverName.isShowing = true
			}
		} else {
			let found = false
			serverName.subNames.forEach(function (subName) {
				if (utils.match(subName, v)) {
					found = true
				}
			})
			serverName.isShowing = found
		}
	})
})

defineExpose({
	addServerName,
	allServerNames
})

</script>

<template>
	<div>
		<input type="hidden" name="serverNames" :value="JSON.stringify(serverNames)" ref="serverNamesRef"/>
		<div v-if="serverNames.length > 0" class="label-group">
			<TLabel outlined="" v-for="(serverName, index) in serverNames" :class="{hidden: serverName.isShowing === false}">
				<em v-if="serverName.type != 'full'">{{ serverName.type }}</em>
				<span v-if="serverName.subNames == null || serverName.subNames.length == 0" :class="{disabled: serverName.isShowing === false}">{{ serverName.name }}</span>
				<span v-else :class="{disabled: serverName.isShowing === false}">{{ serverName.subNames[0] }}等{{ serverName.subNames.length }}个域名</span>&nbsp;
				<a href="" title="修改" @click.prevent="updateServerName(index, serverName)"><i class="icon pencil small"></i></a>&nbsp;
				<a href="" title="删除" @click.prevent="removeServerName(index)"><i class="icon remove"></i></a>
			</TLabel>
			<TDivider></TDivider>
		</div>
		<div class="ui fields inline">
			<div class="ui field"><a href="" @click.prevent="addServerName()">添加域名绑定</a></div>
			<div class="ui field" v-if="serverNames.length > 0"><span class="grey">|</span></div>
			<div class="ui field" v-if="serverNames.length > 0">
				<a href="" @click.prevent="showSearchBox()" v-if="!isSearching"><i class="icon search small"></i></a>
				<a href="" @click.prevent="showSearchBox()" v-if="isSearching"><i class="icon close small"></i></a>
			</div>
			<div class="ui field" v-if="isSearching">
				<TInputText type="text" placeholder="搜索域名" ref="keywordRef" v-model="keyword"/>
			</div>
		</div>
	</div>
</template>

<style scoped>
</style>
