<template>
  <el-popover
    ref="operationPopoverRef"
    placement="bottom"
    trigger="click"
    popper-class="editable-table-operation-popover"
  >
    <div
      slot="reference"
      class="editable-table-operation-popover__operation-reference btn-pointer"
    >
      <el-button class="editable-table-operation-popover__operation-btn">
        操作
      </el-button>
    </div>
    <div class="editable-table-operation-popover__operation">
      <div
        v-if="defaultOperations.includes('delete')"
        class="editable-table-operation-popover__operation-item btn-pointer"
        @click="() => emit('delete')"
      >
        删除
      </div>
      <div
        v-if="defaultOperations.includes('edit')"
        class="editable-table-operation-popover__operation-item btn-pointer"
        @click="() => emit('edit')"
      >
        编辑
      </div>
      <div
        v-if="defaultOperations.includes('top')"
        class="editable-table-operation-popover__operation-item btn-pointer"
        @click="() => emit('rowPinToTop')"
      >
        置顶
      </div>
      <slot />
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { IDefaultOperationType } from '../types';

defineProps<{
  defaultOperations: IDefaultOperationType[]
  // hoveringCellInfo: {
  //   rowIndex: number
  //   columnProperty: string
  // }
  scope: any
}>()

const emit = defineEmits<{
  (e: 'edit'): void
  (e: 'delete'): void
  (e: 'rowPinToTop'): void
}>()

const operationPopoverRef = ref(null as any)

defineExpose({
  doClose: () => operationPopoverRef.value?.doClose?.()
})
</script>