<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {ref} from "vue"
import CodeLabel from "@/components/common/CodeLabel.vue";
import Keyword from "@/components/common/Keyword.vue";
import punycode from "@/utils/punycode.js";
import CodeLabelPlain from "@/components/common/CodeLabelPlain.vue";
import IPBox from "@/components/iplist/IPBox.vue";
import CopyToClipboard from "@/components/common/CopyToClipboard.vue";

const utils = useUtils()

const props = defineProps(["v-access-log", "v-keyword", "v-show-server-link"])

const boxRef = ref()
const {accessLog} = (function () {
	let accessLog = props.vAccessLog
	if (accessLog.header != null && accessLog.header.Upgrade != null && accessLog.header.Upgrade.values != null && accessLog.header.Upgrade.values.$contains("websocket")) {
		if (accessLog.scheme == "http") {
			accessLog.scheme = "ws"
		} else if (accessLog.scheme == "https") {
			accessLog.scheme = "wss"
		}
	}

	// 对TAG去重
	if (accessLog.tags != null && accessLog.tags.length > 0) {
		let tagMap = {}
		accessLog.tags = accessLog.tags.$filter(function (k, tag) {
			let b = (typeof (tagMap[tag]) == "undefined")
			tagMap[tag] = true
			return b
		})
	}

	// 域名
	accessLog.unicodeHost = ""
	if (accessLog.host != null && accessLog.host.startsWith("xn--")) {
		// port
		let portIndex = accessLog.host.indexOf(":")
		if (portIndex > 0) {
			accessLog.unicodeHost = punycode.ToUnicode(accessLog.host.substring(0, portIndex))
		} else {
			accessLog.unicodeHost = punycode.ToUnicode(accessLog.host)
		}
	}

	return {
		accessLog: ref(accessLog)
	}
})()

const formatCost = function (seconds) {
	if (seconds == null) {
		return "0"
	}
	let s = (seconds * 1000).toString();
	let pieces = s.split(".");
	if (pieces.length < 2) {
		return s;
	}

	return pieces[0] + "." + pieces[1].substring(0, 3);
}

const showLog = function () {
	let requestId = accessLog.value.requestId
	/**
	 * // TODO 需要重新实现
	this.$parent.$children.forEach(function (v) {
		if (v.deselect != null) {
			v.deselect()
		}
	})
	 **/
	select()
	utils.popup("/servers/server/log/viewPopup?requestId=" + requestId, {
		width: "50em",
		height: "32em",
		onClose: function () {
			deselect()
		}
	})
}

const select = function () {
	boxRef.value.parentNode.style.cssText = "background: rgba(0, 0, 0, 0.1)"
}

const deselect = function () {
	boxRef.value.parentNode.style.cssText = ""
}

const mismatch = function () {
	utils.warn("当前访问没有匹配到任何网站")
}


</script>

<template>
	<div style="word-break: break-all" :style="{'color': (accessLog.status >= 400) ? '#dc143c' : ''}" ref="boxRef">
		<div>
			<!--<a v-if="accessLog.node != null && accessLog.node.nodeCluster != null" :href="'/clusters/cluster/node?nodeId=' + accessLog.node.id + '&clusterId=' + accessLog.node.nodeCluster.id" title="点击查看节点详情" target="_top"><span class="grey">[{{ accessLog.node.name }}<span v-if="!accessLog.node.name.endsWith('节点')">节点</span>]</span></a>-->

			<!-- 网站 -->
			<a :href="'/servers/server/log?serverId=' + accessLog.serverId" v-tooltip.bottom="'点击到网站'" v-if="vShowServerLink && accessLog.serverId > 0"><span class="grey">[网站]</span></a>
			<span v-if="vShowServerLink && (accessLog.serverId == null || accessLog.serverId == 0)" @click.prevent="mismatch()"><span class="disabled">[网站]</span></span>

			<span v-if="accessLog.region != null && accessLog.region.length > 0" class="grey"><IPBox :v-ip="accessLog.remoteAddr">[{{ accessLog.region }}]</IPBox></span>
			<IPBox>
				<Keyword :v-word="vKeyword">{{ accessLog.remoteAddr }}</Keyword>
			</IPBox>
			[{{ accessLog.timeLocal }}] <em>&quot;<Keyword :v-word="vKeyword">{{ accessLog.requestMethod }}</Keyword>
			{{ accessLog.scheme }}://<Keyword :v-word="vKeyword">{{ accessLog.host }}</Keyword><Keyword :v-word="vKeyword">{{ accessLog.requestURI }}</Keyword>
			<CopyToClipboard :text="accessLog.scheme + '://' + accessLog.host + accessLog.requestURI" tooltip="复制URL" class="disabled px-1"></CopyToClipboard> {{ accessLog.proto }}&quot; </em>
			<Keyword :v-word="vKeyword">{{ accessLog.status }}</Keyword>

			<CodeLabel v-if="accessLog.unicodeHost != null && accessLog.unicodeHost.length > 0">{{ accessLog.unicodeHost }}</CodeLabel>

			<!-- attrs -->
			<CodeLabel v-if="accessLog.attrs != null && (accessLog.attrs['cache.status'] == 'HIT' || accessLog.attrs['cache.status'] == 'STALE')">cache {{ accessLog.attrs['cache.status'].toLowerCase() }}</CodeLabel>
			<!-- waf -->
			<CodeLabel v-if="accessLog.firewallActions != null && accessLog.firewallActions.length > 0">waf {{ accessLog.firewallActions }}</CodeLabel>

			<!-- tags -->
			<span v-if="accessLog.tags != null && accessLog.tags.length > 0">- <CodeLabel v-for="tag in accessLog.tags" :key="tag">{{ tag }}</CodeLabel>
		</span>
			<span v-if="accessLog.wafInfo != null && accessLog.wafInfo.policy != null">
			<a :href="(accessLog.wafInfo.policy.serverId == 0) ? '/servers/components/waf/group?firewallPolicyId=' +  accessLog.firewallPolicyId + '&type=inbound&groupId=' + accessLog.firewallRuleGroupId+ '#set' + accessLog.firewallRuleSetId : '/servers/server/settings/waf/group?serverId=' + accessLog.serverId + '&firewallPolicyId=' + accessLog.firewallPolicyId + '&type=inbound&groupId=' + accessLog.firewallRuleGroupId + '#set' + accessLog.firewallRuleSetId" target="_blank">
				<CodeLabelPlain>
					<span>
						WAF -
						<span v-if="accessLog.wafInfo.group != null">{{ accessLog.wafInfo.group.name }} -</span>
						<span v-if="accessLog.wafInfo.set != null">{{ accessLog.wafInfo.set.name }}</span>
					</span>
				</CodeLabelPlain>
			</a>
		</span>

			<span v-if="accessLog.requestTime != null"> - 耗时:{{ formatCost(accessLog.requestTime) }} ms </span><span v-if="accessLog.humanTime != null && accessLog.humanTime.length > 0" class="grey small">&nbsp; ({{ accessLog.humanTime }})</span>
			&nbsp; <a href="" @click.prevent="showLog" v-tooltip.bottom="'查看详情'"><i class="icon expand"></i></a>
		</div>
	</div>
</template>

<style scoped>
</style>
