/*
element-ui中的message在实际使用过程中很多时候会遇到，相同的message会在短时间内同时出现在页面上，这种情况下是没有必要的。比如一个错误信息提示被放在定时器中进行：定时调用某个接口，然后这个接口会返回一个message的话，在定时器时间设置很短的情况下，就会出现短时间内弹出很多相同的message。我们可以通过重写element-ui的message来解决这个问题。
*/
import { Message } from 'element-ui'

const showMessage = Symbol('showMessage')
    /**
     * 封装element-ui message方法，只有在页面没有message或者没有相同message的情况下才弹出该message
     */
class ElMessage {
    success(options, single = true) {
        this[showMessage]('success', options, single)
    }
    warning(options, single = true) {
        this[showMessage]('warning', options, single)
    }
    info(options, single = true) {
        this[showMessage]('info', options, single)
    }
    error(options, single = true) {
            this[showMessage]('error', options, single)
        }
        /* eslint-disable */
        [showMessage](type, options, single) {
            if (single) {
                let canShow = true; //设置值控制显示当前message
                let messageArr = document.getElementsByClassName('el-message'); //获取页面所有已经存在的message
                //遍历获取到的message DOM集合,如果页面已存在的message中有显示文本和当前message相同的情况，canShow设置为false
                for (let i = 0; i < messageArr.length; i++) {
                    if (options == messageArr[i].getElementsByClassName('el-message__content')[0].innerHTML) {
                        canShow = false;
                    }
                }
                //如果页面不存在message或者canShow==true，则正常执行该message
                if (messageArr.length == 0 || canShow) {
                    Message[type]({ duration: 1500, message: options })
                }
            } else {
                Message[type]({ duration: 1500, message: options })
            }
        }
}

export {
    ElMessage
}