<template>
  <el-dropdown 
    v-if="hasVisibleItems"
    trigger="click"
    @command="handleCommand"
    :style="dropdownStyle"
  >
    <el-button 
      :type="buttonType" 
      link 
      :style="buttonStyle"
    >
      <slot name="button">
        {{ buttonText }}
        <el-icon v-if="buttonIcon" class="el-icon--right" :style="iconStyle">
          <component :is="buttonIcon" v-if="buttonIcon" />
        </el-icon>
      </slot>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item 
          v-for="item in visibleItems"
          :key="item.command"
          :command="item.command"
        >
          <el-icon v-if="item.icon">
            <component :is="item.icon" />
          </el-icon>
          <span :style="item.icon ? { marginLeft: '8px' } : {}">{{ item.label }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Operation } from '@element-plus/icons-vue'

interface MenuItem {
  command: string
  label: string
  icon?: any
  visible?: boolean | (() => boolean)
}

interface Props {
  items: MenuItem[]
  buttonText?: string
  buttonIcon?: any
  buttonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
  buttonStyle?: string | Record<string, any>
  dropdownStyle?: string | Record<string, any>
  iconStyle?: string | Record<string, any>
}

const props = withDefaults(defineProps<Props>(), {
  buttonText: '更多',
  buttonIcon: Operation,
  buttonType: 'primary',
  buttonStyle: () => ({ whiteSpace: 'nowrap' }),
  dropdownStyle: () => ({ marginLeft: '12px' }),
  iconStyle: () => ({ marginLeft: '4px' })
})

const emit = defineEmits<{
  command: [command: string]
}>()

// 计算可见的菜单项
const visibleItems = computed(() => {
  return props.items.filter(item => {
    if (item.visible === undefined) return true
    if (typeof item.visible === 'boolean') return item.visible
    if (typeof item.visible === 'function') return item.visible()
    return false
  })
})

// 是否有可见的菜单项
const hasVisibleItems = computed(() => {
  return visibleItems.value.length > 0
})

// 处理命令
const handleCommand = (command: string) => {
  emit('command', command)
}
</script>


