<template>
  <div :class="containerClass">
    <!-- 操作按钮 -->
    <button 
      class="action-btn" 
      @click.stop="handleView" 
      :title="t('View')"
      :disabled="!canRead"
      :class="{ disabled: !canRead }"
    >
      <i class="fa fa-eye"></i>
    </button>
    <button 
      class="action-btn" 
      @click.stop="handleEdit" 
      :title="t('Edit')"
      :disabled="!canWrite"
      :class="{ disabled: !canWrite }"
    >
      <i class="fa fa-edit"></i>
    </button>
    <button 
      class="action-btn delete-btn" 
      @click.stop="handleDelete" 
      :title="t('Delete')"
      :disabled="!canDelete"
      :class="{ disabled: !canDelete }"
    >
      <i class="fa fa-trash"></i>
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { t } from '@/shared/i18n'

interface Props {
  row: any
  entity: string
  viewMode?: 'card' | 'list'
}

interface Emits {
  (e: 'view', row: any): void
  (e: 'edit', row: any): void
  (e: 'delete', row: any): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 权限检查
const canRead = computed(() => props.row._can_read === 1 || props.row._can_read === undefined)
const canWrite = computed(() => props.row._can_write === 1 || props.row._can_write === undefined)
const canDelete = computed(() => props.row._can_delete === 1 || props.row._can_delete === undefined)

// 根据视图模式决定容器类名，组件自包含所有样式
const containerClass = computed(() => {
  return props.viewMode === 'card' ? 'actions-container card-actions' : 'actions-container col-actions'
})

function handleView() {
  emit('view', props.row)
}

function handleEdit() {
  emit('edit', props.row)
}

function handleDelete() {
  emit('delete', props.row)
}
</script>

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

/* 卡片视图样式：包含 footer 外观（padding, border-top, background） */
.card-actions {
  padding: 8px 16px;
  border-top: 1px solid #f3f4f6;
  background: #fafbfc;
  margin-top: auto;
}

/* 列表视图样式：只提供按钮排列，无背景（通过 actions-container 基础样式实现） */

/* 操作按钮通用样式 - 统一使用节点列表页的大小 */
.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 { 
  background: #3b82f6; 
  color: white; 
}

.action-btn.delete-btn:hover {
  background: #ef4444;
  color: white;
}

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