<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./addCondPopup.js"
import SubmitButton from "@/components/form/SubmitButton.vue";
import HTTPCondParams from "@/components/server/HTTPCondParams.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import PostForm from "@/components/form/PostForm.vue";
import {ref} from "vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const component = ref()
const ctx = ctxRef(new Context(), {
	refs: {component}
})

</script>

<template>
	<PopupLayout>

		<header v-if="!ctx.isUpdating">添加子条件</header>
		<header v-if="ctx.isUpdating">修改子条件</header>
		<PostForm action="$" @success="ctx.success">
			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">选择条件类型</td>
					<td>
						<TSelect name="condType" v-model="ctx.condType" @change="ctx.changeCondType">
							<TOption v-for="c in ctx.components" :value="c.type">{{ c.name }}</TOption>
						</TSelect>
						<template v-for="c in ctx.components">
							<p class="comment" v-if="ctx.condType == c.type">{{ c.description }}</p>
						</template>
					</td>
				</tr>
				<tr v-if="ctx.condType != 'params'">
					<td>{{ ctx.paramsTitle }}</td>
					<td>

						<Component :is="ctx.currentComponent.component" :v-cond="ctx.cond" ref="component"></Component>
					</td>
				</tr>
				<tr v-if="ctx.paramsCaseInsensitive">
					<td>不区分大小写</td>
					<td>
						<TCheckboxBinary v-model="ctx.isCaseInsensitive" @change="ctx.changeCaseInsensitive"/>
						<p class="comment">选中后表示对比时忽略参数值的大小写。</p>
					</td>
				</tr>

				<!-- 变量相关 -->
				<HTTPCondParams :v-cond="ctx.cond" v-if="ctx.condType == 'params'"></HTTPCondParams>

				</tbody>
			</DefinitionTable>
			<SubmitButton>确定</SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

<style lang="postcss" scoped>
</style>