<template>
    <div class="w-full items-center flex flex-col">
        <ILibraryHeader />
        <div class="container max-w-screen-lg flex flex-col p-6">
            <div class="flex gap-10">
                <div class="flex flex-col flex-grow">
                    <div class="flex flex-col gap-4">
                        <ILibraryThread
                            v-for="item in themes"
                            :item="item"
                            :key="item.c_id"
                        />
                    </div>
                </div>
                <div class="flex flex-col flex-shrink-0 w-56">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center text-lg gap-2">
                            <UIcon name="i-heroicons-squares-2x2" />
                            <div>合集</div>
                        </div>
                        <UButton
                            icon="i-heroicons-plus-20-solid"
                            variant="soft"
                            @click="handleOpenCreateLibrary"
                        />
                    </div>
                    <div class="flex flex-col gap-4 mt-4">
                        <ILibraryCollect
                            v-for="item in collection"
                            :item="item"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
const { $openLibraryCreate } = useLibraryStore()
const { getCollection } = useCollectionRequest()
const { getThemeList } = useThemeRequest()

function handleOpenCreateLibrary () {
    $openLibraryCreate()
}
// 合集列表
const collection = ref([])
// 主题列表
const themes = ref([])
async function getCollectionData () {
    collection.value = await getCollection()    
}
async function getThemeListData() {
    themes.value  = await getThemeList()
}
nextTick(() => {
    getThemeListData()
    getCollectionData()
})
</script>
