<template>
    <transition
        :name="transitionName"
        v-if="shouldRender"
        @after-enter="popupOpen"
        @after-leave="popupLeave"
    >
        <div
            v-show="value"
            :style="style"
            :class="classes({ [position]: position })"
            @click="popupClick"
        >
            <slot></slot>
        </div>
    </transition>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
import { PopupMixin } from '../../common/mixins/popup';
import { isDef } from '../../common/utils/index';
let classMixin = classesMixin('popup');
export default {
    name: 'h-popup',
    mixins: [classMixin, PopupMixin],
    props: {
        transition: String,
        duration: {
            type: Number,
            default: null
        },
        position: {
            type: String,
            default: 'center'
        },
        overlay: {
            type: Boolean,
            default: true
        },
        closeOnClickOverlay: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        transitionName() {
            return this.transition || ( this.position === 'center' ? 'hanzo-fade' : `hanzo-popup-slide-${this.position}`);
        },
        style() {
            return isDef(this.duration) ? { transitionDuration: `${ this.duration }s` } : {}
        }
    },
    methods: {
        popupOpen( event ) {
            this.$emit( 'opened', event );
        },
        popupLeave( event ) {
            this.$emit( 'closed', event );
        },
        popupClick( event ) {
            this.$emit( 'click', event );
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>