<template>
  <div class="execution-history">
    <div
      v-if="history.length === 0"
      class="empty-state"
    >
      <n-empty description="暂无执行历史" />
    </div>

    <n-list
      v-else
      bordered
    >
      <n-list-item
        v-for="item in history"
        :key="item.id"
      >
        <div class="history-item">
          <div class="history-header">
            <div class="title">
              <n-tag
                type="info"
                size="small"
              >
                {{ item.template }}
              </n-tag>
            </div>
            <div class="duration">
              耗时: {{ formatDuration(item.duration) }}
            </div>
          </div>
          
          <!-- 🆕 开始时间和结束时间 -->
          <div class="history-time-range">
            <span class="time-label">开始:</span>
            <span class="time-value">{{ formatTime(item.startTime) }}</span>
            <span class="time-separator">→</span>
            <span class="time-label">结束:</span>
            <span class="time-value">{{ formatTime(item.endTime) }}</span>
          </div>

          <div class="history-stats">
            <n-space>
              <n-tag
                :bordered="false"
                size="small"
              >
                总计: {{ item.stats.total }}
              </n-tag>
              <n-tag
                type="success"
                :bordered="false"
                size="small"
              >
                成功: {{ item.stats.success }}
              </n-tag>
              <n-tag
                v-if="item.stats.failed > 0"
                type="error"
                :bordered="false"
                size="small"
              >
                失败: {{ item.stats.failed }}
              </n-tag>
              <n-tag
                v-if="item.stats.skipped > 0"
                type="warning"
                :bordered="false"
                size="small"
              >
                跳过: {{ item.stats.skipped }}
              </n-tag>
            </n-space>
          </div>
        </div>
      </n-list-item>
    </n-list>

    <div
      v-if="history.length > 0"
      class="actions"
    >
      <n-button
        type="error"
        @click="handleClear"
      >
        清空历史
      </n-button>
    </div>
  </div>
</template>

<script setup>
import { useDialog } from 'naive-ui'

const props = defineProps({
  history: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['clear', 'close'])

const dialog = useDialog()

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

// 格式化耗时
const formatDuration = (ms) => {
  const seconds = Math.floor(ms / 1000)
  if (seconds < 60) return `${seconds}秒`
  
  const minutes = Math.floor(seconds / 60)
  const remainSeconds = seconds % 60
  return `${minutes}分${remainSeconds}秒`
}

// 清空历史
const handleClear = () => {
  dialog.warning({
    title: '确认清空',
    content: '是否清空所有执行历史记录？',
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      emit('clear')
    }
  })
}
</script>

<style scoped lang="scss">
.execution-history {
  .empty-state {
    padding: 40px 0;
  }

  .history-item {
    width: 100%;

    .history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .title {
        display: flex;
        align-items: center;
        gap: 12px;

        .time {
          font-size: 14px;
          color: #666;
        }
      }

      .duration {
        font-size: 14px;
        color: #999;
      }
    }

    .history-time-range {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 13px;
      color: #666;
      
      .time-label {
        font-weight: 500;
      }
      
      .time-value {
        color: #333;
      }
      
      .time-separator {
        margin: 0 4px;
        color: #999;
      }
    }

    .history-stats {
      margin-top: 8px;
    }
  }

  .actions {
    margin-top: 16px;
    text-align: right;
  }
}

/* 深色主题 */
html.dark .execution-history,
html[data-theme="dark"] .execution-history {
  .history-item {
    .history-header {
      .title .time {
        color: #aaaaaa;
      }

      .duration {
        color: #888888;
      }
    }
    
    .history-time-range {
      color: #aaaaaa;
      
      .time-value {
        color: #cccccc;
      }
      
      .time-separator {
        color: #777777;
      }
    }
  }
}
</style>

