<script setup>
// 常用属性：
//    severity - 类型："error" | "success" | "secondary" | "info" | "warn" | "contrast"
//    icon - 图标
//    closable - 是否可以关闭
//    closeIcon - 关闭用的图标
//    life - 延迟关闭时间，单位ms

import {ref} from "vue";

import Message from "primevue/message";
import T from "@/components/ui/T.js";

const severities = ["success", "secondary", "info", "warn", "danger", "contrast", "warning", "error"]
const props = defineProps(["severity", "success", "secondary", "info", "warn", "danger", "contrast", "warning", "error"])
const severity = ref(T.composeSeverity(props, severities, {
	"warning": "warn",
	"danger": "error"
}))

if (typeof severity.value != "string" || severity.value.length == 0) {
	severity.value = "secondary"
}

</script>

<template>
	<Message :severity="severity">
		<div class="pr-4">
			<slot></slot>
		</div>
	</Message>
</template>

<style scoped lang="postcss">
.p-message {
	@apply ml-1;
}

:deep(.p-message-text) {
	@apply font-normal;
}

:deep(.p-message-text a)  {
	color: var(--p-primary-color);
}

:deep(.p-message-text a:hover)  {
	color: var(--p-primary-700);
}
</style>