<template>
  <el-dialog
    v-model="centerDialogVisible"
    class="msg-box"
    :width="options.width || '645'"
    align-center :lock-scroll="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="msg-header" v-if="options.type != 'tip'">
        <div class="header-color1"></div>
        <div class="header-color2"></div>
        <div class="header-close" v-if="options.closeIcon" >
          <el-icon color="rgba(196, 196, 196, 1)" @click="close" ><Close /></el-icon>
        </div>
      </div>
      <div class="tip-header" v-else-if="options.type == 'tip'">
        <div class="header-color1"></div>
        <div class="header-color2"></div>
        <div class="header-close" v-if="options.closeIcon" >
          <el-icon color="rgba(196, 196, 196, 1)" @click="close" ><Close /></el-icon>
        </div>
      </div>
    </template>
    <div class="msg-body" >
      <svg-icon v-if="options.status === 'success'" icon-class="success" class="msg-icon" />
      <svg-icon v-else-if="options.status === 'error'" icon-class="error" class="msg-icon" />
      <svg-icon v-else-if="options.status === 'warning'" icon-class="warning" class="msg-icon" />
      <svg-icon v-else-if="options.status === 'padding'" icon-class="padding" class="msg-icon" />
      <div class="msg-body-title" v-if="options.title">
        {{ options.title }}
      </div>
      <div class="msg-body-title" v-else-if="options.titleCode">
        {{ t(options.titleCode) }}
      </div>
      <div class="msg-body-content" v-if="options.content">
        {{ options.content }}
      </div>
    </div>
    <slot></slot>
    <template #footer v-if="options.btn != null && options.type != 'tip'" >
      <div class="msg-footer">
        <el-button v-if="options.btn.cancel != null" class="msg-btn dark-btn" size="large" @click="closeMsg">{{ options.btn.cancel.text }}</el-button>
        <el-button v-if="options.btn.ok != null" class="msg-btn" type="primary" size="large" @click="confirmMsg">
          {{ options.btn.ok.text }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useLocale } from 'element-plus'

const { t } = useLocale()
const centerDialogVisible = ref(false)

const props = defineProps({
  options: {
    type: Object,
    default: { }
  }
});

var callBack;

var closeMsg;

var confirmMsg;

const openMsg = () => {
  callBack = new Promise((resolve, reject) => {
    closeMsg = () => {
      reject()
      centerDialogVisible.value = false
    }
    confirmMsg = () => {
      resolve()
      centerDialogVisible.value = false
    }
    centerDialogVisible.value = true
  })
  return callBack;
}

const showTip = () => {
  centerDialogVisible.value = true
  if (!props.options.timeout && props.options.timeout >= 0) {
    setTimeout(() => {
      centerDialogVisible.value = false
    }, props.options.timeout || 3000)
  }
}

const closeTip = () => {
  centerDialogVisible.value = false
}

defineExpose({
  openMsg,
  showTip,
  closeTip
})

</script>

<style lang="scss">
.msg-box {
  border-radius: 20px;
  padding: 0 0 16px;

  .el-dialog__header {
    margin-right: 0;
    padding: 0;
    overflow: hidden;
  }

  .el-dialog__body {
    box-sizing: border-box;
    padding: 10px 30px;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .msg-header {
    border-radius: 20px;
    width: 100%;
    height: 58px;
    position: relative;
    overflow: hidden;
  
    .header-color1 {
      height: 14px;
      width: 24.6%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      background-color: #0F3675;
    }
  
    .header-color2 {
      height: 14px;
      width: 75.4%;
      position: absolute;
      top: 0;
      right: 0;
      overflow: hidden;
      background-color: #29BBE4;
    }

    .header-close {
      cursor: pointer;
      position: absolute;
      bottom: 0;
      right: 20px;
      font-size: 28px;
    }
  }

  .tip-header {
    border-radius: 20px;
    width: 100%;
    height: 38px;
    position: relative;
    overflow: hidden;
  
    .header-color1 {
      height: 9px;
      width: 24.6%;
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      background-color: #0F3675;
    }
  
    .header-color2 {
      height: 9px;
      width: 75.4%;
      position: absolute;
      top: 0;
      right: 0;
      overflow: hidden;
      background-color: #29BBE4;
    }

    .header-close {
      cursor: pointer;
      position: absolute;
      bottom: 0;
      right: 10px;
      font-size: 22px;
    }
  }

  .msg-body {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    .msg-icon {
      width: 42px;
      height: 42px;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .msg-body-title {
      font-size: 24px;
      font-weight: 700;
      color: #333333;
      line-height: 42px;
    }

    .msg-body-content {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
  }

  .msg-footer {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
  }
  
  .msg-btn {
    height: 40px;
    width: 264px;
    font-size: 20px;
    font-weight: 400;
  }
}
</style>