<template>
  <div :class="containerClass">
    <!-- 默认操作按钮 -->
    <button class="action-btn" @click.stop="context.openDetail(context.row.name)" :title="context.t('View')">
      <i class="fa fa-eye"></i>
    </button>
    <button class="action-btn" @click.stop="context.editRecord(context.row)" :title="context.t('Edit')">
      <i class="fa fa-edit"></i>
    </button>
    <!-- 思维导图按钮 - 点击进入思维导图编辑器 -->
    <button
      class="action-btn mindmap-btn"
      @click.stop="handleMindMap"
      :title="context.t('Open Mind Map')"
    >
      <i class="fa fa-share-alt"></i>
    </button>
    <button class="action-btn delete-btn" @click.stop="context.deleteRecord(context.row.name)" :title="context.t('Delete')">
      <i class="fa fa-trash"></i>
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { pageTypeToSlug } from '@/shared/utils/slug'

const props = defineProps<{
  context: {
    row: any
    entity: string
    openDetail: (name: string) => void
    editRecord: (row: any) => void
    deleteRecord: (name: string) => void
    router: any
    t: (key: string) => string
    viewMode?: 'card' | 'list'
  }
}>()

const containerClass = computed(() => {
  const viewMode = props.context.viewMode || 'list'
  return viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
})

function handleMindMap() {
  const name = props.context.row.name
  if (!name) return
  const pagetype = pageTypeToSlug(props.context.entity)
  props.context.router.push({ name: 'MindMapEditor', query: { pagetype, id: name } })
}
</script>

<style scoped>
/* 操作按钮容器基础样式 */
.actions-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* 卡片视图样式 */
.card-actions {
  padding: 8px 16px;
  border-top: 1px solid #f3f4f6;
  background: #fafbfc;
  margin-top: auto;
}

/* 操作按钮通用样式 */
.action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn:hover:not(:disabled) {
  background: #3b82f6;
  color: white;
}

/* 思维导图按钮使用紫色，契合思维导图主题色 */
.mindmap-btn:hover:not(:disabled) {
  background: #8b5cf6;
  color: white;
}

/* 删除按钮使用红色 */
.delete-btn:hover:not(:disabled) {
  background: #ef4444;
  color: white;
}

/* 禁用状态 */
.action-btn:disabled,
.action-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
</style>
