<script setup>
import Toast from "primevue/toast";
import TDivider from "@/components/ui/TDivider.vue";
import {inject} from "vue";
import LinkIcon from "@/components/common/LinkIcon.vue";
import CardRow from "@/components/common/CardRow.vue";

const utils = inject("$utils")

const dismissMessage = () => {
	utils.closeInstantMessage()
}
</script>

<template>
	<Toast group="instantMessage" position="bottom-right">
		<template #message="{message}">
			<div class="w-full box">
				<div class="title">
					即时消息：{{ message.detail.description }}
					<TDivider></TDivider>
				</div>
				<div class="message-description-box grid grid-cols-2">
					<!-- ipItem -->
					<CardRow no-hover v-if="message.detail.type == 'ipItem' && message.detail.params?.ip">
						<template #name>IP</template>
						<template #value>{{ message.detail.params.ip }}</template>
					</CardRow>
					<CardRow no-hover v-if="message.detail.type == 'ipItem' && message.detail.params?.ruleSetName">
						<template #name>触发的规则集</template>
						<template #value>{{ message.detail.params?.ruleSetName }}</template>
					</CardRow>
					<CardRow no-hover v-if="message.detail.type == 'ipItem' && message.detail.params?.sourceURL">
						<template #name>触发URL</template>
						<template #value>{{ message.detail.params?.sourceURL }}</template>
					</CardRow>
					<CardRow no-hover v-if="message.detail.type == 'ipItem' && message.detail.params?.sourceUserAgent">
						<template #name>触发客户端信息</template>
						<template #value>{{ message.detail.params?.sourceUserAgent }}</template>
					</CardRow>
					<CardRow no-hover v-if="message.detail.type == 'ipItem' && message.detail.params?.reason">
						<template #name>触发原因</template>
						<template #value>{{ message.detail.params?.reason }}</template>
					</CardRow>
					<CardRow no-hover v-if="message.detail.type == 'ipItem'">
						<template #name>相关链接</template>
						<template #value><a href="/waf/iplists" class="link">拦截IP</a></template>
					</CardRow>

					<!-- CC -->
					<CardRow no-hover v-if="message.detail.type == 'cc' && message.detail.params?.requests">
						<template #name>5分钟内请求数</template>
						<template #value>{{ utils.formatNumber(message.detail.params?.requests) }}</template>
					</CardRow>
					<CardRow no-hover v-if="message.detail.type == 'cc'">
						<template #name>相关链接</template>
						<template #value><a :href="'/servers/server/settings/cc?serverId=' + message.detail.serverId" class="link">CC防护功能</a></template>
					</CardRow>

					<!-- server -->
					<CardRow no-hover v-if="message.detail.serverId > 0">
						<template #name>网站</template>
						<template #value>{{ message.detail.serverName }}
							<LinkIcon :href="'/servers/server?serverId=' + message.detail.serverId"></LinkIcon>
						</template>
					</CardRow>
				</div>

				<span class="flex gap-2 items-center absolute right-2 top-2">
					<a class="icon-button" href="/settings/profile"><i class="pi pi-cog"></i></a>
					<a class="icon-button" href="" @click.prevent="dismissMessage"><i class="pi pi-remove"></i></a>
				</span>
			</div>
		</template>
		<template #closeicon></template>
	</Toast>
</template>

<style scoped lang="postcss">
.box {
	@apply text-gray-600 dark:text-gray-300;
}

.title {
	@apply font-medium pl-4 pr-4;
}

.message-description-box {
	@apply leading-8;
}

.icon-button {
	@apply w-8 h-8 flex items-center justify-center;

	&:hover {
		@apply bg-gray-200 dark:bg-gray-700 rounded-[50%];
	}
}
</style>