<template>
    <ULink v-for="(item, index) in limitSource" :to="item.url" :title="item.url" target="_blank">
        <UCard :ui="cardUI">
            <div class="flex flex-col h-full gap-1">
                <template v-if="getIconPath(item.url) === 'github'">
                    <div class="items-center flex gap-1">
                        <UIcon name="i-simple-icons-github" class="flex-shrink-0" />
                        <div class="flex flex-grow overflow-hidden">
                            <div class="truncate">{{ item.title }}</div>
                        </div>
                        <div class="text-gray-200">{{ index + 1 }}</div>
                    </div>
                    <div class="text-blue-500 line-clamp-1">{{ item.label }}</div>
                </template>
                <template v-else>
                    <div class="flex gap-1 h-full">
                        <div class="line-clamp-2 text-sm">{{ item.title }}</div>
                    </div>
                    <div class="items-center flex gap-1">
                        <UAvatar :src="getIconPath(item.url)" size="2xs" class="flex-shrink-0" />
                        <div class="flex flex-grow overflow-hidden">
                            <div class="truncate text-xs text-gray-500">{{ getDomain(item.url) }}</div>
                        </div>
                        <div class="text-gray-200 text-sm">{{ index + 1 }}</div>
                    </div>
                </template>
            </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 v-if="!showAllSource" name="i-heroicons-chevron-down-20-solid" />
            <UIcon v-else name="i-heroicons-chevron-up-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 = {
    base: 'h-full',
    body: {
        padding: 'sm:p-2 p-2',
        base: 'h-full'
    },
    background: 'transition hover:bg-gray-100 dark:hover:bg-gray-800'
}
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)
})
function getIconPath (url) {
    if (!url || !url.startsWith('http')) return ''
    const uri = new URL(url)
    if (uri.origin.endsWith('github.com')) return 'github'
    return `https://www.google.com/s2/favicons?sz=128&domain=${url}`
}
function getDomain(url) {
    // 使用正则表达式匹配协议和域名部分
    const regex = /^(https?:\/\/)?([^\/]+)/
    const match = url.match(regex)

    // 如果匹配不到,返回空字符串
    if (!match) {
        return ''
    }

    // 获取域名部分
    const domain = match[2]

    // 去除可能存在的端口号
    // 返回域名
    return domain.split(':')[0];
}
const handleToggleShowAll = () => {
    showAllSource.value = !showAllSource.value
}
</script>
