<script>
    import HtBaseNotification from '../../base';

    const prefixCls = 'ivu-message';
    const htPrefixCls = 'ht-base-message'
    const iconPrefixCls = 'ivu-icon';
    const htIconPrefixCls = 'ht-base';
    const prefixKey = 'ivu_message_key_';

    const defaults = {
        top: 24,
        duration: 1.5,
        types:'default'
    };

    let messageInstance;
    let name = 1;

    const iconTypes = {
        'info': 'LiRa_notes1',
        'success': 'LiRa_check1',
        'warning': 'LiRa_also1',
        'error': 'LiRa_cross2',
        'loading': 'LiRa_Load'
    };
    function getMessageInstance () {
        messageInstance = messageInstance || HtBaseNotification.install({
            prefixCls: prefixCls,
            htPrefixCls:htPrefixCls,
            styles: {
                top: `${defaults.top}px`
            }
        });

        return messageInstance;
    }

    function notice (content = '', duration = defaults.duration, type, types=defaults.types, onClose = function () {}, closable = false, iconSize = '', render = function () {}) {
        const iconType = iconTypes[type];

        // if loading
        const loadCls = type === 'loading' ? ' ivu-load-loop' : '';
        const multiple = iconSize === 'large' ? 'ht-base-message-render' : '';

        let instance = getMessageInstance();

        instance.notice({
            name: `${prefixKey}${name}`,
            duration: duration,
            styles: {},
            transitionName: 'move-up',
            content: `
            <div class="${prefixCls}-custom-content ${prefixCls}-${type}">
                <i class="${iconPrefixCls} ${iconPrefixCls}-${iconType} ${htIconPrefixCls}-icon icon uedicon ${htIconPrefixCls}-${iconType} ${loadCls} ${multiple}"></i>
                <span>${content}</span>
            </div>
        `,
            renderType:type,
            types:types,
            render: render,
            onClose: onClose,
            closable: closable,
            type: 'message'
        });

        // 用于手动消除
        return (function () {
            let target = name++;

            return function () {
                instance.remove(`${prefixKey}${target}`);
            };
        })();
    }

    export default {
        name: 'HtBaseMessage',

        info (options) {
            return this.message('info', options);
        },
        success (options) {
            return this.message('success', options);
        },
        warning (options) {
            return this.message('warning', options);
        },
        error (options) {
            return this.message('error', options);
        },
        loading (options) {
            return this.message('loading', options);
        },
        message(type, options){
            if (typeof options === 'string') {
                options = {
                    content: options
                };
            }
            return notice(options.content, options.duration, type, options.types, options.onClose, options.closable, options.iconSize, options.render);
        },
        config (options) {
            if (options.top || options.top === 0) {
                defaults.top = options.top;
            }
            if (options.duration || options.duration === 0) {
                defaults.duration = options.duration;
            }
            if(options.types || options.types === 'default'){
                defaults.types = options.types;
            }
        },
        destroy () {
            let instance = getMessageInstance();
            messageInstance = null;
            instance.destroy('ivu-message');
        }
    };

</script>


<!--<script>
    import Vue from 'vue'
    import Message from "view-desgin/src/components/message";
    const _Message =  Vue.extend({
        extends: Message,
        name: 'HtBaseMessage',
    });
    let baseMessage = new _Message()
    let component = baseMessage.$options
    console.log(_Message,component);

    export default component;
</script>-->

