<script setup>
// 常用属性：
//   label - 显示的标签内容
//   severity - 类型："success" | "secondary" | "info" | "warn" | "danger" | "contrast"
//   rounded - 圆角形式
//   icon - 图标

import Tag from "primevue/tag";
import T from "./T.js"
import {onUpdated, ref} from "vue";

const props = defineProps({
	severity: "",
	value: null,
	label: null,
	success: "",
	secondary: "",
	info: "",
	warn: "",
	danger: "",
	contrast: "",
	error: "",
	warning: ""
})

const composeSeverity = () => {
	return T.composeSeverity(props, ["success", "secondary", "info", "warn", "danger", "contrast"], {
		error: "danger",
		warning: "warn"
	})
}

const severity = ref(composeSeverity())

let value = props.value
if (T.isNull(value) && typeof props.label === "string") {
	value = props.label
}

onUpdated(() => {
	severity.value = composeSeverity()
})

</script>

<template>
	<Tag :value="value" :severity="severity">
		<slot></slot>
	</Tag>
</template>

<style scoped>
.p-tag {
	font-weight: 400;
	height: 34px !important;
	padding-left: 12px;
	padding-right: 12px;
	border: 1px solid #F5F8FF;
	background-color: #EEF2FA;
	@apply rounded-[17px];
}

.p-tag.small {
	font-size: 0.9em;
}

tr:hover .p-tag-secondary {
	@apply bg-gray-200 dark:bg-gray-700;
}
</style>