<script setup>

import {ref} from "vue"
import TinyBasicLabel from "@/components/common/TinyBasicLabel.vue";
import LabelOn from "@/components/common/LabelOn.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";

const props = defineProps(["v-origins", "v-origin-type"])

const emits = defineEmits(["delete-origin", "update-origin", "update-origin-is-on"])

const {hasMatchedDomains} = (function () {
	let hasMatchedDomains = false
	let origins = props.vOrigins
	if (origins != null && origins.length > 0) {
		origins.forEach(function (origin) {
			if (origin.domains != null && origin.domains.length > 0) {
				hasMatchedDomains = true
			}
		})
	}

	return {
		hasMatchedDomains: ref(hasMatchedDomains)
	}
})()

const deleteOrigin = function (originId, originAddr) {
	emits("delete-origin", originId, originAddr, props.vOriginType)
}

const updateOrigin = function (originId) {
	emits("update-origin", originId, props.vOriginType)
}

const updateOriginIsOn = function (originId, originAddr, isOn) {
	emits("update-origin-is-on", originId, originAddr, isOn)
}

</script>

<template>
	<ListTable :items="vOrigins">
		<TColumn header="源站地址" class="url-column" frozen>
			<template #body="{data: origin}">
				<a href="" @click.prevent="updateOrigin(origin.id)" :class="{disabled:!origin.isOn}">{{ origin.addr }} &nbsp;<i class="icon expand small"></i></a>
				<div class="label-group mt-1">
					<TinyBasicLabel v-if="origin.isOSS"><i class="icon database"></i>&nbsp;对象存储
					</TinyBasicLabel>
					<TinyBasicLabel v-if="origin.name.length > 0">{{ origin.name }}</TinyBasicLabel>
					<TinyBasicLabel v-if="origin.hasCert">证书</TinyBasicLabel>
					<TinyBasicLabel v-if="origin.host != null && origin.host.length > 0">主机名: {{ origin.host }}</TinyBasicLabel>
					<TinyBasicLabel v-if="origin.followPort">端口跟随</TinyBasicLabel>
					<TinyBasicLabel v-if="origin.addr != null && origin.addr.startsWith('https://') && origin.http2Enabled">HTTP/2</TinyBasicLabel>
					<TinyBasicLabel v-if="origin.isTLSFamily && origin.tlsSecurityVerifyMode && origin.tlsSecurityVerifyMode != 'auto'">
						<span v-if="origin.tlsSecurityVerifyMode == 'force'">强校验回源证书</span>
						<span v-if="origin.tlsSecurityVerifyMode == 'skip'">不校验回源证书</span>
					</TinyBasicLabel>

					<template v-if="origin.domains != null && origin.domains.length > 0"><TinyBasicLabel v-for="domain in origin.domains">匹配: {{ domain }}</TinyBasicLabel></template>
					<template v-else-if="hasMatchedDomains"><TinyBasicLabel>匹配: 所有域名</TinyBasicLabel></template>
				</div>
			</template>
		</TColumn>
		<TColumn header="权重" class="value-column">
			<template #body="{data: origin}">
				{{ origin.weight }}
			</template>
		</TColumn>
		<TColumn header="状态" class="fixed-status-column">
			<template #body="{data: origin}">
				<LabelOn :v-is-on="origin.isOn"></LabelOn>
			</template>
		</TColumn>
		<TColumn header="操作" class="three op" frozen align-frozen="right">
			<template #body="{data: origin}">
				<a href="" @click.prevent="updateOrigin(origin.id)">修改</a> &nbsp;
				<a href="" v-if="origin.isOn" @click.prevent="updateOriginIsOn(origin.id, origin.addr, false)">停用</a><a href="" v-if="!origin.isOn" @click.prevent="updateOriginIsOn(origin.id, origin.addr, true)"><span class="red">启用</span></a> &nbsp;
				<a href="" @click.prevent="deleteOrigin(origin.id, origin.addr)">删除</a>
			</template>
		</TColumn>
	</ListTable>
</template>

<style scoped>
</style>
