<script setup lang="ts">
import type { Row } from '@tanstack/vue-table'

import { Ellipsis, Pencil, Trash2 } from 'lucide-vue-next'

import type { CloudConstant } from '../data/schema'

interface DataTableRowActionsProps {
  row: Row<CloudConstant>
}

const props = defineProps<DataTableRowActionsProps>()
const emit = defineEmits<{
  edit: [constant: CloudConstant]
  delete: [constant: CloudConstant]
}>()

const constant = props.row.original
</script>

<template>
  <UiDropdownMenu>
    <UiDropdownMenuTrigger as-child>
      <UiButton
        variant="ghost"
        class="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
      >
        <Ellipsis class="size-4" />
        <span class="sr-only">打开菜单</span>
      </UiButton>
    </UiDropdownMenuTrigger>
    <UiDropdownMenuContent align="end" class="w-[160px]">
      <UiDropdownMenuItem @click="emit('edit', constant)">
        <Pencil class="mr-2 h-4 w-4" />
        编辑
      </UiDropdownMenuItem>
      <UiDropdownMenuSeparator />
      <UiDropdownMenuItem class="text-destructive" @click="emit('delete', constant)">
        <Trash2 class="mr-2 h-4 w-4" />
        删除
      </UiDropdownMenuItem>
    </UiDropdownMenuContent>
  </UiDropdownMenu>
</template>
