<script setup>

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

const utils = useUtils()

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

const emits = defineEmits(["change"])

const {conds, components} = (function () {
	let conds = props.vConds
	if (conds == null) {
		conds = {
			isOn: true,
			connector: "or",
			groups: []
		}
	}
	if (conds.groups == null) {
		conds.groups = []
	}
	return {
		conds: ref(conds),
		components: ref(window.REQUEST_COND_COMPONENTS)
	}
})()

const change = function () {
	emits("change", conds.value)
}

const addGroup = function () {
	window.UPDATING_COND_GROUP = null

	utils.popup("/servers/server/settings/conds/addGroupPopup", {
		width: "40em",
		callback: function (resp) {
			conds.value.groups.push(resp.data.group)
			change()
		}
	})
}

const updateGroup = function (groupIndex, group) {
	window.UPDATING_COND_GROUP = group
	utils.popup("/servers/server/settings/conds/addGroupPopup", {
		width: "40em",
		callback: function (resp) {
			conds.value.groups[groupIndex] = resp.data.group
			change()
		}
	})
}

const removeGroup = function (groupIndex) {
	utils.confirm("确定要删除这一组条件吗？", function () {
		conds.value.groups.$remove(groupIndex)
		change()
	})
}

const typeName = function (cond) {
	let c = components.value.$find(function (k, v) {
		return v.type == cond.type
	})
	if (c != null) {
		return c.name;
	}
	return cond.param + " " + cond.operator
}

</script>

<template>
	<div>
		<input type="hidden" name="condsJSON" :value="JSON.stringify(conds)"/>
		<div v-if="conds.groups.length > 0">
			<table class="ui table definition">
				<tr v-for="(group, groupIndex) in conds.groups">
					<td class="title" :class="{'color-border':conds.connector == 'and'}" :style="{'border-bottom':(groupIndex < conds.groups.length-1) ? '1px solid rgba(34,36,38,.15)':''}">分组{{ groupIndex + 1 }}</td>
					<td style="background: white; word-break: break-all" :style="{'border-bottom':(groupIndex < conds.groups.length-1) ? '1px solid rgba(34,36,38,.15)':''}">
						<div class="label-group">
							<template v-for="(cond, index) in group.conds">
								<TLabel outlined="" size="small">
									<var v-if="cond.type.length == 0 || cond.type == 'params'" style="font-style: normal">{{ cond.param }}
										<var>{{ cond.operator }}</var></var>
									<var v-if="cond.type.length > 0 && cond.type != 'params'" style="font-style: normal">{{ typeName(cond) }}: </var>
									{{ cond.value }}
									<sup v-if="cond.isCaseInsensitive" title="不区分大小写"><i class="icon info small"></i></sup>
								</TLabel>

								<TLabel v-if="index < group.conds.length - 1">
									<span v-if="group.connector == 'or'">或</span>
									<span v-if="group.connector == 'and'">和</span>
								</TLabel>
							</template>
						</div>
					</td>
					<td style="width: 5em; background: white" :style="{'border-bottom':(groupIndex < conds.groups.length-1) ? '1px solid rgba(34,36,38,.15)':''}">
						<a href="" title="修改分组" @click.prevent="updateGroup(groupIndex, group)"><i class="icon pencil small"></i></a>&nbsp;
						<a href="" title="删除分组" @click.prevent="removeGroup(groupIndex)"><i class="icon remove"></i></a>
					</td>
				</tr>
			</table>
			<TDivider></TDivider>
		</div>

		<!-- 分组之间关系 -->
		<table class="ui table definition" v-if="conds.groups.length > 1">
			<tr>
				<td class="title">分组之间关系</td>
				<td>
					<TSelect v-model="conds.connector">
						<TOption value="and">和</TOption>
						<TOption value="or">或</TOption>
					</TSelect>
					<p class="comment">
						<span v-if="conds.connector == 'or'">只要满足其中一个条件分组即可。</span>
						<span v-if="conds.connector == 'and'">需要满足所有条件分组。</span>
					</p>
				</td>
			</tr>
		</table>

		<div>
			<TButton secondary="" size="small" type="button" @click.prevent="addGroup()">+添加分组</TButton>
		</div>
	</div>
</template>

<style scoped>
</style>
