<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js";
import Context from "./viewPopup.js"
import TTabView from "@/components/ui/TTabView.vue";
import TTabs from "@/components/ui/TTabs.vue";
import TTab from "@/components/ui/TTab.vue";
import SourceCodeBox from "@/components/common/SourceCodeBox.vue";
import "./viewPopup.css"
import DefinitionTable from "@/components/common/DefinitionTable.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<PopupLayout>
		<header>访问日志详情</header>

		<TTabView v-model="ctx.tab" class="mb-4">
			<TTabs>
				<TTab code="summary">综合信息</TTab>
				<TTab code="response">响应数据（Response）</TTab>
				<TTab code="request">请求数据（Request）</TTab>
				<TTab code="cookie">Cookie</TTab>
				<TTab code="client">终端信息</TTab>
			</TTabs>
		</TTabView>

		<div v-if="ctx.tab == 'summary'">
			<table class="ui table selectable small celled">
				<tr>
					<td style="width: 50%">请求概要<em>(Request)</em>：{{ ctx.accessLog.request }}</td>
					<td>请求ID：{{ ctx.accessLog.requestId }}</td>
				</tr>
				<tr>
					<td>请求方法<em>(RequestMethod)</em>：{{ ctx.accessLog.requestMethod }}</td>
					<td>请求URI<em>(RequestURI)</em>：{{ ctx.accessLog.requestURI }}</td>
				</tr>
				<tr>
					<td>主机地址<em>(Host)</em>：{{ ctx.accessLog.host }}</td>
					<td>终端地址<em>(RemoteAddr:RemotePort)</em>：{{ ctx.accessLog.remoteAddr }}:{{ ctx.accessLog.remotePort }}
					</td>
				</tr>
				<tr>
					<td>请求来源<em>(Referer)</em>：
						<span v-if="ctx.accessLog.referer != null && ctx.accessLog.referer.length > 0">{{ ctx.accessLog.referer }}</span>
						<span v-else class="disabled">没有设置</span>
					</td>
					<td>终端信息<em>(UserAgent)</em>：
						<span v-if="ctx.accessLog.userAgent != null && ctx.accessLog.userAgent.length > 0">{{ ctx.accessLog.userAgent }}</span>
						<span v-else class="disabled">没有设置</span>
					</td>
				</tr>
				<tr>
					<td>状态<em>(StatusMessage)</em>：<span :class="{red:ctx.accessLog.status>=400, green:ctx.accessLog.status<400}">{{ ctx.accessLog.status }} {{ ctx.accessLog.statusMessage }} <span v-if="ctx.accessLog.originStatus >= 400 || (ctx.accessLog.originStatus > 0 && ctx.accessLog.originStatus != ctx.accessLog.status)" class="grey small">（源站{{ ctx.accessLog.originStatus }}）</span></span>
					</td>
					<td>文件类型<em>(ContentType)</em>：
						<span v-if="ctx.accessLog.contentType != null && ctx.accessLog.contentType.length > 0">{{ ctx.accessLog.contentType }}</span>
						<span v-else class="disabled">没有设置</span>
					</td>
				</tr>
				<tr>
					<td>下行流量<em>(BytesSent)</em>：
						<span v-if="ctx.accessLog.bytesSent != null">{{ ctx.accessLog.bytesSent }}
                    <span v-if="ctx.accessLog.bytesSent > 0" class="grey small">（{{ ctx.utils.formatBytes(ctx.accessLog.bytesSent) }}）</span>
                </span>
						<span v-else class="disabled">0</span>
					</td>
					<td>源站地址：
						<span v-if="ctx.accessLog.originAddress != null && ctx.accessLog.originAddress">{{ ctx.accessLog.originAddress }}</span>
						<span v-else class="disabled">未访问源站</span>
					</td>
				</tr>
				<tr>
					<td>ISO8601时间：{{ ctx.accessLog.timeISO8601 }}</td>
					<td>本地时间<em>(TimeLocal)</em>：{{ ctx.accessLog.timeLocal }}</td>
				</tr>
				<tr v-if="ctx.wafInfo != null">
					<td class="color-border">WAF策略：{{ ctx.wafInfo.policy.name }}</td>
					<td>WAF规则分组：
						<span v-if="ctx.wafInfo.group != null">{{ ctx.wafInfo.group.name }}</span>
						<span v-else>-</span>
					</td>
				</tr>
				<tr v-if="ctx.wafInfo != null && ctx.wafInfo.set != null">
					<td class="color-border">WAF规则集：
						<a :href="'/servers/components/waf/group?firewallPolicyId=' +  ctx.accessLog.firewallPolicyId + '&type=inbound&groupId=' + ctx.accessLog.firewallRuleGroupId+ '#set' + ctx.accessLog.firewallRuleSetId" v-if="ctx.wafInfo.policy.serverId == 0" target="_parent">{{ ctx.wafInfo.set.name }}</a>
						<a :href="'/servers/server/settings/waf/group?serverId=' + ctx.accessLog.serverId + '&firewallPolicyId=' + ctx.accessLog.firewallPolicyId + '&type=inbound&groupId=' + ctx.accessLog.firewallRuleGroupId + '#set' + ctx.accessLog.firewallRuleSetId" target="_parent" v-if="ctx.wafInfo.policy.serverId > 0">{{ ctx.wafInfo.set.name }}</a>
					</td>
					<td></td>
				</tr>
				<tr v-if="ctx.accessLog.errors != null && ctx.accessLog.errors.length > 0">
					<td colspan="2">
						<div v-for="error in ctx.accessLog.errors">
							<pre><span class="red">{{ error }}</span></pre>
						</div>
					</td>
				</tr>
			</table>
		</div>

		<div v-if="ctx.tab == 'response'">
			<DefinitionTable class="small">
				<tbody>
				<tr>
					<td class="title">Status</td>
					<td>{{ ctx.accessLog.status }} {{ ctx.accessLog.statusMessage }}</td>
				</tr>
				</tbody>
			</DefinitionTable>
			<DefinitionTable class="small" v-if="ctx.responseHeaders.length > 0">
				<tbody v-for="header in ctx.responseHeaders">
				<tr v-for="value in header.values">
					<td class="title">
						<span v-if="header.isGeneral">{{ header.name }}</span>
						<span style="font-style: italic" v-else>{{ header.name }}</span>
					</td>
					<td>{{ value }}</td>
				</tr>
				</tbody>
			</DefinitionTable>
		</div>

		<div v-if="ctx.tab == 'request'">
			<DefinitionTable class="small">
				<tbody v-for="header in ctx.requestHeaders">
				<tr v-for="value in header.values">
					<td class="title">
						<span v-if="header.isGeneral">{{ header.name }}</span>
						<span style="font-style: italic" v-else>{{ header.name }}</span>
					</td>
					<td>{{ value }}</td>
				</tr>
				</tbody>
				<tbody v-if="ctx.requestBody.length > 0">
				<tr>
					<td colspan="2">请求内容：</td>
				</tr>
				<tr>
					<td colspan="2">
						<SourceCodeBox :type="ctx.requestContentType">{{ ctx.requestBody }}</SourceCodeBox>
					</td>
				</tr>
				</tbody>
			</DefinitionTable>
		</div>

		<div v-if="ctx.tab == 'cookie'">
			<p class="comment" v-if="ctx.cookies.length == 0">暂时没有Cookie数据。</p>
			<div v-else>
				<DefinitionTable class="small">
					<tbody>
					<tr v-for="cookie in ctx.cookies">
						<td class="title">{{ cookie.name }}</td>
						<td>{{ cookie.value }}</td>
					</tr>
					</tbody>
				</DefinitionTable>
			</div>
		</div>

		<div v-if="ctx.tab == 'client'">
			<DefinitionTable class="small">
				<tbody>
				<tr>
					<td class="title">综合信息<em>(UserAgent)</em></td>
					<td>
						<span v-if="ctx.accessLog.userAgent != null && ctx.accessLog.userAgent.length > 0">{{ ctx.accessLog.userAgent }}</span>
						<span class="disabled" v-else>没有设置</span>
					</td>
				</tr>
				<tr>
					<td>IP</td>
					<td>{{ ctx.accessLog.remoteAddr }}</td>
				</tr>
				<tr v-if="ctx.region != null && ctx.region.full != null && ctx.region.full.length > 0">
					<td>区域</td>
					<td>{{ ctx.region.full }}</td>
				</tr>
				<tr v-if="ctx.region != null && ctx.region.isp != null && ctx.region.isp.length > 0">
					<td>ISP</td>
					<td>{{ ctx.region.isp }}</td>
				</tr>
				</tbody>
			</DefinitionTable>
		</div>
	</PopupLayout>
</template>

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