<template>
  <a-dropdown placement="bottomRight">
    <more-outlined class="ele-text-secondary" style="font-size: 18px" />
    <template #overlay>
      <a-menu :selectable="false" @click="onClick">
        <a-menu-item key="edit">
          <div class="ele-cell">
            <div class="ele-cell-content">待处理</div>
          </div>
        </a-menu-item>
        <a-menu-item key="remove">
          <div class="ele-cell">
            <div class="ele-cell-content">已完成</div>
          </div>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
  import {
    MoreOutlined,
    EditOutlined,
    DeleteOutlined
  } from '@ant-design/icons-vue';

  const emit = defineEmits<{
    (e: 'edit'): void;
    (e: 'remove'): void;
  }>();

  const onClick = ({ key }) => {
    emit(key);
  };
</script>
