<template>
    <div class="flex flex-col overflow-hidden group">
        <div class="flex justify-between">
            <UButton
                class="flex-grow cursor-default hover:bg-transparent dark:hover:bg-transparent"
                leading-icon="i-heroicons-queue-list"
                color="gray"
                variant="ghost"
                size="md"
                label="浏览记录"
            />
            <UButton
                class="hidden group-hover:flex"
                label="清空"
                size="md"
                variant="link"
                @click="handleClear"
            />
        </div>
        <ClientOnly>
            <div v-auto-animate class="flex overflow-y-auto flex-col gap-1 border-l border-gray-200 dark:border-gray-800 pl-2 ml-5">
                <template v-for="item in $searchHistory.reverse()" :key="item.c_id">
                    <UButton
                        class="flex text-gray-400"
                        color="gray"
                        variant="ghost"
                        size="xs"
                        long
                        :to="`/search/${item.c_id}`"
                        @click="handleClickItem"
                    >
                        <div class="flex-grow truncate" :title="item.title">{{ item.title }}</div>
                    </UButton>
                </template>
            </div>
        </ClientOnly>
    </div>
</template>
<script setup>
import { vAutoAnimate } from '@formkit/auto-animate'
const emits = defineEmits(['sign', 'clear'])
const Layout = inject('Layout')
const modal = useModal()
const { $searchHistory } = storeToRefs(useSearchStore())
const { $clearSearchHistory } = useSearchStore()
const query = ref('')
function handleClear () {
    $clearSearchHistory()
}
function handleClickItem () {
    Layout.handleCloseAside()
}
</script>
