<template>
    <UModal v-model="isOpenSelect" :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"
                />
                <div class="flex flex-col gap-2">
                    <UButton color="white" size="md" class="flex">
                        <div class="flex flex-grow justify-between items-center">
                            <div>前端开发</div>
                            <UIcon name="i-heroicons-check-circle-20-solid" class="text-primary text-lg" />
                        </div>
                    </UButton>
                    <UButton color="white" size="md" class="flex">
                        <div class="flex flex-grow justify-between items-center">
                            <div>后端开发</div>
                        </div>
                    </UButton>
                </div>
            </div>
        </UCard>
    </UModal>
</template>
<script setup>
const isOpenSelect = ref(false)
function handleClose () {
    isOpenSelect.value = false
}
function handleOpen () {
    isOpenSelect.value = true
}
</script>
