<template>
    <div :class="dropButtonClass">
        <p ref="refernce"
           @mouseenter="hoverHandle"
           @mouseleave="blurHandle">
            <span>{{title}}</span>
            <i :class="arrowClass"></i>
        </p>
        <transition name="ani-slide"
                    @after-leave="doDestroy">
            <ul ref="popper"
                :class="popButtonClass"
                @mouseenter="hover"
                v-show="show"
                @mouseleave="blur">
                <li :class="`${prefix}-drop-button-command-item`"
                    v-for="(item) in commands"
                    :key="item.text"
                    @click="clickHandle(item)">{{item.text}}</li>
            </ul>
        </transition>
    </div>
</template>

<script>
import poperMixins from 'jdd-design/utils/mixins/popper';
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-drop-button`,
    mixins: [prefixMixins, poperMixins],
    props: {
        size: String,
        title: String,
        commands: Array,
        appendToBody: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: 'major'
        }
    },
    data() {
        return {
            show: false,
            timeId: null
        };
    },
    watch: {
        show(val) {
            if (val) {
                this.$nextTick(() => {
                    this.$refs.popper.style.width = `${this.$el.offsetWidth}px`;
                    this.updatePopper();
                });
            }
        }
    },
    computed: {
        dropButtonClass() {
            let clsNames = [`${prefix}-drop-button`];
            clsNames.push(`${prefix}-drop-button--${this.type}`);
            this.size && clsNames.push(`${prefix}-drop-button--${this.size}`);
            return clsNames;
        },
        popButtonClass() {
            let clsNames = [`${prefix}-drop-button-command`];
            this.size &&
                clsNames.push(`${prefix}-drop-button-command--${this.size}`);
            return clsNames;
        },
        arrowClass() {
            let clsNames = [`${prefix}-icon-arrow-left`];
            this.show && clsNames.push('opened');
            return clsNames;
        }
    },
    methods: {
        clickHandle(item) {
            if (typeof item.cmd === 'function') {
                item.cmd();
            } else {
                this.$emit('command', item.cmd);
            }
            this.show = false;
        },
        hoverHandle() {
            this.show = true;
        },
        blurHandle() {
            this.timeId = setTimeout(() => {
                this.show = false;
            }, 300);
        },
        hover() {
            this.timeId && clearTimeout(this.timeId);
            this.timeId = null;
        },
        blur() {
            this.blurHandle();
        },
        initPopper() {
            this.referenceElm = this.$refs.refernce;
            this.popperElm = this.$refs.popper;
            this.currentPlacement = 'bottom-start';
        }
    },
    mounted() {
        this.initPopper();
    }
};
</script>

<style>
</style>
