import { h } from 'vue'
import { ElMessage } from 'element-plus'
import Icon from '@/components/Icon/index.vue'
import 'element-plus/es/components/message/style/index'
import { loading } from '@/components/mj/mj-loading'
import { dialog } from '@/components/mj/mj-dialog'

const success = (msg: string, html = false) => {
  ElMessage({
    dangerouslyUseHTMLString: html,
    message: msg,
    type: 'success',
    customClass: 'success_messageBox',
    icon: h(Icon, { name: 'tip_success', size: 42 }),
  })
}

const error = (msg: string, html = false) => {
  ElMessage({
    dangerouslyUseHTMLString: html,
    message: msg,
    type: 'error',
    customClass: 'error_messageBox',
    icon: h(Icon, { name: 'tip_error', size: 42 }),
  })
}

const info = (msg: string, html = false) => {
  ElMessage({
    dangerouslyUseHTMLString: html,
    message: msg,
    type: 'info',
    customClass: 'info_messageBox',
  })
}

export default {
  success,
  error,
  info,
  loading(...args: any) {
    return loading.show(...args)
  },
  isLoading() {
    return loading.isShowing()
  },
  hideLoading() {
    return loading.hide()
  },
  load(...args: Parameters<typeof loading.load>) {
    return loading.load(...args)
  },
  alert(...args: any) {
    return dialog.show(...args)
  },
  hideAlert() {
    return dialog.hide()
  },
  confirmLoad(...args: Parameters<typeof dialog.load>) {
    return dialog.load(...args)
  },
  highlight(txt: any, highColor = '#f00a0a') {
    return `<span style="color:${highColor}">${txt}</span>`
  },
}
