<script setup>

import "@/lib/array.js"
import {ref} from "vue"
import TDivider from "@/components/ui/TDivider.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TButton from "@/components/ui/TButton.vue";
import TLabel from "@/components/ui/TLabel.vue";
import PlusButton from "@/components/common/PlusButton.vue";

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

const {filters, isAdding, options, addingCode} = (function () {
	let filters = props.vFilters
	if (filters == null) {
		filters = []
	}

	return {
		filters: ref(filters),
		isAdding: ref(false),
		options: ref([
			{name: "MD5", code: "md5"},
			{name: "URLEncode", code: "urlEncode"},
			{name: "URLDecode", code: "urlDecode"},
			{name: "BASE64Encode", code: "base64Encode"},
			{name: "BASE64Decode", code: "base64Decode"},
			{name: "UNICODE编码", code: "unicodeEncode"},
			{name: "UNICODE解码", code: "unicodeDecode"},
			{name: "HTML实体编码", code: "htmlEscape"},
			{name: "HTML实体解码", code: "htmlUnescape"},
			{name: "计算长度", code: "length"},
			{name: "十六进制->十进制", "code": "hex2dec"},
			{name: "十进制->十六进制", "code": "dec2hex"},
			{name: "SHA1", "code": "sha1"},
			{name: "SHA256", "code": "sha256"},
			{name: "转换为小写", "code": "lowerCase"},
			{name: "转换为大写", "code": "upperCase"}
		]),
		addingCode: ref("")
	}
})()

const add = function () {
	isAdding.value = true
	addingCode.value = ""
}

const confirm = function () {
	if (addingCode.value.length == 0) {
		return
	}
	filters.value.push(options.value.$find(function (k, v) {
		return (v.code == addingCode.value)
	}))
	isAdding.value = false
}

const cancel = function () {
	isAdding.value = false
}

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

</script>

<template>
	<div>
		<input type="hidden" name="paramFiltersJSON" :value="JSON.stringify(filters)"/>
		<div v-if="filters.length > 0" class="label-group">
			<TLabel outlined="" v-for="(filter, index) in filters">
				{{ filter.name }} <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a>
			</TLabel>
			<TDivider></TDivider>
		</div>
		<div v-if="isAdding">
			<div class="ui fields inline">
				<div class="ui field">
					<TSelect v-model="addingCode">
						<TOption value="">[请选择]</TOption>
						<TOption v-for="option in options" :value="option.code">{{ option.name }}</TOption>
					</TSelect>
				</div>
				<div class="ui field">
					<TButton secondary="" size="small" type="button" @click.prevent="confirm()">确定</TButton>
					&nbsp; <a href="" @click.prevent="cancel()" title="取消"><i class="icon remove"></i></a>
				</div>
			</div>
		</div>
		<div v-if="!isAdding">
			<PlusButton type="button" @click.prevent="add"></PlusButton>
		</div>
		<p class="comment">可以对参数值进行特定的编解码处理；如果添加了多个编解码，则按顺序依次执行。</p>
	</div>
</template>

<style scoped>
</style>
