<script setup>
import {inject, onMounted, ref, watchEffect} from "vue";

const utils = inject("$utils")

const props = defineProps({
	name: {type: String, default: ""},
	aliasName: {type: String, default: ""},
	value: {type: String, default: ""},
	comment: {type: String, default: ""},
	colspan: {default: ""},
	full: {type: Boolean, default: false},
	newRow: {type: Boolean, default: false},
	tip: {type: String, default: ""},
	groupItem: {type: Boolean, default: false},
	required: {type: Boolean, default: false},
	noHover: {type: Boolean, default: false}
})

const valueRef = ref()

// custom class
const customClass = ref({})
const calculateCustomClass = () => {
	customClass.value = {}

	if (props.colspan == "full") {
		customClass.value["col-span-full"] = true
	} else if (typeof props.colspan === "string" && props.colspan.match(/^\d+$/)) {
		customClass.value["col-span-" + props.colspan] = true
	} else if (typeof props.colspan === "number") {
		customClass.value["col-span-" + props.colspan] = true
	}

	if (props.full) {
		customClass.value["col-span-full"] = true
	}

	if (props.newRow) {
		customClass.value["col-start-1"] = true
	}

	if (props.groupItem) {
		customClass.value["!border-l-gray-100 dark:!border-l-gray-800"] = true
	}

	if (props.noHover) {
		customClass.value["no-hover"] = true
	}
}

watchEffect(() => {
	calculateCustomClass()
})

// tip
const showTip = (tip) => {
	utils.popupTip(tip)
}

// label
const processLabels = () => {
	valueRef.value.querySelectorAll(".p-chip").forEach(label => {
		if (!label.className.match(/\b(small|large|normal|tiny)\b/)) {
			label.className += " small"
		}
	})
}

// lifecycle
onMounted(() => {
	calculateCustomClass()

	// label
	processLabels()
	setTimeout(() => processLabels())
})

</script>

<template>
	<div class="row border-l-[1px] border-l-transparent" :class="customClass">
		<slot name="start"></slot>
		<div class="name" v-if="(name != null && name.length > 0) || $slots.name">
			<div>
				{{ name }}
				<slot name="name"></slot>
			</div>
			<div class="alias-name" v-if="aliasName.length > 0">({{ aliasName }})</div>
			<span v-if="required">&nbsp;*</span>
			<a href="" v-if="tip.length > 0" @click.prevent="showTip(tip)" v-tooltip.top="'点击看帮助'"><i class="icon pi pi-question-circle text-gray-400"></i></a>
		</div>
		<div class="value" ref="valueRef">{{ value }}
			<slot name="value"></slot>
		</div>
		<p class="comment" v-if="comment.length > 0 || $slots.comment">{{ comment }}
			<slot name="comment"></slot>
		</p>
		<slot></slot>
		<slot name="end"></slot>
	</div>
</template>

<style scoped lang="postcss">
.row {
	@apply leading-6 px-4 py-2;
	word-break: break-word;

	&:not(.no-hover):hover {
		@apply !border-l-transparent bg-gray-50 dark:bg-gray-800 rounded-lg;

		.comment, :deep(.comment) {
			@apply dark:border-l-gray-500;
		}
	}
}

.name {
	color: var(--p-text-muted-color);
	@apply flex items-center gap-1;

	:deep(em) {
		@apply ml-2 text-sm not-italic text-gray-500 font-normal;
	}

	a {
		@apply flex;

		i:hover {
			color: var(--p-primary-700);
		}
	}

	.alias-name {
		@apply text-sm text-gray-500 dark:text-gray-500 font-normal;
	}
}

.value {
	font-size: 0.95em;
	@apply mt-1.5;
}

.comment, :deep(.comment) {
	font-size: 0.95em;
	@apply !mt-1.5 border-l-2 dark:border-l-gray-800 pl-2;
}

</style>