<template>
    <ULink :to="`/search/${thread.c_id}`" class="flex flex-col group">
        <div class="transition truncate group-hover:text-primary">{{ thread.title }}</div>
        <div class="break-word text-balance line-clamp-2 font-sans text-base" :class="textColor">
           {{ thread.description || ' 待补充' }}
        </div>
    </ULink>
    <div class="flex justify-between items-center">
        <div class="flex gap-4">
            <div class="flex items-center text-sm gap-0.5" :class="textColor">
                <UIcon name="i-heroicons-eye" />
                <span>1</span>
            </div>
            <div class="flex items-center text-sm gap-0.5" :class="textColor">
                <UIcon name="i-heroicons-clock" />
                <span>{{ useTime(thread.create_time) }}</span>
            </div>
        </div>
        <div class="flex gap-4">
            <template v-for="collect in thread.collections" :key="collect.collection_id">
                <UButton
                    :ui="{ rounded: 'rounded-full' }"
                    :to="`/library/${collect.collection_id}`"
                    color="white"
                    size="2xs"
                    :label="collect.collection_name"
                />
            </template>
            <UTooltip text="添加到收藏" v-if="!thread.collections.length">
                <UButton
                    color="gray"
                    variant="ghost"
                    size="2xs"
                    icon="i-heroicons-plus"
                    @click="handleOpenSelect"
                />
            </UTooltip>
            <IActionThread
                :collection_id="thread.collections.length ? thread.collections[0].collection_id : ''"
                :c_id="item.c_id"
            />
        </div>
    </div>
    <UDivider />
</template>
<script setup>
const Layout = inject('Layout')
const { $openLibrarySelect } = useLibraryStore()
const textColor = 'text-gray-500 dark:text-gray-400'
const props = defineProps({
    item: {
        type: Object,
        default: (() => {})()
    },
    isItem: {
        type: Boolean,
        default: false
    }
})
const thread = computed(() => {
    if (!props.isItem) return props.item
    else {
        const item = props.item
        item.title = props.item.c_title
        item.collections = []
        if (props.item.collection_id && props.item.collection_name) {
            item.collections = [
                {
                    collection_id: props.item.collection_id,
                    collection_name: props.item.collection_name
                }
            ]
        }
        return item
    }
})
function handleOpenSelect () {
    $openLibrarySelect(props.item.c_id)
}
function handleUpdateCollect (data) {
    const { c_id } = data.value
    if (c_id === thread.value.c_id) {
        thread.value.collections = [data.value]
        Layout.handleClearCollectData()
    }
}
function handleRemoveCollect (data) {
    const { c_id } = data.value
    if (c_id === thread.value.c_id) {
        thread.value.collections = []
        Layout.handleClearRemoveCollectData()
    }
}
watch(()=> Layout.selectCollectData, (data) => {
    if (data.value !== null) handleUpdateCollect(data)
}, { deep: true })
watch(()=> Layout.removeCollectData, (data) => {
    if (data.value !== null) handleRemoveCollect(data)
}, { deep: true })
</script>