<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {ref} from "vue"
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TButton from "@/components/ui/TButton.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import MoreOptionsIndicator from "@/components/common/MoreOptionsIndicator.vue";
import URLPatternsBox from "@/components/common/URLPatternsBox.vue";
import TTextarea from "@/components/ui/TTextarea.vue";
import PlusButton from "@/components/common/PlusButton.vue";
import TLabel from "@/components/ui/TLabel.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";

const utils = useUtils()

const props = defineProps(["v-is-location", "v-is-group", "modelValue"])

const batchKeywordsRef = ref()
const {config, isAdding, addingFilter, moreOptionsVisible, batchKeywords} = (function () {
	let config = props.modelValue
	if (config == null) {
		config = {
			isPrior: false,
			isOn: false,
			filters: []
		}
	}
	if (config.filters == null) {
		config.filters = []
	}
	return {
		config: ref(config),
		isAdding: ref(false),
		addingFilter: ref({
			keywords: [],
			action: "deny"
		}),
		moreOptionsVisible: ref(false),
		batchKeywords: ref("")
	}
})()

const isOn = function () {
	return ((!props.vIsLocation && !props.vIsGroup) || config.value.isPrior) && config.value.isOn
}

const remove = function (index) {
	utils.confirm("确定要删除此名单吗？", function () {
		config.value.filters.$remove(index)
	})
}

const add = function () {
	isAdding.value = true
	setTimeout(function () {
		batchKeywordsRef.value.focus()
	})
}

const confirm = function () {
	if (addingFilter.value.action == "deny") {
		config.value.filters.push(addingFilter.value)
	} else {
		let index = -1
		config.value.filters.forEach(function (filter, filterIndex) {
			if (filter.action == "allow") {
				index = filterIndex
			}
		})

		if (index < 0) {
			config.value.filters.unshift(addingFilter.value)
		} else {
			config.value.filters.$insert(index + 1, addingFilter.value)
		}
	}

	cancel()
}

const cancel = function () {
	isAdding.value = false
	addingFilter.value = {
		keywords: [],
		action: "deny"
	}
	batchKeywords.value = ""
}

const changeKeywords = function (keywords) {
	let arr = keywords.split(/\n/)
	let resultKeywords = []
	arr.forEach(function (keyword) {
		keyword = keyword.trim()
		if (!resultKeywords.$contains(keyword)) {
			resultKeywords.push(keyword)
		}
	})
	addingFilter.value.keywords = resultKeywords
}

const showMoreOptions = function () {
	moreOptionsVisible.value = !moreOptionsVisible.value
}


</script>

<template>
	<div>
		<input type="hidden" name="userAgentJSON" :value="JSON.stringify(config)"/>
		<DefinitionTable>
			<PriorCheckbox :v-config="config" v-if="vIsLocation || vIsGroup"></PriorCheckbox>
			<tbody v-show="(!vIsLocation && !vIsGroup) || config.isPrior">
			<tr>
				<td class="title">启用UA名单</td>
				<td>
					<TCheckboxBinary value="1" v-model="config.isOn"/>
					<p class="comment">选中后表示开启UserAgent名单。</p>
				</td>
			</tr>
			</tbody>
			<tbody v-show="isOn()">
			<tr>
				<td>UA名单</td>
				<td>
					<div v-if="config.filters.length > 0">
						<ListTable :items="config.filters">
							<TColumn header="UA关键词" class="name-column">
								<template #body="{data: filter}">
									<div class="label-group">
										<TLabel outlined="" v-for="keyword in filter.keywords">
											<span v-if="keyword.length > 0">{{ keyword }}</span>
											<span v-if="keyword.length == 0" class="disabled">[空]</span>
										</TLabel>
									</div>
								</template>
							</TColumn>
							<TColumn header="动作" style="width: 6em; min-width: 6em">
								<template #body="{data: filter}">
									<span v-if="filter.action == 'allow'" class="green">允许</span><span v-if="filter.action == 'deny'" class="red">不允许</span>
								</template>
							</TColumn>
							<TColumn header="操作" class="one op">
								<template #body="{data: filter, index}">
									<a href="" @click.prevent="remove(index)">删除</a>
								</template>
							</TColumn>
						</ListTable>
					</div>
					<div v-if="isAdding" style="margin-top: 0.5em">
						<DefinitionTable>
							<tbody>
							<tr>
								<td class="title">UA关键词</td>
								<td>
									<TTextarea v-model="batchKeywords" @input="changeKeywords(batchKeywords)" ref="batchKeywordsRef" class="w-full" placeholder="*浏览器标识*" rows="5"></TTextarea>
									<p class="comment">每行一个关键词；不区分大小写，比如
										<CodeLabel>Chrome</CodeLabel>
										；支持
										<CodeLabel>*</CodeLabel>
										通配符，比如
										<CodeLabel>*Firefox*</CodeLabel>
										；单个<CodeLabel>*</CodeLabel>通配符表示所有UserAgent；也支持空行关键词，表示空UserAgent。
									</p>
								</td>
							</tr>
							<tr>
								<td>动作</td>
								<td>
									<TSelect v-model="addingFilter.action">
										<TOption value="deny">不允许</TOption>
										<TOption value="allow">允许</TOption>
									</TSelect>
								</td>
							</tr>
							</tbody>
						</DefinitionTable>
						<TButton type="button" secondary="" size="small" @click.prevent="confirm">保存</TButton> &nbsp;
						<a href="" @click.prevent="cancel" title="取消"><i class="icon remove small"></i></a>
					</div>
					<div v-show="!isAdding" style="margin-top: 0.5em">
						<PlusButton size="small" @click.prevent="add"></PlusButton>
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<MoreOptionsIndicator @change="showMoreOptions"></MoreOptionsIndicator>
				</td>
			</tr>
			</tbody>
			<tbody v-show="moreOptionsVisible && isOn()">
			<tr>
				<td>例外URL</td>
				<td>
					<URLPatternsBox v-model="config.exceptURLPatterns"></URLPatternsBox>
					<p class="comment">如果填写了例外URL，表示这些URL跳过不做处理。</p>
				</td>
			</tr>
			<tr>
				<td>限制URL</td>
				<td>
					<URLPatternsBox v-model="config.onlyURLPatterns"></URLPatternsBox>
					<p class="comment">如果填写了限制URL，表示只对这些URL进行处理；如果不填则表示支持所有的URL。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped>
</style>
