<template>
    <transition :name="animate">
        <div v-show="opened"
             :class="[`${prefix}-menu`, `${prefix}-menu--${jddMenu.theme}`, popperClass]"
             style="margin: 0 2px"
             @mouseenter.stop="handleMouseEnter"
             @mouseleave.stop="handleMouseLeave"
             @focus.stop="handleMouseEnter">
            <ul role="menu"
                :class="popperMenuClass"
                :style="{ backgroundColor: jddMenu.backgroundColor || '' }">
                <slot></slot>
            </ul>
        </div>
    </transition>
</template>

<script>
import menuMixin from './mixins';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-pop-menu`,
    mixins: [prefixMixins, menuMixin],
    props: {
        opened: Boolean,
        popperClass: String,
        animate: String,
        placement: String
    },
    computed: {
        popperMenuClass() {
            let clsNames = [`${prefix}-menu ${prefix}-menu--popup`];
            clsNames.push(`${prefix}-menu--popup-${this.placement}`);
            return clsNames;
        }
    },
    methods: {
        handleMouseEnter(evt) {
            this.$emit('mouseenter', evt, 300);
        },
        handleMouseLeave(evt) {
            this.$emit('mouseleave', evt, 300);
        }
    }
};
</script>
