<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {ref, watch} from "vue"
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import PriorCheckbox from "@/components/common/PriorCheckbox.vue";
import TDivider from "@/components/ui/TDivider.vue";
import MoreOptionsTbody from "@/components/common/MoreOptionsTbody.vue";
import PlusButton from "@/components/common/PlusButton.vue";
import CodeLabel from "@/components/common/CodeLabel.vue";
import TInputText from "@/components/ui/TInputText.vue";
import TLabel from "@/components/ui/TLabel.vue";
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const utils = useUtils()

const props = defineProps(["v-websocket-ref", "v-websocket-config", "v-is-location", "v-is-group"])

const {websocketRef, websocketConfig, handshakeTimeoutCountString, advancedVisible} = (function () {
	let websocketRef = props.vWebsocketRef
	if (websocketRef == null) {
		websocketRef = {
			isPrior: false,
			isOn: false,
			websocketId: 0
		}
	}

	let websocketConfig = props.vWebsocketConfig
	if (websocketConfig == null) {
		websocketConfig = {
			id: 0,
			isOn: false,
			handshakeTimeout: {
				count: 30,
				unit: "second"
			},
			allowAllOrigins: true,
			allowedOrigins: [],
			requestSameOrigin: true,
			requestOrigin: ""
		}
	} else {
		if (websocketConfig.handshakeTimeout == null) {
			websocketConfig.handshakeTimeout = {
				count: 30,
				unit: "second",
			}
		}
		if (websocketConfig.allowedOrigins == null) {
			websocketConfig.allowedOrigins = []
		}
	}

	return {
		websocketRef: ref(websocketRef),
		websocketConfig: ref(websocketConfig),
		handshakeTimeoutCountString: ref(websocketConfig.handshakeTimeout.count.toString()),
		advancedVisible: ref(false)
	}
})()

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

const changeAdvancedVisible = function (v) {
	advancedVisible.value = v
}

const createOrigin = function () {
	utils.popup("/servers/server/settings/websocket/createOrigin", {
		callback: function (resp) {
			websocketConfig.value.allowedOrigins.push(resp.data.origin)
		}
	})
}

const removeOrigin = function (index) {
	websocketConfig.value.allowedOrigins.$remove(index)
}

watch(handshakeTimeoutCountString, function (v) {
	let count = parseInt(v)
	if (!isNaN(count) && count >= 0) {
		websocketConfig.value.handshakeTimeout.count = count
	} else {
		websocketConfig.value.handshakeTimeout.count = 0
	}
})
</script>

<template>
	<div>
		<input type="hidden" name="websocketRefJSON" :value="JSON.stringify(websocketRef)"/>
		<input type="hidden" name="websocketJSON" :value="JSON.stringify(websocketConfig)"/>
		<DefinitionTable>
			<PriorCheckbox :v-config="websocketRef" v-if="vIsLocation || vIsGroup"></PriorCheckbox>
			<tbody v-show="((!vIsLocation && !vIsGroup) || websocketRef.isPrior)">
			<tr>
				<td class="title">启用Websocket</td>
				<td>
					<TCheckboxBinary v-model="websocketRef.isOn"/>
				</td>
			</tr>
			</tbody>
			<tbody v-show="isOn()">
			<tr>
				<td class="color-border">允许所有来源域<em>（Origin）</em></td>
				<td>
					<TCheckboxBinary v-model="websocketConfig.allowAllOrigins"/>
					<p class="comment">选中表示允许所有的来源域。</p>
				</td>
			</tr>
			</tbody>
			<tbody v-show="isOn() && !websocketConfig.allowAllOrigins">
			<tr>
				<td class="color-border">允许的来源域列表<em>（Origin）</em></td>
				<td>
					<div class="label-group" v-if="websocketConfig.allowedOrigins.length > 0">
						<TLabel outlined="" v-for="(origin, index) in websocketConfig.allowedOrigins">
							{{ origin }}&nbsp;
							<a href="" title="删除" @click.prevent="removeOrigin(index)"><i class="icon remove small"></i></a>
						</TLabel>
						<TDivider></TDivider>
					</div>
					<PlusButton secondary="" size="small" type="button" @click.prevent="createOrigin()"></PlusButton>
					<p class="comment">只允许在列表中的来源域名访问Websocket服务。</p>
				</td>
			</tr>
			</tbody>
			<MoreOptionsTbody @change="changeAdvancedVisible" v-show="isOn()"></MoreOptionsTbody>
			<tbody v-show="isOn() && advancedVisible">
			<tr>
				<td class="color-border">传递请求来源域</td>
				<td>
					<TCheckboxBinary v-model="websocketConfig.requestSameOrigin"/>
					<p class="comment">选中后，表示把接收到的请求中的
						<CodeLabel>Origin</CodeLabel>
						字段传递到源站。
					</p>
				</td>
			</tr>
			</tbody>
			<tbody v-show="isOn() && advancedVisible && !websocketConfig.requestSameOrigin">
			<tr>
				<td class="color-border">指定传递的来源域</td>
				<td>
					<TInputText type="text" v-model="websocketConfig.requestOrigin" maxlength="200" class="w-full"/>
					<p class="comment">指定向源站传递的
						<CodeLabel>Origin</CodeLabel>
						字段值。
					</p>
				</td>
			</tr>
			</tbody>
			<!-- TODO 这个选项暂时保留 -->
			<tbody v-show="isOn() && false">
			<tr>
				<td>握手超时时间<em>（Handshake）</em></td>
				<td>
					<div class="ui fields inline">
						<div class="ui field">
							<TInputText type="text" maxlength="10" v-model="handshakeTimeoutCountString" style="width:6em"/>
						</div>
						<div class="ui field">
							秒
						</div>
					</div>
					<p class="comment">0表示使用默认的时间设置。</p>
				</td>
			</tr>
			</tbody>
		</DefinitionTable>
	</div>
</template>

<style scoped>
</style>
