<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
                class="flex group"
                color="gray"
                variant="ghost"
                size="xs"
                long
                :to="`/search/${item.c_id}`"
                @click="handleClickItem"
            >
                <div class="flex-grow truncate">{{ item.title }}</div>
                <UButton
                    class="hidden group-hover:flex"
                    color="red"
                    variant="ghost"
                    size="xs"
                    :padded="false"
                    leading-icon="i-heroicons-x-mark-20-solid"
                    @click.stop.prevent="handleRemoveRecordItem(item.c_id)"
                />
            </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
                    class="flex group"
                    color="gray"
                    variant="ghost"
                    long
                    leading-icon="i-heroicons-document-text"
                    :to="`/search/${item.c_id}`"
                    @click="handleClose"
                >
                    <div class="flex-grow truncate font-light">{{ item.title }}</div>
                    <UButton
                        class="hidden group-hover:flex"
                        color="red"
                        variant="ghost"
                        :padded="false"
                        leading-icon="i-heroicons-x-mark-20-solid"
                        @click.stop.prevent="handleRemoveRecordItem(item.c_id)"
                    />
                </UButton>
            </template>
        </div>
    </UModal>
</template>
<script setup>
const emits = defineEmits(['sign', 'clear'])
const Layout = inject('Layout')
const { $isSignIn } = useUserStore()
const searchHistory = ref([])
const isOpenHistory = ref(false)
const query = ref('')
function handleClear () {
    emits('clear')
    handleRemoveRecords()
}
function handleRemoveRecordItem (id) {
    searchHistory.value = searchHistory.value.filter(item => item.c_id !== id)
    handleRemoveRecords([id])
}
async function handleRemoveRecords (ids) {
    if (!ids) {
        ids = searchHistory.value.map(item => item.c_id)
    }
    const { data} = await useRequest('/v1/chat/completion/remove', {
        method: 'post',
        body: ids
    })
    if (data.value) navigateTo('/')
}
function handleOpen () {
    if (!$isSignIn) emits('sign')
    else {
        isOpenHistory.value = true
    }
}
function handleClose () {
    isOpenHistory.value = false
}
function handleClickItem () {
    Layout.handleCloseAside()
}
async function getUserHistory () {
    const { data } = await useRequest('/v1/chat/completion/list')
    searchHistory.value = data.value.data
}
nextTick(() => {
    $isSignIn && getUserHistory()
})
</script>
