<script setup>
import {ref, watch} from "vue";
import useUtils from "@/utils/utils.js";
import "@/lib/array.js"
import TLabel from "@/components/ui/TLabel.vue";
import TDivider from "@/components/ui/TDivider.vue";

const props = defineProps(["v-server-type", "v-addresses", "v-protocol", "v-name", "v-from", "v-support-range", "v-url", "minPort", "maxPort"])
const utils = useUtils()
const emits = defineEmits(["change", "update:modelValue"])

const {addresses, protocol, name, from, isEditing} = (function () {
	let addresses = props.vAddresses
	if (addresses == null) {
		addresses = []
	}
	let protocol = props.vProtocol
	if (protocol == null) {
		protocol = ""
	}

	let name = props.vName
	if (name == null) {
		name = "addresses"
	}

	let from = props.vFrom
	if (from == null) {
		from = ""
	}

	return {
		addresses: ref(addresses),
		protocol: ref(protocol),
		name: ref(name),
		from: ref(from),
		isEditing: ref(false)
	}
})()
setTimeout(() => change())

let tlsProtocolName = ""

watch(() => props.vServerType, () => {
	addresses.value = []
})

watch(() => props.vAddresses, () => {
	if (props.vAddresses != null) {
		addresses.value = props.vAddresses
	}
})

const addAddr = function () {
	isEditing.value = true

	window.UPDATING_ADDR = null

	let url = props.vUrl
	if (url == null) {
		url = "/servers/addPortPopup"
	}

	utils.popup(url + "?serverType=" + props.vServerType + "&protocol=" + protocol.value + "&from=" + from.value + "&supportRange=" + (supportRange() ? 1 : 0) + "&minPort=" + (props.minPort ? props.minPort : 0) + "&maxPort=" + (props.maxPort ? props.maxPort : 0), {
		callback: function (resp) {
			var addr = resp.data.address
			if (addresses.value.$find(function (k, v) {
				return addr.host == v.host && addr.portRange == v.portRange && addr.protocol == v.protocol
			}) != null) {
				utils.warn("要添加的网络地址已经存在")
				return
			}
			addresses.value.push(addr)
			if (["https", "https4", "https6"].$contains(addr.protocol)) {
				tlsProtocolName = "HTTPS"
			} else if (["tls", "tls4", "tls6"].$contains(addr.protocol)) {
				tlsProtocolName = "TLS"
			}

			// 发送事件
			change()
		}
	})
}

const removeAddr = function (index) {
	addresses.value.$remove(index);

	// 发送事件
	change()
}

const updateAddr = function (index, addr) {
	window.UPDATING_ADDR = addr

	let url = props.vUrl
	if (url == null) {
		url = "/servers/addPortPopup"
	}

	utils.popup(url + "?serverType=" + props.vServerType + "&protocol=" + protocol.value + "&from=" + from.value + "&supportRange=" + (supportRange() ? 1 : 0) + "&minPort=" + (props.minPort ? props.minPort : 0) + "&maxPort=" + (props.maxPort ? props.maxPort : 0), {
		callback: function (resp) {
			var addr = resp.data.address
			addresses.value[index] = addr

			if (["https", "https4", "https6"].$contains(addr.protocol)) {
				tlsProtocolName = "HTTPS"
			} else if (["tls", "tls4", "tls6"].$contains(addr.protocol)) {
				tlsProtocolName = "TLS"
			}

			// 发送事件
			change()
		}
	})

	// 发送事件
	change()
}
const supportRange = function () {
	return props.vSupportRange || (props.vServerType == "tcpProxy" || props.vServerType == "udpProxy")
}
const edit = function () {
	isEditing.value = true
}

const change = () => {
	emits("change", addresses.value)
	emits("update:modelValue", JSON.stringify(addresses.value))
}

defineExpose({
	tlsProtocolName
})

</script>

<template>
	<div>
		<input type="hidden" :name="name" :value="JSON.stringify(addresses)"/>
		<div v-show="!isEditing">
			<div v-if="addresses.length > 0" class="flex flex-wrap gap-2 items-center">
				<TLabel v-for="(addr, index) in addresses" outlined="">
					{{ addr.protocol }}://<span v-if="addr.host.length > 0">{{ addr.host.quoteIP() }}</span><span
					v-if="addr.host.length == 0">*</span>:<span
					v-if="addr.portRange.indexOf('-')<0">{{ addr.portRange }}</span><span v-else class="italic">{{ addr.portRange }}</span>
				</TLabel>
				&nbsp; &nbsp; <a href="" @click.prevent="edit" style="font-size: 0.9em">[修改]</a>
			</div>
		</div>
		<div v-show="isEditing || addresses.length == 0">
			<div v-if="addresses.length > 0" class="label-group">
				<TLabel v-for="(addr, index) in addresses" outlined="">
					{{ addr.protocol }}://<span v-if="addr.host.length > 0">{{ addr.host.quoteIP() }}</span><span
					v-if="addr.host.length == 0">*</span>:<span
					v-if="addr.portRange.indexOf('-')<0">{{ addr.portRange }}</span>
					<span v-else class="italic">{{ addr.portRange }}</span>
					<a href="" @click.prevent="updateAddr(index, addr)" title="修改">
						<svg style="display: inline-block; margin-left: 10px;" width="14" height="14" viewBox="0 0 14 14" fill="none"
							xmlns="http://www.w3.org/2000/svg">
							<path d="M2.04175 12.25H12.5417" stroke="#657080" stroke-linecap="round"
								stroke-linejoin="round" />
							<path d="M3.20825 7.7933V9.91667H5.34244L11.3749 3.88153L9.24432 1.75L3.20825 7.7933Z"
								stroke="#657080" stroke-linejoin="round" />
						</svg>	
					</a>
					<a href="" @click.prevent="removeAddr(index)" title="删除">
						<svg style="display: inline-block; margin-left: 10px;" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M4.08301 4.08325L9.91634 9.91659" stroke="#657080" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M4.08301 9.91659L9.91634 4.08325" stroke="#657080" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
					</a>
				</TLabel>
				<TDivider></TDivider>
			</div>
			<div>
				<a href="" @click.prevent="addAddr()">添加端口绑定</a>
			</div>
		</div>
	</div>
</template>

<style scoped>
:deep(.label-group) {
	gap: 0;
}
</style>