<template>
  <q-card class="q-mt-md shadow-2">
    <q-card-section class="bg-blue-grey-1">
      <div class="text-h6 text-blue-grey-9 flex items-center gap-2">
        <q-icon name="terminal" />
        运行日志
        <q-space />
        <q-btn flat dense round icon="delete" @click="clearLog" size="sm" />
      </div>
    </q-card-section>
    <q-card-section class="q-pa-none">
      <div ref="logContainer" class="log-container">
        <div
          v-for="(log, index) in logs"
          :key="index"
          :class="['log-line', `log-${log.level}`]"
        >
          <span class="log-time">{{ log.time }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'

defineOptions({
  name: 'LogComponent'
})

interface LogEntry {
  level: 'info' | 'warning' | 'error' | 'debug'
  time: string
  message: string
}

const logs = ref<LogEntry[]>([])
const logContainer = ref<HTMLElement | null>(null)

const addLog = (level: LogEntry['level'], message: string) => {
  const now = new Date()
  const time = now.toLocaleTimeString('zh-CN', { hour12: false })

  logs.value.push({ level, time, message })

  // 自动滚动到底部
  nextTick(() => {
    if (logContainer.value) {
      logContainer.value.scrollTop = logContainer.value.scrollHeight
    }
  })
}

const clearLog = () => {
  logs.value = []
}

// 暴露方法给父组件
defineExpose({
  addLog,
  clearLog
})
</script>

<style scoped>
.log-container {
  max-height: 300px;
  overflow-y: auto;
  background-color: #1e1e1e;
  color: #d4d4d4;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
  padding: 8px;
  user-select: text;
  cursor: text;
}

.log-line {
  padding: 2px 0;
  display: flex;
  gap: 8px;
}

.log-time {
  color: #6a9955;
  flex-shrink: 0;
}

.log-info .log-message {
  color: #d4d4d4;
}

.log-warning .log-message {
  color: #dcdcaa;
}

.log-error .log-message {
  color: #f48771;
}

.log-debug .log-message {
  color: #9cdcfe;
}
</style>
