<template>
    <transition name="focus-message-fade">
        <div class="focus-message alert-new" :class="['focus-message', center ? 'is-center' : '', customClass]"
             v-show="visible"
             @mouseenter="clearTimer"
             @mouseleave="startTimer"
             role="alert">

            <div class="alert-con"
                 :class="[
                     type || iconClass ? 'alert-state':'',
                     typeClass,
                     showClose ? 'alert-del':'',
                     !iconClass && !hasTypeIcon ? 'no-icon': ''
                     ]">

                <span class="micon-state" v-if="iconClass"><focus-icon :name="iconClass"></focus-icon></span>
                <span class="micon-state" v-else-if="type && hasTypeIcon"><focus-icon :name="typeIcon"></focus-icon></span>


                <slot>
                    <span v-if="!dangerouslyUseHTMLString" class="alert-txt">{{ message }}</span>
                    <p v-else v-html="message" class="focus-message-content"></p>
                </slot>

                <span class="micon-del" v-if="showClose"><focus-icon name="delete" @click="close"></focus-icon></span>
            </div>

        </div>
    </transition>
</template>

<script type="text/babel">
    import FocusIcon from "focus-view/packages/icon";

    const typeMap = {
        success: 'succ',
        info: 'info',
        warning: 'warn',
        error: 'err'
    };

    const typeIcon = {
        success: "yes",
        info: "info",
        warning: "caution",
        error: "error"
    };

    export default {
        components: {FocusIcon},
        data() {
            return {
                visible: false,
                message: '',
                duration: 3000,
                type: 'info',
                hasTypeIcon: false,
                iconClass: '',
                customClass: '',
                onClose: null,
                showClose: false,
                closed: false,
                timer: null,
                dangerouslyUseHTMLString: false,
                center: false
            };
        },

        computed: {
            typeClass() {
                return this.type ? 'alert-' + typeMap[this.type] : '';
            },
            typeIcon() {
                return this.type ? typeIcon[this.type] : '';
            }
        },

        watch: {
            closed(newVal) {
                if (newVal) {
                    this.visible = false;
                    this.$el.addEventListener('transitionend', this.destroyElement);
                }
            }
        },

        methods: {
            destroyElement() {
                this.$el.removeEventListener('transitionend', this.destroyElement);
                this.$destroy(true);
                this.$el.parentNode.removeChild(this.$el);
            },

            close() {
                this.closed = true;
                if (typeof this.onClose === 'function') {
                    this.onClose(this);
                }
            },

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

            startTimer() {
                if (this.duration > 0) {
                    this.timer = setTimeout(() => {
                        if (!this.closed) {
                            this.close();
                        }
                    }, this.duration);
                }
            },
            keydown(e) {
                if (e.keyCode === 27) { // esc关闭消息
                    if (!this.closed) {
                        this.close();
                    }
                }
            }
        },
        mounted() {
            this.startTimer();
            document.addEventListener('keydown', this.keydown);
        },
        beforeDestroy() {
            document.removeEventListener('keydown', this.keydown);
        }
    };
</script>
