<script setup>

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

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

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

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

	conds.groups.forEach(function (group) {
		group.conds.forEach(function (cond) {
			cond.typeName = typeName(cond)
		})
	})

	return {
		conds: ref(conds)
	}
})()

const updateConds = function (newConds) {
	conds.value = newConds
}

const notifyChange = function () {
	if (conds.value.groups != null) {
		conds.value.groups.forEach(function (group) {
			group.conds.forEach(function (cond) {
				cond.typeName = typeName(cond)
			})
		})
	}
}

defineExpose({
	updateConds,
	notifyChange
})

</script>

<template>
	<div>
		<div v-if="conds.groups.length > 0">
			<div v-for="(group, groupIndex) in conds.groups" class="label-group">
				<template v-for="(cond, index) in group.conds">
					<TLabel outlined="">
						<span>
							<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">{{ cond.typeName }}: </var>
							{{ cond.value }}
							<sup v-if="cond.isCaseInsensitive" title="不区分大小写"><i class="pi pi-info small"></i></sup>
						</span>
					</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>
				<TDivider v-if="groupIndex != conds.groups.length - 1" style="margin-top:0.3em;margin-bottom:0.5em"></TDivider>
				<div>
					<TLabel outlined="" size="tiny" class="olive" v-if="group.description != null && group.description.length > 0">{{ group.description }}</TLabel>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped>
</style>
