<template>
    <component :is="render" />
</template>
<script setup lang="jsx">
    import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus/es/components/dropdown/index';
    import 'element-plus/es/components/dropdown/style/css';
    const props = defineProps({
        type: {
            type: String,
            default: 'text',
        },
        icon: {
            type: String,
            default: 'ArrowDown',
        },
        splitButton: {
            type: Boolean,
            default: false,
        },
        opts: {
            type: Array,
            required: true,
        },
    });
    const attrs = useAttrs();
    const slots = useSlots();
    const handleCommand = (index) => {
        props.opts[index].onClick?.();
    };
    const dropdownSlots = {
        dropdown: () => (
            <ElDropdownMenu>
                {(props.opts || []).map((item, index) => (
                    <ElDropdownItem command={index} disabled={item.disabled} divided={item.divided}>
                        {item.label}
                    </ElDropdownItem>
                ))}
            </ElDropdownMenu>
        ),
        default: () => (
            <ElButton type="text">
                {slots.default?.() || '更多'}
                <ElIcon name={props.icon} size="16" />
            </ElButton>
        ),
    };
    const render = () => (
        <ElDropdown {...props} {...attrs} onCommand={(command) => handleCommand(command)} v-slots={dropdownSlots} />
    );
</script>

<style lang="less" scoped>
    .el-dropdown {
        :deep(.x-icon) {
            top: 0;
            margin-left: @layout-space-small;
        }
    }
    .el-button + .el-dropdown {
        margin-left: 10px;
    }
</style>
