<template>
    <UCard :ui="{ body: { padding: 'p-4 sm:p-4' } }">
        <div class="flex justify-between items-center">
            <div class="flex items-center gap-2 text-lg">
                <UIcon name="i-heroicons-sparkles-20-solid" />
                搜索过程
            </div>
            <UButton
                size="md"
                color="gray"
                variant="ghost"
                :icon="openCollapse ? 'i-heroicons-chevron-up-20-solid' : 'i-heroicons-chevron-down-20-solid'"
                :ui="{ rounded: 'rounded-full' }"
                @click="handleToggleCollapse"
            />
        </div>
        <ICollapse :open="openCollapse" class="mt-2">
            <div class="flex flex-col gap-2 w-full text-gray-500 dark:text-gray-400">
                <div class="text-base flex items-center gap-1">
                    <UIcon name="i-heroicons-inbox-arrow-down" />
                    理解问题
                </div>
                <template v-if="item.desLoading">
                    <USkeleton class="h-4" />
                    <USkeleton class="h-4 w-2/3" />
                </template>
                <IMdMdc v-else :content="item.description" />
                <template v-if="item.searchLoading !== undefined">
                    <div class="text-base flex items-center gap-1">
                        <UIcon name="i-heroicons-magnifying-glass" />
                        搜索项目
                    </div>
                    <template v-if="item.searchLoading">
                        <USkeleton class="h-4" />
                        <USkeleton class="h-4 w-2/3" />
                    </template>
                    <div class="text-xs pl-5" v-else>找到 {{ item.source && item.source.length || 0 }} 条来源</div>
                </template>
                <div class="text-base flex items-center gap-1" v-if="item.ansLoading !== undefined">
                    <UIcon name="i-heroicons-pencil-square" />
                    整理答案
                </div>
            </div>
        </ICollapse>
    </UCard>
</template>
<script setup>
const props = defineProps({
    type: {
        type: String,
        default: 'search'
    },
    item: {
        type: Object,
        default: (() => {})
    },
    collapse: {
        type: Boolean,
        default: true
    }
})
const openCollapse = ref(props.collapse)
function handleToggleCollapse () {
    openCollapse.value = !openCollapse.value
}
function handleCollapse (state) {
    openCollapse.value = state
}
watch(() => props.collapse, () => {
    openCollapse.value = props.collapse
})
watch(
    () => props.item.ansLoading,
    (value, oldValue) => {
        if (oldValue === undefined && value) {
            setTimeout(() => {
                handleCollapse(false)
            }, 500)
        }
    },
    { immediate: true }
)
defineExpose({ handleCollapse })
</script>
