import Vue from 'vue'
import GuipMessage from './src/index.vue'

const defaultIcons = {
  success: 'icon-success',
  info: 'icon-info',
  warning: 'icon-warning',
  error: 'icon-error'
}

const defaultImages = {
  success: require('../assets/message_Success.png'),
  info: require('../assets/message_Warning.png'),
  warning: require('../assets/message_Warning.png'),
  error: require('../assets/message_error.png')
}

const MessageConstructor = Vue.extend(GuipMessage)
let messageQueue = []

const showMessage = (options) => {
  if (typeof options === 'string') {
    options = { message: options }
  }

  const config = {
    type: 'info',
    duration: 3000,
    position: 'top-center',
    showImage: true,
    ...options
  }

  if (config.showImage) {
    config.imageUrl = options.imageUrl || defaultImages[config.type]
  } else {
    config.iconClass = options.iconClass || defaultIcons[config.type]
  }

  const instance = new MessageConstructor({
    propsData: config
  }).$mount()
  
  document.body.appendChild(instance.$el)
  messageQueue.push(instance)

  return {
    close: () => instance.close()
  }
}

// 添加类型快捷方法
['success', 'info', 'warning', 'error'].forEach(type => {
  showMessage[type] = (message, options = {}) => {
    return showMessage({ message, type, ...options })
  }
})

// 添加关闭所有方法
showMessage.closeAll = () => {
  messageQueue.forEach(instance => instance.close())
  messageQueue = []
}

export default showMessage