<template>
    <transition :name="animate"
                @after-leave="handleAfterLeave">
        <div v-show="visible"
             :class="alertClass"
             :style="alertStyle"
             role="alert">
            <i :class="iconClass" />
            <div :class="contentClass">
                <p v-if="title || $slots.title"
                   :class="titleClass">
                    <slot name="title">{{title}}</slot>
                </p>
                <p :class="messageClass">
                    <slot>{{message}}</slot>
                    <span v-if="$slots.action"
                          :class="actionClass">
                        <slot name="action" />
                    </span>
                </p>
            </div>
            <i v-if="closable"
               :class="closeClass"
               @click="close" />
        </div>
    </transition>
</template>

<script>
import { prefix, on, off } from 'jdd-design/utils';
export default {
    name: `${prefix}-alert`,
    props: {
        size: {
            type: String,
            default: 'small',
            validator(value) {
                return ['large', 'medium', 'small'].indexOf(value) > -1;
            }
        },
        type: {
            type: String,
            default: null,
            validator(value) {
                return (
                    ['success', 'error', 'info', 'warning'].indexOf(value) > -1
                );
            }
        },
        animate: {
            type: String,
            default: 'ani-fade'
        },
        closable: {
            type: Boolean,
            default: true
        },
        title: {
            type: String
        },
        message: {
            type: String
        },
        autoClose: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            visible: true,
            topOffset: 20,
            duration: 3000,
            popup: false,
            popupType: 'message',
            timer: null,
            onClose: null
        };
    },
    computed: {
        alertClass() {
            let clsNames = [`${prefix}-alert`];
            clsNames.push(`${prefix}-alert--${this.type}`);
            clsNames.push(`${prefix}-alert--${this.size}`);
            this.popup &&
                clsNames.push(
                    ...[
                        `${prefix}-alert__popup`,
                        `${prefix}-alert__popup--${this.popupType}`
                    ]
                );
            return clsNames;
        },
        iconClass() {
            let clsNames = [`${prefix}-alert__icon`];
            let iconClass = `jdd-icon-${this.type}`;
            if (['large', 'medium'].includes(this.size)) {
                iconClass = `${iconClass}-o`;
            }
            clsNames.push(iconClass);
            return clsNames;
        },
        contentClass() {
            let clsNames = [`${prefix}-alert__content`];
            return clsNames;
        },
        titleClass() {
            let clsNames = [`${prefix}-alert__title`];
            return clsNames;
        },
        messageClass() {
            let clsNames = [`${prefix}-alert__message`];
            return clsNames;
        },
        closeClass() {
            let clsNames = [`${prefix}-icon-close`];
            return clsNames;
        },
        actionClass() {
            let clsNames = [`${prefix}-alert__action`];
            return clsNames;
        },
        alertStyle() {
            let style = {};
            if (this.popup) {
                style.top = `${this.topOffset}px`;
            }
            return style;
        }
    },
    mounted() {
        if (this.popup) {
            this.startTimer();
            on(document, 'keydown', this.keydown);
        }
    },
    beforeDestroy() {
        if (this.popup) {
            off(document, 'keydown', this.keydown);
        }
    },
    methods: {
        handleAfterLeave() {
            this.$destroy(true);
            this.$el.parentNode.removeChild(this.$el);
        },

        close() {
            this.visible = false;
            if (typeof this.onClose === 'function') {
                this.onClose(this);
            }
        },

        clearTimer() {
            clearTimeout(this.timer);
        },

        startTimer() {
            if (this.duration > 0) {
                this.timer = setTimeout(() => {
                    if (this.visible) {
                        this.autoClose && this.close();
                    }
                }, this.duration);
            }
        },
        keydown(e) {
            if (e.keyCode === 27) {
                // esc关闭消息
                if (this.visible) {
                    this.close();
                }
            }
        }
    }
};
</script>
