<template>
    <ULink v-for="(item, index) in limitSource" :to="item.link" :title="item.link" target="_blank">
        <UCard :ui="cardUI">
            <div class="flex flex-col gap-1">
                <div class="items-center flex gap-1">
                    <UIcon name="i-simple-icons-github" />
                    <div class="truncate flex flex-grow">{{ item.repo }}</div>
                    <div class="text-gray-200">{{ index + 1 }}</div>
                </div>
                <div class="text-blue-500 truncate">{{ item.label }}</div>
            </div>
        </UCard>
    </ULink>
    <UCard class="cursor-pointer" :ui="cardUI" v-if="source.length > 6" @click="handleToggleShowAll">
        <div class="flex items-center justify-center h-full gap-1">
            <UIcon name="i-heroicons-link-20-solid" />
            <div v-if="!showAllSource">查看全部{{ source.length }}个来源</div>
            <div v-else>收起</div>
        </div>
    </UCard>
</template>
<script setup>
const props = defineProps({
    source: {
        type: Array,
        default: () => []
    }
})
const cardUI = {
    body: {
        padding: 'sm:p-3 p-3',
        base: 'h-full'
    }
}
const showAllSource = ref(false)
const limitSource = computed(() => {
    if (props.source.length <= 6) return props.source
    else if (showAllSource.value) return props.source
    else return props.source.slice(0, 5)
})

const handleToggleShowAll = () => {
    showAllSource.value = !showAllSource.value
}
</script>
