<script>
export default {
	inheritAttrs: false,
}
</script>
<script setup>
import {onMounted, ref} from "vue";
import TLabel from "@/components/ui/TLabel.vue";

const rootRef = ref()
const count = ref(0)

const visible = ref(false)
const toggle = () => {
	visible.value = !visible.value
}

onMounted(() => {
	let countNodes = 0
	rootRef.value.childNodes.forEach(node => {
		if (node.tagName != null) {
			countNodes ++
		}
	})
	count.value = countNodes
})
</script>

<template>
	<div class="items" :class="{'show-more' : visible, 'p-4 border dark:border-gray-700 bg-gray-50 dark:bg-gray-700 rounded-xl absolute': visible}" v-bind="$attrs" ref="rootRef">
		<slot></slot>
		<a class="more-link" v-if="count > 0" href="" @click.prevent="toggle">
			<TLabel class="outlined">
				<span v-if="!visible">更多({{ count - 1}}) <i class="pi pi-angle-double-right"></i></span>
				<span v-if="visible"><i class="pi pi-angle-double-left"></i> 收起</span>
			</TLabel>
		</a>
	</div>
</template>

<style scoped lang="postcss">
.items:not(.show-more) > *:not(.more-link) {
	@apply hidden;
}

.items > *:not(.more-link):first-child {
	@apply flex;
}

.more-link {
	.p-chip {
		@apply border-dashed;
	}

	span {
		@apply flex items-center gap-1 text-gray-500 dark:text-gray-200;

		i {
			@apply text-sm text-gray-400 dark:text-gray-200;
		}
	}
}
</style>