<template>
  <div class="thinking-block" :class="{ 'is-streaming': isStreaming }">
    <div class="thinking-block__header" @click="collapsed = !collapsed">
      <el-icon :class="{ 'is-rotating': isStreaming }">
        <Loading v-if="isStreaming" />
        <InfoFilled v-else />
      </el-icon>
      <span class="thinking-block__title">思考过程</span>
      <el-icon class="thinking-block__toggle">
        <ArrowUp v-if="!collapsed" />
        <ArrowDown v-else />
      </el-icon>
    </div>

    <el-collapse-transition>
      <div v-if="!collapsed" class="thinking-block__content" ref="contentRef">
        <div class="thinking-block__text">{{ content }}</div>
        <span v-if="isStreaming" class="thinking-block__cursor" />
      </div>
    </el-collapse-transition>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue';
import { Loading, InfoFilled, ArrowUp, ArrowDown } from '@element-plus/icons-vue';

const props = defineProps<{
  content: string;
  isStreaming: boolean;
}>();

const collapsed = ref(false);
const contentRef = ref<HTMLElement | null>(null);

// 流式时默认展开
watch(
  () => props.isStreaming,
  (streaming) => {
    if (streaming) {
      collapsed.value = false;
    } else {
      // 思考完成后自动折叠
      setTimeout(() => {
        collapsed.value = true;
      }, 500);
    }
  }
);

// 流式时自动滚动到底部
watch(
  () => props.content,
  async () => {
    if (props.isStreaming && contentRef.value) {
      await nextTick();
      contentRef.value.scrollTop = contentRef.value.scrollHeight;
    }
  }
);
</script>

<style lang="scss" scoped>
.thinking-block {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px dashed var(--el-border-color);
  background: var(--el-fill-color-lighter);
  font-size: 12px;
  line-height: 1.6;
  color: var(--el-text-color-secondary);
  transition: all 0.3s ease;
}

.thinking-block.is-streaming {
  animation: thinking-pulse 1.5s ease-in-out infinite;
}

@keyframes thinking-pulse {
  0%,
  100% {
    border-color: var(--el-border-color);
  }
  50% {
    border-color: var(--el-color-primary-light-3);
  }
}

.thinking-block__header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: var(--el-text-color-regular);
}

.thinking-block__title {
  flex: 1;
  font-weight: 500;
}

.thinking-block__toggle {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.is-rotating {
  animation: rotating 1.5s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.thinking-block__content {
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.thinking-block__text {
  display: inline;
}

.thinking-block__cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--el-color-primary);
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
</style>
