<template>
    <div class="flex justify-between">
        <UButton
            class="flex-grow"
            leading-icon="i-heroicons-magnifying-glass"
            color="gray"
            variant="ghost"
            size="md"
            label="搜索记录"
            @click="handleOpen"
        />
        <UButton
            v-if="$isSignIn"
            label="清空"
            size="md"
            variant="link"
            @click="handleClear"
        />
    </div>
    <div v-if="$isSignIn" class="flex flex-col gap-2 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
        <template v-for="(item, index) in searchHistory" :key="index">
            <UButton
                color="gray"
                variant="ghost"
                size="xs"
                :to="'/search/' + item.url"
            >
                <div class="truncate">{{ item.title }}</div>
            </UButton>
        </template>
    </div>
    <UModal v-model="isOpenHistory" :ui="{ width: 'w-full sm:max-w-screen-md' }">
        <div class="flex items-center p-2">
            <UInput
                class="w-full"
                v-model="query"
                :padded="false"
                variant="none"
                leading-icon="i-heroicons-magnifying-glass-20-solid"
                placeholder="输入关键字搜索..."
            />
            <UButton
                leading-icon="i-heroicons-x-mark-20-solid"
                color="gray"
                variant="ghost"
                @click="handleClose"
            />
        </div>
        <UDivider />
        <div class="flex flex-col p-2">
            <template v-for="(item, index) in searchHistory" :key="index">
                <UButton
                    color="gray"
                    variant="ghost"
                    long
                    leading-icon="i-heroicons-document-text"
                    :to="'/search/' + item.url"
                    @click="handleClose"
                >
                    <div class="truncate font-light">{{ item.title }}</div>
                </UButton>
            </template>
        </div>
    </UModal>
</template>
<script setup>
const emits = defineEmits(['sign', 'clear'])
const { $isSignIn } = useUserStore()
const searchHistory = ref([
    {
        title: 'Vue 的 v-model 怎么用',
        url: 'c_20240521161631_C8miVoieSKGfgNGP?query=Vue%20的%20v-model%20怎么用&repo=keycloak'
    },
    {
        title: '帮我写一个爬虫，爬取豆瓣热门电影top250',
        url: 'c_20240521161649_0LbyaJFKX6fyJYyA?query=帮我写一个爬虫，爬取豆瓣热门电影top250&repo=keycloak'
    },
    {
        title: 'grid 的 grid-template-columns 除了 minmax 和 repeat，还有哪些值',
        url: 'c_20240521161709_LtiJL8thi5XuYLd6?query=grid%20的%20grid-template-columns%20除了%20minmax%20和%20repeat，还有哪些值&repo=keycloak'
    },
    {
        title: 'flex 各种布局的区别',
        url: 'c_20240521161933_wxgXGKYhmfJe6QE0?query=flex%20各种布局的区别&repo=keycloak'
    }
])
function handleClear () {
    emits('clear')
}
const isOpenHistory = ref(false)
const query = ref('')
function handleOpen () {
    if (!$isSignIn) emits('sign')
    else {
        isOpenHistory.value = true
    }
}
function handleClose () {
    isOpenHistory.value = false
}
</script>
