<template>
    <div class="max-w-screen-sm w-full flex flex-col space-y-4 p-6">
        <UTextarea
            v-model="query"
            autoresize
            placeholder="输入搜索内容..."
            :rows="5"
        />
        <div class="flex justify-between">
            <USelectMenu
                class="min-w-40"
                v-model="selectedRepo"
                :options="repos"
                placeholder="选择 GitHub 项目"
                searchable
            />
            <UButton
                trailing-icon="i-heroicons-chevron-right-20-solid"
                @click="handleSearch"
            >搜索</UButton>
        </div>
    </div>
</template>
<script setup>
const emits = defineEmits([ 'search' ])
const query = ref('')
const selectedRepo = ref('https://github.com/keycloak/keycloak.git')
const repos = ['keycloak', 'ViewUIPlus']
const handleSearch = () => {
    navigateTo(`/search/1?query=${query.value}&repo=${selectedRepo.value}`)
    emits('search')
}
</script>
