<template>
    <UModal v-model="$isLibrarySelectOpen" :ui="{ width: 'w-96 sm:max-w-screen-md' }">
        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
            <template #header>
                <div class="flex items-center justify-between">
                    <div class="text-xl">选择集合</div>
                    <UButton
                        leading-icon="i-heroicons-x-mark-20-solid"
                        color="gray"
                        variant="ghost"
                        @click="handleClose"
                    />
                </div>
            </template>
            <div class="flex flex-col gap-4">
                <UButton
                    leading-icon="i-heroicons-plus-20-solid"
                    label="创建新集合"
                    color="gray"
                    @click="handleOpenCreate"
                />
                <div class="flex flex-col gap-2">
                    <UButton 
                        v-for="item in collection"
                        color="white" 
                        size="md" 
                        class="flex" 
                        :key="item.id"
                        @click="handleSelected(item.id)"
                    >
                        <div class="flex flex-grow justify-between items-center">
                            <div>{{item.name}}</div>
                            <UIcon v-if="selectedCollection.includes(item.id)" name="i-heroicons-check-circle-20-solid" class="text-primary text-lg" />
                        </div>
                    </UButton>
                </div>
            </div>
            <!-- <template #footer>
                <div class="flex justify-end">
                    <UButton
                        size="md"
                        label="保存"
                    />
                </div>
            </template> -->
        </UCard>
    </UModal>
</template>
<script setup>
const { $isLibrarySelectOpen, $selectCollectionId, $selectThreadId } = storeToRefs(useLibraryStore())
const { $openLibrarySelect, $closeLibrarySelect, $openLibraryCreate, $setSelectCollectionId } = useLibraryStore()
const { getCollection, saveCollection } = useCollectionRequest()
// 合集列表
const collection = ref([])
const selectedCollection = ref([])
function handleClose () {
    $closeLibrarySelect()
}
function handleOpen (id) {
    $openLibrarySelect()
}
function handleOpenCreate () {
    handleClose()
    $openLibraryCreate()
}
async function getCollectionData () {
    collection.value = await getCollection()    
}
async function handleSelected(id) {
    selectedCollection.value = [id]
    $setSelectCollectionId(selectedCollection.value)
    const { error } = await saveCollection({ collection_id: id, c_id: $selectThreadId.value })
    if (error.value) {
        selectedCollection.value = []
        return
    }
    handleClose()
}
watch(() => $isLibrarySelectOpen.value, () => {
    selectedCollection.value = $selectCollectionId.value
    getCollectionData()
})
</script>
