<template>
  <div class="log-section">
    <div class="log-header">流程日志</div>
    <div class="log-body" ref="logBodyRef">
      <div 
        v-for="(log, index) in logs" 
        :key="index" 
        class="log-item"
        :class="'log-' + log.type"
      >
        <span class="log-time">{{ log.time }}</span>
        <div class="log-msg">{{ log.message }}</div>
      </div>
      <div v-if="logs.length === 0" class="log-empty">暂无日志</div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'

const props = defineProps({
  logs: { type: Array, default: () => [] }
})

const logBodyRef = ref(null)

watch(() => props.logs.length, () => {
  nextTick(() => {
    if (logBodyRef.value) {
      logBodyRef.value.scrollTop = logBodyRef.value.scrollHeight
    }
  })
})
</script>

<style lang="scss" scoped>
.log-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fffacd;
  border-radius: $radius-md;
  overflow: hidden;
  box-shadow: $shadow-sm;
  min-height: 0;

  .log-header {
    padding: 10px 16px;
    background: #fff176;
    font-size: 14px;
    font-weight: 600;
    color: $text-primary;
  }

  .log-body {
    flex: 1;
    padding: 10px 16px;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    line-height: 1.6;

    .log-item {
      width: 200%;
      padding: 4px 0;
      border-bottom: 1px dashed rgba(0, 0, 0, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .log-time {
        color: #666;
        margin-right: 8px;
      }

      .log-msg {
        color: $text-primary;
        white-space: pre-wrap;
      }

      &.log-success .log-msg {
        color: $success-color;
      }

      &.log-error .log-msg {
        color: $danger-color;
      }

      &.log-warning .log-msg {
        color: $warning-color;
      }
    }

    .log-empty {
      text-align: center;
      color: #999;
      padding: 20px 0;
    }
  }
}
</style>
