<template>
    <div class="w-full items-center flex flex-col">
        <ILibraryHeader show-tabs :tab="tab" @change-tab="handleChangeTab" @search="handleSearch" @clear="getThreadData" />
        <div class="container max-w-screen-lg 2xl:max-w-screen-xl flex flex-col p-6 pt-0 lg:pt-6">
            <div class="flex gap-10" v-show="ready">
                <div class="flex flex-col flex-grow" v-show="tab === 0 || tab === -1">
                    <div v-auto-animate class="flex flex-col gap-4">
                        <ILibraryThread
                            v-for="item in threads"
                            :item="item"
                            :key="item.c_id"
                            @delete="handleDeletedThread"
                        />
                        <IEmpty v-if="!threads.length" />
                    </div>
                </div>
                <div class="flex flex-col flex-shrink-0 w-full lg:w-56" v-show="tab === 1 || tab === -1">
                    <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 v-auto-animate class="flex flex-col gap-4 mt-4">
                        <ILibraryCollect
                            v-for="item in $collection"
                            :item="item"
                            :key="item.id"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {LG} from '~/composables/useMQ.js';

const { $collection } = storeToRefs(useLibraryStore())
const { $openLibraryCreate, $getCollection } = useLibraryStore()
const { getThreadsList } = useLibraryRequest()

function handleOpenCreateLibrary () {
    $openLibraryCreate()
}
// 主题列表
const threads = ref([])
async function getThreadData() {
    threads.value  = await getThreadsList()
}
await getThreadData()
await $getCollection()

function handleDeletedThread (c_id) {
    const findIndex = threads.value.findIndex(i => i.c_id === c_id)
    if (findIndex >= 0) threads.value.splice(findIndex, 1)
}
function handleSearch (data) {
    threads.value = data
}

const tab = ref(-1)
watch(()=> LG.value, (value) => {
    if (value) tab.value = 0
    else tab.value = -1
})
const ready = ref(false)
onMounted(() => {
    if (LG.value) tab.value = 0
    ready.value = true
})
function handleChangeTab (index) {
    tab.value = index
}

useHead({
    title: '全部主题 - GitBot'
})
</script>
