<script setup>

import "@/lib/array.js"
import {ref} from "vue"
import TDivider from "@/components/ui/TDivider.vue";
import TipIcon from "@/components/common/TipIcon.vue";
import TOption from "@/components/ui/TOption.vue";
import TSelect from "@/components/ui/TSelect.vue";
import PlusButton from "@/components/common/PlusButton.vue";
import TInputText from "@/components/ui/TInputText.vue";

const props = defineProps(["v-family", "v-oss-types"])

const originHostRef = ref()
const {origins, isAdding, family, ossTypes} = (function () {
	let family = props.vFamily
	if (family == null) {
		family = "http"
	}

	let ossTypes = props.vOssTypes
	if (ossTypes == null) {
		ossTypes = []
	}

	return {
		origins: ref([]),
		isAdding: ref(false),
		family: ref(family),
		ossTypes: ref(ossTypes)
	}
})()

const add = function () {
	let scheme = ""
	switch (family.value) {
		case "http":
			scheme = "http"
			break
		case "tcp":
			scheme = "tcp"
			break
		case "udp":
			scheme = "udp"
			break
	}
	origins.value.push({
		id: "",
		host: "",
		isPrimary: true,
		isPrimaryValue: 1,
		scheme: scheme
	})

	setTimeout(function () {
		let inputs = originHostRef.value
		if (inputs != null) {
			inputs[inputs.length - 1].focus()
		}
	}, 10)
}

const confirm = function () {
}

const cancel = function () {
}

const remove = function (index) {
	origins.value.$remove(index)
}

const changePrimary = function (origin) {
	origin.isPrimary = origin.isPrimaryValue == 1
}

const changeFamily = function (newFamily) {
	family.value = newFamily
	origins.value.forEach(function (origin) {
		let scheme = ""
		switch (family.value) {
			case "http":
				scheme = "http"
				break
			case "tcp":
				scheme = "tcp"
				break
			case "udp":
				scheme = "udp"
				break
		}
		origin.scheme = scheme
	})
}

defineExpose({
	changeFamily
})

</script>

<template>
	<div>
		<input type="hidden" name="originsJSON" :value="JSON.stringify(origins)"/>
		<div>
			<div class="ui fields inline" style="gap: 0;">
				<div class="ui field" style="width:112px;">源站协议</div>
				<div class="ui field" style="width:292px;">源站地址（Host:Port）</div>
				<div class="ui field flex items-center gap-[9px]">优先级<TipIcon content="优先级：优先使用主源站，如果主源站无法连接时才会连接备用源站"></TipIcon>
				</div>
			</div>
			<TDivider></TDivider>
			<div v-for="(origin, index) in origins">
				<div class="ui fields inline" style="margin-top: 0.6em; gap: 12px;">
					<div class="ui field w-[100px]">
						<TSelect v-model="origin.scheme">
							<TOption value="http" v-if="family == 'http'">http://</TOption>
							<TOption value="https" v-if="family == 'http'">https://</TOption>

							<!-- 对象存储 -->
							<optgroup label="对象存储" v-if="family == 'http' && ossTypes.length > 0"></optgroup>
							<TOption v-if="family == 'http'" v-for="ossType in ossTypes" :value="ossType.code">{{ ossType.name }}</TOption>

							<TOption value="tcp" v-if="family == 'tcp'">tcp://</TOption>
							<TOption value="tls" v-if="family == 'tcp'">tls://</TOption>
							<TOption value="udp" v-if="family == 'udp'">udp://</TOption>
						</TSelect>
					</div>
					<div class="ui field">
						<div v-show="origin.scheme != null && origin.scheme.startsWith('oss:')">
							请在创建网站后，再在对应网站设置"源站"功能中进行添加对象存储源站。
						</div>
						<div v-show="!origin.scheme.startsWith('oss:')">
							<TInputText type="text" placeholder="源站地址" v-model="origin.host" ref="originHostRef" style="width:20em"/>
						</div>
					</div>
					<div class="ui field">
						<div v-show="origin.scheme != null && origin.scheme.startsWith('oss:')">
						</div>
						<div v-show="!origin.scheme.startsWith('oss:')">
							<TSelect v-model="origin.isPrimaryValue" @change="changePrimary(origin)">
								<TOption value="1">主</TOption>
								<TOption value="0">备</TOption>
							</TSelect>
						</div>
					</div>
					<div class="ui field">
						<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove icon small"></i></a>
					</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 1em">
			<PlusButton type="button" @click.prevent="add()"></PlusButton>
		</div>
	</div>
</template>

<style scoped>
</style>
