<template>
  <a-dropdown :trigger="['click']" placement="bottomLeft">
    <div class="column-header-menu" @click.stop>
      <span class="column-header-menu__title">{{ field.name }}</span>
      <DownOutlined class="column-header-menu__arrow" />
    </div>
    <template #overlay>
      <a-menu @click="handleMenuClick">
        <a-menu-item key="edit">
          <EditOutlined /> 编辑字段
        </a-menu-item>
        <a-menu-item key="hide">
          <EyeInvisibleOutlined /> 隐藏字段
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="delete" danger>
          <DeleteOutlined /> 删除字段
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import {
  DownOutlined,
  EditOutlined,
  EyeInvisibleOutlined,
  DeleteOutlined,
} from '@ant-design/icons-vue'
import type { IBitableField } from '@/api/bitable'

const props = defineProps<{
  field: IBitableField
}>()

const emit = defineEmits<{
  (e: 'edit', field: IBitableField): void
  (e: 'hide', fieldId: string): void
  (e: 'delete', field: IBitableField): void
}>()

function handleMenuClick({ key }: { key: string }): void {
  switch (key) {
    case 'edit':
      emit('edit', props.field)
      break
    case 'hide':
      emit('hide', props.field.id)
      break
    case 'delete':
      emit('delete', props.field)
      break
  }
}
</script>

<style scoped>
.column-header-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  width: 100%;
  height: 100%;
  user-select: none;
}

.column-header-menu__title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
}

.column-header-menu__arrow {
  font-size: 10px;
  color: var(--text-secondary, #8c8c8c);
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.column-header-menu:hover .column-header-menu__arrow {
  opacity: 1;
}
</style>
