<template>
    <!-- 历史记录按钮 -->
    <div  @click="showHistory">
      <el-tooltip effect="dark" content="历史记录" placement="top">
        <el-icon>
          <el-icon-clock></el-icon-clock>
        </el-icon>
      </el-tooltip>
    </div>

    <!-- 历史记录弹窗 -->
    <el-dialog
      v-model="historyDialog.visible"
      title="历史记录"
      width="600px"
      destroy-on-close
    >
      <div class="history-container">
        <div class="history-info">
          <span>当前位置: {{ currentHistoryIndex + 1 }} / {{ historyList.length }}</span>
          <el-button 
            type="primary" 
            @click="handleClearHistory">
            清空历史
          </el-button>
        </div>
        
        <el-scrollbar class="history-list" max-height="400px">
          <div 
            v-for="(item, index) in historyList" 
            :key="index"
            class="history-item"
            :class="{
              'history-item--current': index === currentHistoryIndex,
              'history-item--future': index > currentHistoryIndex
            }"
            @click="handleGoToHistory(index)">
            <div class="history-item__header">
              <span class="history-index">{{ index + 1 }}</span>
              <span class="history-time">{{ formatHistoryTime(item.timestamp) }}</span>
              <span v-if="index === currentHistoryIndex" class="current-flag">当前</span>
            </div>
            <div class="history-item__content">
              <span class="component-count">组件数量: {{ item.nav ? item.nav.length : 0 }}</span>
              <span class="operation-type">{{ getOperationType(item, index) }}</span>
            </div>
          </div>
        </el-scrollbar>
        
        <div class="history-actions">
          <el-button 
            :disabled="!canUndo" 
            @click="handleUndo">
            <el-icon><el-icon-arrow-left></el-icon-arrow-left></el-icon>
            后退
          </el-button>
          <el-button 
            :disabled="!canRedo" 
            @click="handleRedo">
            前进
            <el-icon><el-icon-arrow-right></el-icon-arrow-right></el-icon>
          </el-button>
        </div>
      </div>
    </el-dialog>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

/**
 * 历史记录查看器组件
 * 提供历史记录的显示、跳转、清空等功能
 * @author AvueData Team
 * @version 1.0.0
 */

// 注入依赖
const contain = inject('contain')

// 响应式数据
const historyDialog = ref({
  visible: false
})

// 计算属性
/**
 * 获取历史记录列表
 * @returns {Array} 历史记录数组
 */
const historyList = computed(() => {
  return contain.cacheList.history || []
})

/**
 * 获取当前历史记录索引
 * @returns {Number} 当前索引
 */
const currentHistoryIndex = computed(() => {
  return contain.currentHistoryIndex || 0
})

/**
 * 是否可以撤销
 * @returns {Boolean} 能否撤销
 */
const canUndo = computed(() => {
  return contain.canUndo || false
})

/**
 * 是否可以重做
 * @returns {Boolean} 能否重做
 */
const canRedo = computed(() => {
  return contain.canRedo || false
})

// 方法
/**
 * 显示历史记录弹窗
 */
const showHistory = () => {
  historyDialog.value.visible = true
}

/**
 * 跳转到指定历史记录
 * @param {Number} index - 历史记录索引
 */
const handleGoToHistory = (index) => {
  if (contain.goToHistoryIndex) {
    contain.goToHistoryIndex(index)
  } else {
    ElMessage.warning('历史跳转功能不可用')
  }
}

/**
 * 清空历史记录
 */
const handleClearHistory = () => {
  ElMessageBox.confirm('确定要清空所有历史记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    if (contain.clearHistory) {
      contain.clearHistory()
    } else {
      ElMessage.warning('清空历史功能不可用')
    }
  }).catch(() => {
    // 用户取消操作
  })
}

/**
 * 撤销操作
 */
const handleUndo = () => {
  if (contain.editorUndo) {
    contain.editorUndo()
  }
}

/**
 * 重做操作
 */
const handleRedo = () => {
  if (contain.editorRedo) {
    contain.editorRedo()
  }
}

/**
 * 格式化历史记录时间
 * @param {Number} timestamp - 时间戳
 * @returns {String} 格式化后的时间字符串
 */
const formatHistoryTime = (timestamp) => {
  if (!timestamp) return '未知时间'
  const date = new Date(timestamp)
  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`
}

/**
 * 获取操作类型描述
 * @param {Object} item - 历史记录项
 * @param {Number} index - 当前索引
 * @returns {String} 操作类型描述
 */
const getOperationType = (item, index) => {
  if (index === 0) return '初始状态'
  
  const prevItem = historyList.value[index - 1]
  if (!prevItem || !item.nav || !prevItem.nav) return '未知操作'
  
  const currentCount = item.nav.length
  const prevCount = prevItem.nav.length
  
  if (currentCount > prevCount) {
    return '添加组件'
  } else if (currentCount < prevCount) {
    return '删除组件'
  } else {
    return '修改组件'
  }
}

// 组件名称定义
defineOptions({
  name: 'HistoryViewer'
})
</script>

<style lang="scss" scoped>

/* 历史记录弹窗样式 */
.history-container .history-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-color-mask);
  border-radius: 4px;
}

.history-container .history-info span {
  font-size: 14px;
  color: var(--text-color-primary);
}

.history-container .history-list {
  margin-bottom: 16px;
  border: 1px solid var(--border-color-base);
  border-radius: 4px;
  background: var(--bg-color-primary);
}

.history-item {
  padding: 12px;
  border-bottom: 1px solid var(--border-color-light);
  cursor: pointer;
  transition: all 0.3s;
}

.history-item:last-child {
  border-bottom: none;
}

.history-item:hover {
  background: var(--bg-color-hover);
}

.history-item--current {
  background: var(--primary-light-color);
  border-left: 4px solid var(--primary-color);
}

.history-item--current:hover {
  background: var(--primary-lighter-color);
}

.history-item--future {
  opacity: 0.6;
  background: var(--bg-color-disabled);
}

.history-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-item__header .history-index {
  font-weight: bold;
  color: var(--primary-color);
  min-width: 30px;
}

.history-item__header .history-time {
  font-size: 12px;
  color: var(--text-color-lighter);
  font-family: 'Courier New', monospace;
}

.history-item__header .current-flag {
  background: var(--primary-color);
  color: var(--color-white);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
}

.history-item__content {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.history-item__content .component-count {
  color: var(--text-color-primary);
}

.history-item__content .operation-type {
  color: var(--text-color-lighter);
  font-style: italic;
}

.history-container .history-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color-base);
}
</style> 