<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js"
import Context from "./updateSchedulingPopup.js"
import TSelect from "@/components/ui/TSelect.vue";
import PostForm from "@/components/form/PostForm.vue";
import TOption from "@/components/ui/TOption.vue";
import TInputText from "@/components/ui/TInputText.vue";
import SubmitButton from "@/components/form/SubmitButton.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>

		<header>修改调度算法</header>

		<PostForm action="$" @success="ctx.success">
			<input type="hidden" name="dataType" :value="ctx.dataType"/>
			<input type="hidden" name="serverId" :value="ctx.serverId"/>
			<input type="hidden" name="reverseProxyId" :value="ctx.reverseProxyId"/>

			<DefinitionTable>
				<tbody>
				<tr>
					<td class="title">选择调度算法</td>
					<td>
						<TSelect name="type" v-model="ctx.selectedType"
								 @change="ctx.changeSchedulingType()">
							<TOption v-for="schedulingType in ctx.schedulingTypes"
									 :value="schedulingType.code">{{schedulingType.name}}</TOption>
						</TSelect>
						<p class="comment">{{ctx.schedulingTypeDescription}}</p>
					</td>
				</tr>
				<tr v-if="ctx.selectedType == 'hash'">
					<td>
						Key
					</td>
					<td>
						<TInputText name="hashKey" v-model="ctx.hashKey" maxlength="500" class="w-full"/>
						<p class="comment">用来计算Hash的字符串，其中可以使用变量。</p>
					</td>
				</tr>
				<tr v-if="ctx.selectedType == 'hash'">
					<td>常用变量</td>
					<td>
						<TSelect v-model="ctx.hashVar" @change="ctx.changeHashVar()">
							<TOption></TOption>
							<TOption value="${remoteAddr}">客户端IP</TOption>
							<TOption value="${host}${requestURI}">请求URL</TOption>
						</TSelect>
					</td>
				</tr>
				<tr v-if="ctx.selectedType == 'sticky'">
					<td>参数类型</td>
					<td>
						<TSelect name="stickyType" v-model="ctx.stickyType">
							<TOption value="cookie">Cookie</TOption>
							<TOption value="header">HTTP Header</TOption>
							<TOption value="argument">URL参数</TOption>
						</TSelect>
					</td>
				</tr>
				<tr v-if="ctx.selectedType == 'sticky'">
					<td>参数名</td>
					<td>
						<TInputText name="stickyParam" v-model="ctx.stickyParam" maxlength="50" class="w-full"/>
						<p class="comment">记录或指定源站的参数名，只能是英文字母和数字的组合，不允许有下划线（因为在HTTP Header中下划线是不标准的）</p>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<SubmitButton></SubmitButton>
		</PostForm>
	</PopupLayout>
</template>

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