<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {ref, watch} from "vue"
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TButton from "@/components/ui/TButton.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TLabel from "@/components/ui/TLabel.vue";
import PlusButton from "@/components/common/PlusButton.vue";
import "@/configs/definitions.js"

const utils = useUtils()

const props = defineProps(["v-keys"])

const keyRef = ref()
const emits = defineEmits(["change"])

const {keys, isAdding, key, subKey, keyDescription, keyDefs} = (function () {
	let keys = props.vKeys
	if (keys == null) {
		keys = []
	}
	return {
		keys: ref(keys),
		isAdding: ref(false),
		key: ref(""),
		subKey: ref(""),
		keyDescription: ref(""),

		keyDefs: ref(window.METRIC_HTTP_KEYS)
	}
})()

const cancel = function () {
	key.value = ""
	subKey.value = ""
	keyDescription.value = ""
	isAdding.value = false
}

const confirm = function () {
	if (key.value.length == 0) {
		return
	}

	if (key.value.indexOf(".NAME") > 0) {
		if (subKey.value.length == 0) {
			utils.warn("请输入参数值")
			return
		}
		key.value = key.value.replace(".NAME", "." + subKey.value)
	}
	keys.value.push(key.value)
	cancel()
}

const add = function () {
	isAdding.value = true
	setTimeout(function () {
		if (keyRef.value != null) {
			keyRef.value.focus()
		}
	}, 100)
}

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

const changeKey = function () {
	if (key.value.length == 0) {
		return
	}
	let def = keyDefs.value.$find(function (k, v) {
		return v.code == key.value
	})
	if (def != null) {
		keyDescription.value = def.description
	}
}

const keyName = function (key) {
	let subKey = ""

	let def = keyDefs.value.$find(function (k, v) {
		if (v.code == key) {
			return true
		}
		if (key.startsWith("${arg.") && v.code.startsWith("${arg.")) {
			subKey = getSubKey("arg.", key)
			return true
		}
		if (key.startsWith("${header.") && v.code.startsWith("${header.")) {
			subKey = getSubKey("header.", key)
			return true
		}
		if (key.startsWith("${cookie.") && v.code.startsWith("${cookie.")) {
			subKey = getSubKey("cookie.", key)
			return true
		}
		return false
	})
	if (def != null) {
		if (subKey.length > 0) {
			return def.name + ": " + subKey
		}
		return def.name
	}
	return key
}

const getSubKey = function (prefix, key) {
	prefix = "${" + prefix
	let index = key.indexOf(prefix)
	if (index >= 0) {
		key = key.substring(index + prefix.length)
		key = key.substring(0, key.length - 1)
		return key
	}
	return ""
}

watch(keys.value, function () {
	emits("change", keys.value)
})
</script>

<template>
	<div>
		<input type="hidden" name="keysJSON" :value="JSON.stringify(keys)"/>
		<div>
			<div class="label-group">
				<TLabel outlined="" v-for="(key, index) in keys">
					{{ keyName(key) }} &nbsp;
					<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
				</TLabel>
			</div>
		</div>
		<div v-if="isAdding" style="margin-top: 1em">
			<div class="ui fields inline">
				<div class="ui field">
					<TSelect v-model="key" @change="changeKey">
						<TOption value="">[选择对象]</TOption>
						<TOption v-for="def in keyDefs" :value="def.code">{{ def.name }}</TOption>
					</TSelect>
				</div>
				<div class="ui field" v-if="key == '\${arg.NAME}'">
					<TInputText type="text" v-model="subKey" placeholder="参数名" size="15"/>
				</div>
				<div class="ui field" v-if="key == '\${header.NAME}'">
					<TInputText type="text" v-model="subKey" placeholder="Header名" size="15"/>
				</div>
				<div class="ui field" v-if="key == '\${cookie.NAME}'">
					<TInputText type="text" v-model="subKey" placeholder="Cookie名" size="15"/>
				</div>
				<div class="ui field">
					<TButton type="button" secondary="" size="small" @click.prevent="confirm">确定</TButton>
					&nbsp;<a href="" @click.prevent="cancel"><i class="icon remove small"></i></a>
				</div>
			</div>
			<p class="comment" v-if="keyDescription.length > 0">{{ keyDescription }}</p>
		</div>
		<div style="margin-top: 1em" v-if="!isAdding">
			<PlusButton size="small" @click.prevent="add"></PlusButton>
		</div>
	</div>
</template>

<style scoped>
</style>
