vue-intergrall-plugins 1.1.51 → 1.1.53

package/src/lib-components/Email/EmailItem.vue

@@ -1,1340 +1,741 @@
-<template>
-  <div
-    :class="['email-item box-shadow-active', isOpen ? isOpenClass : `${isClosedClass} cursor-pointer`, showInfos ? 'info-open' : '', origem, customClass]"
-    @click="openByItem($event)">
-    <div v-if="showInfos" class="email-overlay"></div>
-    <div class="email-author" v-if="autor" :class="[origem, isMainEmail ? 'main' : '']" @click.stop="toggleIsOpen"
-      :key="autor">
-      <span :title="statusTitle"><fa-icon :icon="['fas', status !== 'C' ? 'reply' : 'times']" :class="[origem]" /></span>
-      <p class="email-author-name" v-text="returnAuthorName" :title="returnAuthorName"></p>
-      <span :title="`E-mail ${origem === 'outros' ? 'recebido' : 'enviado'}`">
-        <fa-icon :icon="['fas', origem === 'outros' ? 'user' : 'headset']" class="email-to-svg" />
-      </span>
-    </div>
-    <div class="email-custom-buttons" v-if="customButtons && customButtons.length" @click.stop>
-      <span v-for="(button, index) in customButtons" :key="button.id || index" v-show="button.use"
-        @click="button.callback ? button.callback(returnParams(button.params)) : $emit(button.emitName, returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
-        v-tippy :content="button.tippyContent">
-        <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
-        <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
-      </span>
-    </div>
-    <div
-      v-if="customActionButtons && customActionButtons.length && customActionButtons[0].type === 'ja-spam'"
-      :key="customActionButtons[0].id"
-      class="ja-marcado-spam"
-    >
-      <span class="icon-tittle-ja-spam">
-        <fa-icon :icon="['fas', 'exclamation-triangle']" style="color:#FF0000; margin-right:8px; font-size:16px;" />
-        {{ customActionButtons[0].label }}
-      </span>
-      <div @click.stop class="ja-marcado-spam-buttons">
-        <button
-      :disabled="customActionButtons[0].btn1.disabled"
-      class="btn-nao-spam"
-      @click="customActionButtons[0].btn1.callback"
-      style="position: relative;"
-    >
-      <VueLoader
-        v-if="customActionButtons[0].btn1.loading"
-        :hasBg="false"
-        class="btn-loader"
-      />
-      <span :style="{ opacity: customActionButtons[0].btn1.loading ? 0 : 1 }">
-        {{ customActionButtons[0].btn1.label }}
-      </span>
-      </button>
-      <button
-        :disabled="customActionButtons[0].btn2.disabled"
-        class="btn-e-spam"
-        @click="customActionButtons[0].btn2.callback"
-        style="position: relative;"
-      >
-        <VueLoader
-          v-if="customActionButtons[0].btn2.loading"
-          :hasBg="false"
-          class="btn-loader"
-        />
-      <span :style="{ opacity: customActionButtons[0].btn2.loading ? 0 : 1 }">
-      <fa-icon v-if="customActionButtons[0].btn2.icon"
-        class="icon-btn-encerrar-spam"
-        :icon="['fas', customActionButtons[0].btn2.icon === 'exit' ? 'sign-out-alt' : customActionButtons[0].btn2.icon]"
-        style="margin-right: 6px;"
-      />
-      {{ customActionButtons[0].btn2.label }}
-    </span>
-  </button>
-      </div>
-    </div>
-    <div class="email-custom-action-buttons" v-if="customActionButtons && customActionButtons.length" @click.stop>
-      <template v-for="(button, index) in customActionButtons">
-        <button
-          v-if="button.type !== 'ja-spam'"
-          :key="button.id || index"
-          v-show="button.use"
-          @click="button.callback(returnParams(button.params))"
-          :class="`${button.customClass || 'email-custom-action-button'}`"
-          v-tippy
-          :content="button.tippyContent"
-        >
-          <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
-          <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
-          <span v-if="button.label" class="email-custom-action-label" v-text="button.label"></span>
-        </button>
-      </template>
-    </div>
-    <div class="email-header" @click.stop="toggleIsOpen">
-      <p class="email-subject" :title="returnMainValue()">
-        {{ returnMainValue() }}
-      </p>
-      <div
-      class="divBtnReplyEmail" :class="[isOpen ? 'reply-email-open' : '']" v-if="status === 'C'">
-        <strong class="strongMsg">{{ status_msg }} </strong>
-        <button
-        v-if="hasReplyEmail"
-          class="btnReplyEmail"
-          @click.stop="emitReplyEmail"
-        ><strong>Reenviar</strong>
-      </button>
-      </div>
-      <div class="header-container">
-        <div :class="`email-header-content${isOpen ? ' open' : ''}`">
-          <div class="email-header-infos">
-            <template>
-              <div v-if="para && para.length" class="email-to-from-container" ref="emailToContainer">
-                <EmailTo v-for="(recipient, index) in para" :key="`to-${recipient.email}`"
-                  :currentName="formattedToName(recipient.name, index, para.length)" :email="recipient.email"
-                  :showMail="isOpen" />
-              </div>
-              <div v-if="copia && copia.length" class="email-cc-container">
-                <EmailTo v-for="(recipient, index) in copia" :key="`cc-${recipient.email}`"
-                  :currentName="formattedCcName(recipient.name, index, copia.length)" :email="recipient.email"
-                  :showMail="isOpen" />
-              </div>
-              <div class="email-to-btn" v-show="isOpen" @click.stop="toggleShowInfos()">
-                <fa-icon :icon="['fas', 'caret-down']" />
-              </div>
-            </template>
-            <div v-if="!isMainEmail && isOpen" class="email-subject-secondary">
-              <span class="email-subject-span"
- v-text="`Assunto: ${htmlEntityToEmoji(replaceUnicodeWithEmoji(assunto)) || '(Sem assunto)'}`"></span>
-            </div>
-          </div>
-        </div>
-        <span :class="`email-date ${isOpen ? isOpenClass : isClosedClass}`" :title="formattedDate" ref="emailDate"
-          v-show="formattedDate">
-          <fa-icon :icon="['fas', 'calendar']" />
-          {{ formattedDate }}
-        </span>
-      </div>
-      <ul v-if="showInfos" ref="emailToInfos" class="email-to-infos box-shadow" v-clickaway="() => showInfos = false"
-        @click.stop>
-        <li v-for="(info, index) in mailInfos" :key="`info-${index}`" class="email-info">
-          <span v-text="info.label"></span>
-          {{ info.value }}
-        </li>
-      </ul>
-      <span v-if="isOpen" :class="['email-actions box-shadow', { active: actionsOpen }, { main: isMainEmail }]"
-        @click.stop="toggleActions">
-        <span></span>
-        <span></span>
-        <span></span>
-      </span>
-      <ul class="email-actions-list box-shadow" v-if="actionsOpen && isOpen" v-clickaway="closeActions" @click.stop>
-        <li class="email-action" @click.stop="toggleOpenMessage">
-          {{ !openMessage ? 'Visualizar' : 'Esconder' }} texto do e-mail (html)
-        </li>
-      </ul>
-    </div>
-    <div class="email-content" v-show="isOpen" ref="emailIframeParent">
-      <VueLoader v-if="isIframeLoading" />
-      <div v-if="hasError" class="email-error-content">
-        <p>Erro ao carregar o e-mail</p>
-        <button class="box-shadow" @click="handleTryAgain()">Tentar novamente</button>
-      </div>
-      <iframe v-show="!hasError" ref="emailIframe"
-        :class="`email-html ${isIframeLoading ? 'visibility-hidden' : ''}`"></iframe>
-      <span class="email-raw" v-if="openMessage">{{ mensagem }}</span>
-    </div>
-    <div v-if="filteredFiles && filteredFiles.length" class="email-files" v-show="isOpen">
-      <EmailFile v-for="(anexo, index) in filteredFiles" :key="index" :anexo="anexo" :dominio="dominio" />
-    </div>
-    <div
-      v-if="filteredFiles && filteredFiles.length && !isOpen"
-      class="email-attachments-clip cursor-pointer"
-      @click.stop="openAndScrollToAttachments"
-    >
-      <span class="clip-icon">
-        <fa-icon :icon="['fas', 'paperclip']" />
-      <span class="clip-badge">{{ filteredFiles.length }}</span>
-  </span>
-</div>
-<!-- Status da mensagem -->
-      <transition name="fade" mode="out-in">
-        <span class="check" v-if="status == 'D'" :content="contentTooltip" v-tippy key="check-padrao">
-          <fa-icon :icon="['fas', 'check']" />
-        </span>
-        <span class="check cinza" v-else-if="status == 'Q'" :content="contentTooltip" v-tippy key="check-cinza">
-          <fa-icon :icon="['fas', 'check']" />
-        </span>
-        <span class="check preto" v-else-if="status == 'G'" :content="contentTooltip" v-tippy key="check-preto">
-          <fa-icon :icon="['fas', 'check']" />
-        </span>
-        <span class="check preto" v-else-if="status == 'E'" :content="contentTooltip" v-tippy key="double-check-preto">
-          <fa-icon :icon="['fas', 'check-double']" />
-        </span>
-        <span class="check visualizado" v-else-if="status == 'L'" :content="contentTooltip" v-tippy
-          key="double-check-visualizado">
-          <fa-icon :icon="['fas', 'check-double']" />
-        </span>
-        <!-- Status finalizador -->
-        <span class="check vermelho" v-else-if="status == 'C' || status == 'ERRO'" :content="contentTooltip" v-tippy
-          key="times-circle">
-          <fa-icon :icon="['fas', 'times-circle']" />
-        </span>
-        <!-- Status finalizador -->
-        <span class="check vermelho" v-else-if="status == 'T'" :content="contentTooltip" v-tippy key="hourglass">
-          <fa-icon :icon="['fas', 'hourglass']" />
-        </span>
-        <!-- Status finalizador -->
-        <span class="check vermelho" v-else-if="status == 'O'" :content="contentTooltip" v-tippy key="deleted">
-          <fa-icon :icon="['fas', 'times']" />
-        </span>
-        <!-- Status de mensagem deletada -->
-      </transition>
-  </div>
-</template>
-
-<script>
-import EmailFile from "./EmailFile.vue";
-import EmailTo from "./EmailTo.vue";
-import { textoLongo } from "@/mixins/formatarTexto";
-import Clickaway from '@/directives/clickaway';
-
-export default {
-  mixins: [textoLongo],
-  directives: {
-    clickaway: Clickaway
-  },
-  components: { EmailFile, EmailTo },
-  props: {
-    dominio: {
-      type: String,
-      required: true
-    },
-    dicionario: {
-      type: Object,
-      required: true
-    },
-    customClass: {
-      type: String,
-      default: ''
-    },
-    from: {
-      type: Array,
-      default: () => []
-    },
-    para: {
-      type: Array,
-      default: () => []
-    },
-    copia: {
-      type: Array,
-      default: () => []
-    },
-    html: {
-      type: String,
-      default: ""
-    },
-    assunto: {
-      type: String,
-      default: ""
-    },
-    dataHora: {
-      type: String,
-      default: ""
-    },
-    mensagem: {
-      type: String,
-      default: ""
-    },
-    anexos: {
-      type: [Array, String],
-      default: () => []
-    },
-    iniciarAberto: {
-      type: Boolean,
-      default: false
-    },
-    dataServer: {
-      type: String,
-      default: ""
-    },
-    isOpenClass: {
-      type: String,
-      default: 'bg-dark-white-2'
-    },
-    isClosedClass: {
-      type: String,
-      default: 'bg-white'
-    },
-    refKey: {
-      type: String,
-    },
-    showRawMessageInsideEmail: {
-      type: Boolean,
-      default: false
-    },
-    origem: {
-      type: String,
-      default: 'outros'
-    },
-    autor: {
-      type: String
-    },
-    isMainEmail: {
-      type: Boolean,
-      default: true
-    },
-    customButtons: {
-      type: Array
-    },
-    customActionButtons: {
-      type: Array
-    },
-    status: {
-      type: String,
-      default: ''
-    },
-    status_msg: {
-      type: String,
-      default: ''
-    },
-    hasReplyEmail: {
-      type: Boolean,
-      default: false
-    },
-    id_lig: {
-      type: String,
-    },
-    token_cliente: {
-      type: String,
-    },
-    infos: {
-      type: Object,
-      default: () => ({}),
-    },
-    jaMarcadoSpam: {
-      type: Boolean,
-      default: false
-    },
-    msgTooltip: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      isOpen: this.iniciarAberto,
-      openMessage: false,
-      actionsOpen: false,
-      showInfos: false,
-      isIframeLoading: true,
-      hasError: false,
-      errorCount: 0,
-      scrollToFile: false,
-    };
-  },
-  computed: {
-    statusTitle() {
-      if(this.status !== 'C') {
-        return `Enviado por: ${this.autor}`
-      }
-
-      if(!this.status_msg) {
-        return `Enviado com erro por: ${this.autor}` 
-      }
-
-      return `Enviado com erro por: ${this.autor} - ${this.status_msg}`
-    },
-    paraCopia() {
-      if (!this.copia || !this.copia.length) return this.para && this.para.length ? this.para : []
-      return this.para && this.para.length ? this.para.concat(this.copia) : this.copia
-    },
-    formattedDate() {
-      return this.formataDateHoraDateFns(this.dataHora, this.dataServer, this.dicionario);
-    },
-    contentTooltip: {
-          get() {
-            if(!this.status || !this.msgTooltip) return ''
-            if (this.status && !this.msgTooltip) {
-              const msgStatus = "msg_status_" + this.status;
-              return (this.strTooltipAux = this.dicionario[msgStatus]);
-            } else if (this.status && this.msgTooltip) {
-              return (this.strTooltipAux = this.msgTooltip);
-            }
-          },
-          set(msg) {
-            return (this.contentTooltip = msg);
-          },
-        },
-    mailInfos() {
-      const formatAsString = (arr) => {
-        let str = ''
-        arr.forEach(({ name, email }, index) => {
-          if (!name && !email) str += ''
-          else str += `${name || ''} ${email ? `<${email}>` : ''}${((name || email) && index !== arr.length - 1) ? ', ' : ''}`
-        })
-        return str
-      }
-
-      const infos = [
-        {
-          label: 'De:',
-          value: this.from && this.from.length ? formatAsString(this.from) : '--'
-        },
-        {
-          label: 'Para:',
-          value: this.para && this.para.length ? formatAsString(this.para) : '--'
-        },
-        {
-          label: 'Assunto:',
-          value: this.htmlEntityToEmoji(this.replaceUnicodeWithEmoji(this.assunto)) || '(Sem assunto)'
-        },
-        {
-          label: 'Data:',
-          value: this.formataDataHora(this.dataHora) || '--'
-        },
-      ]
-
-      if (this.copia && this.copia.length) {
-        infos.splice(2, 0, {
-          label: `${this.dicionario.tit_copia}:` || 'Copia:',
-          value: formatAsString(this.copia)
-        })
-      }
-
-      return infos
-    },
-    filteredFiles() {
-      if (!this.anexos || !this.anexos.length) return
-
-      return this.anexos.filter(anexo => {
-        return !this.html.includes(anexo.name);
-      })
-    },
-    returnAuthorName() {
-      if (!this.from || !this.from.length) return this.autor || ''
-      const { email, name } = this.from[0]
-      if (!name) return email
-      if (!email) return name
-      if (this.isOpen) return `${name} (${email})`
-      return name
-    },
-    formattedToName() {
-      return (name, index, length) => {
-        let addVirgulaDps = index < length - 1
-        const text = index === 0 ? `Para: ${name || ''}` : name ? `${name}${addVirgulaDps ? ', ' : ''}` : '';
-        return text
-      }
-    },
-    formattedCcName() {
-      return (name, index, length) => {
-        let addVirgulaDps = index < length - 1
-        const text = index === 0 ? `${this.dicionario.tit_copia || 'Cópia'}: ${name || ''}` : name ? `${name}${addVirgulaDps ? ', ' : ''}` : '';
-        return text
-      }
-    }
-  },
-  watch: {
-    isOpen: 'updateIframeContent'
-  },
-  mounted() {
-    this.updateIframeContent();
-    this.adjustMaxWidth()
-
-    if (this.refKey) this.$root.$refs[`${refKey}`] = this
-
-    setTimeout(() => {
-      if (this.isIframeLoading) this.adjustIframeHeight()
-    }, 15000);
-  },
-  methods: {
-    openAndScrollToAttachments() {
-      if (!this.isOpen) {
-        this.scrollToFile = true;
-        this.isIframeLoading = true;
-        this.isOpen = true;
-      } else if (!this.isIframeLoading) {
-        this.scrollToAttachments();
-      } else {
-        this.scrollToFile = true;
-      }
-    },
-    scrollToAttachments() {
-      this.$nextTick(() => {
-        const files = this.$el.querySelector('.email-files');
-        if (files) {
-          files.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-      });
-    },
-    handleTryAgain() {
-      this.isOpen = true
-      this.isIframeLoading = true
-      this.hasError = false
-
-      this.$nextTick(this.updateIframeContent())
-    },
-
-    emitReplyEmail() {
-      if(!this.hasReplyEmail) return
-
-      this.$emit('reply-email', {
-        html: this.html,
-        mensagem: this.mensagem,
-        assunto: this.assunto,
-        from: this.from,
-        para: this.para,
-        dataHora: this.dataHora,
-        anexos: this.anexos,
-        status: this.status,
-        status_msg: this.status_msg,
-        copia: this.copia,
-        origem: this.origem,
-        autor: this.autor,
-        id_lig: this.id_lig,
-        token_cliente: this.token_cliente,
-        infos: this.infos,
-      });
-    },
-
-    gerarMensagemEstilizada(msg) {
-      try {
-        const currentStyles = [
-          { tagAbertura: "<i>", tagFechamento: "</i>", find: /_(.*?)_/g },
-          { tagAbertura: "<b>", tagFechamento: "</b>", find: /\*(.*?)\*/g },
-          { tagAbertura: "<del>", tagFechamento: "</del>", find: /~(.*?)~/g }
-        ]
-
-        const isLetterOrUnderscore = (char) => {
-          return /[a-zA-Z_]/.test(char)
-        }
-
-        const isValidMatch = (message, fullMatch, startIndex) => {
-          const beforeChar = message[startIndex - 1]
-          const afterChar = message[startIndex + fullMatch.length]
-          return (
-            (beforeChar === undefined || !isLetterOrUnderscore(beforeChar)) &&
-            (afterChar === undefined || !isLetterOrUnderscore(afterChar))
-          )
-        }
-
-        let message = msg
-
-        for (const { tagAbertura, tagFechamento, find } of currentStyles) {
-          let match
-          while ((match = find.exec(message)) !== null) {
-            const fullMatch = match[0]
-            const content = match[1]
-            const startIndex = match.index
-
-            if (isValidMatch(message, fullMatch, startIndex)) {
-              const endIndex = startIndex + fullMatch.length
-              const replacedContent = `${tagAbertura}${content}${tagFechamento}`
-              message = message.slice(0, startIndex) + replacedContent + message.slice(endIndex)
-            }
-          }
-        }
-
-        return message
-      } catch (err) {
-        console.error('Erro ao gerar mensagem estilizada: ', err)
-        return msg
-      }
-    },
-    updateIframeContent() {
-      this.$nextTick(() => {
-        if (this.isOpen && this.isIframeLoading) {
-          const iframe = this.$refs.emailIframe;
-          if (!iframe) {
-            console.warn('Iframe not found');
-            this.isIframeLoading = false
-            return
-          }
-          const doc = iframe.contentDocument || iframe.contentWindow.document;
-          if (!doc) {
-            console.warn('Document not found in iframe');
-            this.isIframeLoading = false
-            return
-          }
-          let content = this.html || ''
-          if(!content || !content.length) {
-            console.warn('No content to display in iframe');
-            this.isIframeLoading = false
-            return
-          }
-          if (!/<[a-z][\s\S]*>/i.test(content)) {
-            content = content.replace(/\n/g, '<br>');
-            content = this.gerarMensagemEstilizada(content)
-            content = `<p>${content}</p>`;
-          }
-
-          doc.open();
-          doc.write(content);
-          doc.close();
-
-          const images = doc.getElementsByTagName('img');
-          let imagesLoaded = 0;
-
-          const imageLoadHandler = () => {
-            imagesLoaded++;
-            if (imagesLoaded === images.length) {
-              this.adjustIframeHeight();
-            }
-          };
-
-          if (images.length === 0) {
-            this.adjustIframeHeight();
-          } else {
-            for (let img of images) {
-              img.addEventListener('load', imageLoadHandler);
-              img.addEventListener('error', imageLoadHandler);
-            }
-          }
-        }
-      });
-    },
-    adjustIframeHeight() {
-      this.$nextTick(() => {
-        const iframe = this.$refs.emailIframe;
-        const emailParent = this.$refs.emailIframeParent
-        if (iframe && emailParent) {
-          setTimeout(() => {
-            const doc = iframe.contentDocument || iframe.contentWindow.document;
-            const margin = 20
-            const value = doc.documentElement.offsetHeight + margin
-            if (value === 0 || doc.documentElement.querySelector('body').innerHTML === '') {
-              this.errorCount++
-              if (this.errorCount > 3) {
-                this.hasError = true
-                if (this.isIframeLoading) this.isIframeLoading = false
-                return
-              }
-              this.isIframeLoading = true
-              this.updateIframeContent()
-              return
-            }
-            if (this.hasError || this.errorCount > 0) {
-              this.hasError = false
-              this.errorCount = 0
-            }
-            iframe.style.height = `${value}px`;
-            emailParent.style.minHeight = `${value}px`
-            if (this.scrollToFile) {
-              this.scrollToFile = false;
-              this.scrollToAttachments();
-            }
-          }, 100)
-        }
-
-        if (this.isIframeLoading) this.isIframeLoading = false
-      });
-    },
-    toggleShowInfos() {
-      this.showInfos = !this.showInfos;
-      if (this.showInfos) {
-        this.$nextTick(() => {
-          this.adjustTopPosition();
-        });
-      }
-    },
-    adjustTopPosition() {
-      const ulElement = this.$refs.emailToInfos;
-      if (!ulElement) return
-      const ulHeight = ulElement.offsetHeight;
-      const maxHeight = 300
-      const finalHeight = ulHeight < maxHeight ? ulHeight : maxHeight
-      ulElement.style.bottom = `-${finalHeight}px`;
-    },
-    toggleIsOpen() {
-      this.isOpen = !this.isOpen;
-      if (this.isOpen) {
-        this.isIframeLoading = true;
-      } else {
-        this.actionsOpen = false;
-        this.openMessage = false;
-        this.showInfos = false;
-        this.scrollToFile = false;
-      }
-    },
-    adjustMaxWidth() {
-      this.$nextTick(() => {
-        const toContainer = this.$refs.emailToContainer
-        const dateContainer = this.$refs.emailDate
-        if (!toContainer || !dateContainer) return
-        toContainer.style.maxWidth = `calc(100% - ${dateContainer.offsetWidth}px)`
-      })
-    },
-    toggleActions() {
-      this.actionsOpen = !this.actionsOpen;
-    },
-    toggleOpenMessage() {
-      if (this.showRawMessageInsideEmail) {
-        this.openMessage = !this.openMessage;
-      }
-
-      this.$emit('open-message', {
-        dicionario: this.dicionario,
-        from: this.from,
-        para: this.para,
-        html: this.html,
-        assunto: this.assunto,
-        dataHora: this.dataHora,
-        mensagem: this.mensagem,
-        anexos: this.filteredFiles,
-        dataServer: this.dataServer,
-        dominio: this.dominio
-      })
-    },
-    closeActions() {
-      this.actionsOpen = false;
-    },
-    returnMainValue() {
-      if (this.isMainEmail) return this.htmlEntityToEmoji(this.replaceUnicodeWithEmoji(this.assunto)) || '(Sem assunto)'
-      return ''
-    },
-    openByItem(event) {
-      if (this.isOpen) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-
-      this.toggleIsOpen();
-    },
-    returnParams(params) {
-      const defaultParams = {
-        message: this.mensagem,
-      };
-
-      if (!params) return defaultParams;
-
-      const keys = params.instanceKeys.split("|");
-      if (!keys || !keys.length)
-        return {
-          defaultParams,
-          ...params.values,
-        };
-
-      const customParams = { ...params.values };
-      keys.forEach((key) => {
-        if (this[key]) customParams[key] = this[key];
-        else console.warn(`Cant find ${key} on 'this' instance`);
-      });
-
-      return Object.keys(customParams).length ? customParams : defaultParams;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.show-y-top-enter-active,
-.show-y-top-leave-enter {
-  opacity: 1;
-  transform: translateY(0);
-  transition: all 200ms linear;
-}
-
-.show-y-top-enter,
-.show-y-top-leave-to {
-  opacity: 0;
-  transform: translateY(-2%);
-}
-</style>
-
-<style>
-.visibility-hidden {
-  visibility: hidden;
-}
-
-.box-shadow-active {
-  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25);
-}
-
-.bg-dark-white-2 {
-  background-color: #f7f7f7;
-}
-
-.bg-white {
-  background-color: #FFF;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.email-overlay {
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.email-item {
-  --konecta-gray-3: #515050;
-  --konecta-light: #f8f9fa;
-  --blue-silver-4: #dae0e5;
-  --email-principal: #faa732;
-  --email-outros: #86b7fe;
-  font-family: "Roboto", sans-serif;
-  flex: 1;
-  margin: 0 0 10px 0;
-  color: #222;
-  min-height: 60px;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 10px;
-  border-radius: 5px;
-  transition: all 150ms ease-in-out;
-  max-width: 100%;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-}
-
-.divBtnReplyEmail {
-  display: flex;
-  align-items: center;
-  background-color: #f0adad;
-  border-radius: 6px;
-  padding: 7px 9px;
-  margin: 5px 0;
-  gap: 8px;
-}
-
-.reply-email-open {
-  width: calc(100% - 10px - 45px);
-}
-
-.btnReplyEmail {
-  display: block;
-  background-color: #faa732;
-  border: 1px solid #da8205;
-  margin: 8px 0 8px 5px;
-  padding: 5px 10px 5px 10px;
-  font-size: 14.4px;
-  font-weight: bold;
-  border-radius: 3px;
-  color: #000000;
-  cursor: pointer;
-}
-
-.ja-marcado-spam {
-  width: 100%;
-  background: #fffbe6;
-  border: 1px solid #ffe58f;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-  padding: 5px 30px;
-  margin: 9px 0px 5px 0px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-}
-
-.ja-marcado-spam > span {
-  color: #614500;
-  font-weight: 500;
-  font-size: 14px;
-  margin-bottom: 0;
-  align-self: center;
-  align-items: center;
-}
-
-.ja-marcado-spam-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  align-items: flex-end;
-}
-
-.ja-marcado-spam button {
-  min-width: 110px;
-  padding: 4px 10px;
-  border: none;
-  border-radius: 5px;
-  background: #ffe58f;
-  color: #333;
-  cursor: pointer;
-  font-size: 13.4px;
-}
-
-.ja-marcado-spam-buttons .btn-nao-spam {
-  background: #36b87b;
-  color: var(--white);
-  border: 1px solid var(--konecta-success-hover, #309264);
-  font-weight: bold;
-}
-
-.ja-marcado-spam-buttons .btn-nao-spam:hover {
-  background: #309264;
-}
-
-.ja-marcado-spam-buttons .btn-e-spam {
-  background: #e74c3c;
-  color: var(--white);
-  border: 1px solid var(--konecta-danger-hover, #c92e1e);
-  font-weight: bold;
-}
-
-.ja-marcado-spam-buttons .btn-e-spam:hover {
-  background: #c92e1e;
-}
-
-.icon-btn-encerrar-spam {
-  margin-right: 2px;
-}
-
-.btn-loader {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-  pointer-events: none;
-}
-
-.strongMsg {
-  flex: 1;
-  font-size: 13px;
-}
-
-.email-custom-action-buttons {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  flex-wrap: wrap;
-  max-width: 100%;
-  cursor: default;
-}
-
-.email-custom-action-button {
-  margin-top: 10px;
-  background-color: var(--konecta-light) !important;
-  color: var(--konecta-dark) !important;
-  border: 1px solid var(--blue-silver-4) !important;
-  flex: 1;
-  min-width: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding: 5px;
-  overflow: hidden;
-  border-radius: 5px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  transition: all 100ms ease-in-out;
-  max-width: 100%;
-  cursor: pointer
-}
-
-.email-custom-action-button:hover {
-  background-color: #e9ecef !important;
-}
-
-.email-custom-action-button:disabled {
-  background-color: var(--konecta-gray-3) !important;
-  border: 1px solid #25282b !important;
-  cursor: not-allowed !important;
-}
-
-.email-item.outros {
-  border-left: 3px solid var(--email-outros);
-}
-
-.email-author-name {
-  margin: 0 5px;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.email-author.outros {
-  color: var(--email-outros);
-}
-
-.email-author.outros>svg:nth-child(1) {
-  transform: rotate(180deg);
-}
-
-.email-author.principal {
-  color: var(--email-principal);
-}
-
-.email-author.main {
-  font-size: 16.4px;
-}
-
-.email-item.principal {
-  border-left: 3px solid var(--email-principal);
-}
-
-.email-item.info-open {
-  overflow: visible
-}
-
-.email-header {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  position: relative;
-  overflow: visible;
-}
-
-.header-container {
-  display: flex;
-  overflow: hidden;
-  position: relative;
-}
-
-.email-header-content {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 250px;
-}
-
-.email-header-infos {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.email-subject {
-  margin: 5px 0 0 0;
-  font-size: 16.4px;
-  cursor: pointer;
-}
-
-.email-date {
-  --width: 245px;
-  font-size: 12.8px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  position: absolute;
-  right: 0;
-  top: 0;
-  min-width: var(--width);
-  width: var(--width);
-  max-width: var(--width);
-  display: flex;
-  justify-content: flex-end;
-  gap: 3px;
-  align-items: center;
-}
-
-.email-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-  background-color: #FFF;
-  position: relative;
-  max-width: 100%;
-}
-
-.email-actions {
-  align-self: flex-end;
-  display: flex;
-  border-radius: 10px;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
-  padding: 5px 7px;
-  background-color: #dddddd;
-  position: absolute;
-  right: 0;
-  top: 30px;
-  z-index: 1;
-}
-
-.email-actions.main {
-  top: 10px
-}
-
-.email-actions.active {
-  background-color: #dfdfdf;
-}
-
-.email-actions>span {
-  width: 4px;
-  height: 4px;
-  min-width: 4px;
-  min-height: 4px;
-  max-width: 4px;
-  max-height: 4px;
-  background-color: #222;
-  border-radius: 50%;
-}
-
-.email-actions-list {
-  position: absolute;
-  right: 45px;
-  width: 250px;
-  top: 5px;
-  margin: 0;
-  list-style-type: none;
-  padding: 0;
-  border-radius: 5px;
-  z-index: 1;
-}
-
-.email-action {
-  background-color: #dfdfdf;
-  padding: 5px 10px;
-  cursor: pointer;
-  transition: background-color 150ms ease-in-out;
-  font-size: 14.4px;
-  user-select: none;
-}
-
-.email-action:nth-child(1) {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.email-action:last-child {
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.email-action:hover {
-  background-color: #CCC;
-}
-
-.email-html {
-  width: 100%;
-  min-width: 300px;
-  max-width: 100%;
-  border: none;
-  overflow: auto;
-}
-
-.email-raw {
-  width: 100%;
-  max-width: 100%;
-  padding: 15px;
-  font-size: 14.4px;
-  color: #222;
-}
-
-.email-files {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  width: 100%;
-  margin-top: 5px;
-}
-
-.email-header-content,
-.email-header-infos {
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.email-to-from-container {
-  margin-bottom: 5px;
-  max-width: 100%;
-  min-width: 250px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex: 1;
-  gap: 5px;
-}
-
-.email-cc-container {
-  margin-bottom: 5px;
-  max-width: 100%;
-  min-width: 250px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  flex: 1;
-  gap: 5px;
-}
-
-.email-to-btn {
-  padding: 0 5px;
-  font-size: 14.4px;
-  cursor: pointer;
-  color: #666;
-}
-
-.email-to-infos {
-  position: absolute;
-  bottom: -325px;
-  border: 1px solid #CCC;
-  z-index: 2;
-  padding: 10px;
-  background-color: #FFF;
-  max-height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  width: 300px;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  margin: 0;
-  cursor: default;
-}
-
-.email-info {
-  width: 100%;
-  font-size: 12.8px;
-}
-
-.email-info>span {
-  font-size: 12px;
-  color: gray;
-  margin-right: 3px;
-}
-
-.email-author {
-  display: flex;
-  align-items: center;
-  height: 5px;
-  font-size: 12px;
-  font-weight: bold;
-  transform: translateY(-2px);
-  width: 100%;
-  cursor: pointer;
-}
-
-.email-subject-secondary {
-  margin-top: -5px;
-}
-
-.email-subject-span {
-  font-size: 11.2px;
-  color: gray;
-}
-
-.email-to-svg {
-  font-size: 13.6px;
-}
-
-.email-custom-buttons {
-  display: flex;
-  gap: 7px;
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 1;
-  font-size: 12.8px;
-}
-
-.menu-mensagem {
-  cursor: pointer;
-  padding: 1px;
-  opacity: .7;
-  transition: opacity 100ms ease-in-out;
-}
-
-.menu-mensagem:hover,
-.menu-mensagem:focus,
-.menu-mensagem:active {
-  opacity: 1;
-}
-
-.email-error-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 5px;
-  padding: 10px;
-}
-
-.email-error-content p {
-  margin: 0;
-  color: #E74C3C;
-}
-
-.email-error-content button {
-  border: 1px solid #CCC;
-  border-radius: 3px;
-  padding: 5px 10px;
-  background-color: #FFF;
-  cursor: pointer;
-  transition: background-color 150ms ease-in-out;
-}
-
-.email-error-content button:hover {
-  background-color: #EEE;
-}
-
-.btnReplyEmail:hover, .btnReplyEmail:active {
-  background-color: #da8205;
-  color: #000000;
-}
-
-.email-attachments-clip {
-  display: flex;
-  cursor: pointer;
-  margin-top: 5px;
-}
-
-.clip-icon {
-  position: relative;
-  font-size: 22px;
-  color: #999;
-  transform: rotate(-15deg);
-}
-
-.clip-badge {
-  position: absolute;
-  transform: rotate(15deg);
-  top: 0px;
-  right: -15px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: linear-gradient(135deg, #999 40%, #515050 100%);
-  color: #fff;
-  border-radius: 50%;
-  min-width: 22px;
-  height: 22px;
-  font-size: 12.4px;
-  border: 1px solid #fff;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18));
-  text-align: center;
-  padding: 0 4px;
-  box-sizing: border-box;
-}
-
-.clip-icon:hover {
-  color: #777;
-}
-
-.clip-icon:hover .clip-badge {
-  background: linear-gradient(135deg, #999 20%, #515050 70%);
-  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28));
-}
-
-</style>
+<template>
+  <div
+    :class="['email-item box-shadow-active', isOpen ? isOpenClass : `${isClosedClass} cursor-pointer`, showInfos ? 'info-open' : '', origem, customClass]"
+    @click="openByItem($event)">
+    <div v-if="showInfos" class="email-overlay"></div>
+    <div class="email-author" v-if="autor" :class="[origem, isMainEmail ? 'main' : '']" @click.stop="toggleIsOpen"
+      :key="autor">
+      <span :title="statusTitle"><fa-icon :icon="['fas', status !== 'C' ? 'reply' : 'times']" :class="[origem]" /></span>
+      <p class="email-author-name" v-text="returnAuthorName" :title="returnAuthorName"></p>
+      <span :title="`E-mail ${origem === 'outros' ? 'recebido' : 'enviado'}`">
+        <fa-icon :icon="['fas', origem === 'outros' ? 'user' : 'headset']" class="email-to-svg" />
+      </span>
+    </div>
+    <div class="email-custom-buttons" v-if="customButtons && customButtons.length" @click.stop>
+      <span v-for="(button, index) in customButtons" :key="button.id || index" v-show="button.use"
+        @click="button.callback ? button.callback(returnParams(button.params)) : $emit(button.emitName, returnParams(button.params))" :class="`${button.customClass || 'menu-mensagem'}`"
+        v-tippy :content="button.tippyContent">
+        <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
+        <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
+      </span>
+    </div>
+    <div
+      v-if="customActionButtons && customActionButtons.length && customActionButtons[0].type === 'ja-spam'"
+      :key="customActionButtons[0].id"
+      class="ja-marcado-spam"
+    >
+      <span class="icon-tittle-ja-spam">
+        <fa-icon :icon="['fas', 'exclamation-triangle']" style="color:#FF0000; margin-right:8px; font-size:16px;" />
+        {{ customActionButtons[0].label }}
+      </span>
+      <div @click.stop class="ja-marcado-spam-buttons">
+        <button
+      :disabled="customActionButtons[0].btn1.disabled"
+      class="btn-nao-spam"
+      @click="customActionButtons[0].btn1.callback"
+      style="position: relative;"
+    >
+      <VueLoader
+        v-if="customActionButtons[0].btn1.loading"
+        :hasBg="false"
+        class="btn-loader"
+      />
+      <span :style="{ opacity: customActionButtons[0].btn1.loading ? 0 : 1 }">
+        {{ customActionButtons[0].btn1.label }}
+      </span>
+      </button>
+      <button
+        :disabled="customActionButtons[0].btn2.disabled"
+        class="btn-e-spam"
+        @click="customActionButtons[0].btn2.callback"
+        style="position: relative;"
+      >
+        <VueLoader
+          v-if="customActionButtons[0].btn2.loading"
+          :hasBg="false"
+          class="btn-loader"
+        />
+      <span :style="{ opacity: customActionButtons[0].btn2.loading ? 0 : 1 }">
+      <fa-icon v-if="customActionButtons[0].btn2.icon"
+        class="icon-btn-encerrar-spam"
+        :icon="['fas', customActionButtons[0].btn2.icon === 'exit' ? 'sign-out-alt' : customActionButtons[0].btn2.icon]"
+        style="margin-right: 6px;"
+      />
+      {{ customActionButtons[0].btn2.label }}
+    </span>
+  </button>
+      </div>
+    </div>
+    <div class="email-custom-action-buttons" v-if="customActionButtons && customActionButtons.length" @click.stop>
+      <template v-for="(button, index) in customActionButtons">
+        <button
+          v-if="button.type !== 'ja-spam'"
+          :key="button.id || index"
+          v-show="button.use"
+          @click="button.callback(returnParams(button.params))"
+          :class="`${button.customClass || 'email-custom-action-button'}`"
+          v-tippy
+          :content="button.tippyContent"
+        >
+          <fa-icon :icon="['fas', button.icon || 'question-circle']" v-if="!button.svgIcon" />
+          <span v-else v-html="button.svgIcon" :class="button.svgClass ? button.svgClass : ''"></span>
+          <span v-if="button.label" class="email-custom-action-label" v-text="button.label"></span>
+        </button>
+      </template>
+    </div>
+    <div class="email-header" @click.stop="toggleIsOpen">
+      <p class="email-subject" :title="returnMainValue()">
+        {{ returnMainValue() }}
+      </p>
+      <div
+      class="divBtnReplyEmail" :class="[isOpen ? 'reply-email-open' : '']" v-if="status === 'C'">
+        <strong class="strongMsg">{{ status_msg }} </strong>
+        <button
+        v-if="hasReplyEmail"
+          class="btnReplyEmail"
+          @click.stop="emitReplyEmail"
+        ><strong>Reenviar</strong>
+      </button>
+      </div>
+      <div class="header-container">
+        <div :class="`email-header-content${isOpen ? ' open' : ''}`">
+          <div class="email-header-infos">
+            <template>
+              <div v-if="para && para.length" class="email-to-from-container" ref="emailToContainer">
+                <EmailTo v-for="(recipient, index) in para" :key="`to-${recipient.email}`"
+                  :currentName="formattedToName(recipient.name, index, para.length)" :email="recipient.email"
+                  :showMail="isOpen" />
+              </div>
+
+              <div v-if="copia && copia.length" class="email-cc-container">
+                <EmailTo v-for="(recipient, index) in copia" :key="`cc-${recipient.email}`"
+                  :currentName="formattedCcName(recipient.name, index, copia.length)" :email="recipient.email"
+                  :showMail="isOpen" />
+              </div>
+              <div class="email-to-btn" v-show="isOpen" @click.stop="toggleShowInfos()">
+                <fa-icon :icon="['fas', 'caret-down']" />
+              </div>
+            </template>
+            <div v-if="!isMainEmail && isOpen" class="email-subject-secondary">
+              <span class="email-subject-span"
+ v-text="`Assunto: ${htmlEntityToEmoji(replaceUnicodeWithEmoji(assunto)) || '(Sem assunto)'}`"></span>
+            </div>
+          </div>
+        </div>
+        <span :class="`email-date ${isOpen ? isOpenClass : isClosedClass}`" :title="formattedDate" ref="emailDate"
+          v-show="formattedDate">
+          <fa-icon :icon="['fas', 'calendar']" />
+          {{ formattedDate }}
+        </span>
+      </div>
+      <ul v-if="showInfos" ref="emailToInfos" class="email-to-infos box-shadow" v-clickaway="() => showInfos = false"
+        @click.stop>
+        <li v-for="(info, index) in mailInfos" :key="`info-${index}`" class="email-info">
+          <span v-text="info.label"></span>
+          {{ info.value }}
+        </li>
+      </ul>
+      <span v-if="isOpen" :class="['email-actions box-shadow', { active: actionsOpen }, { main: isMainEmail }]"
+        @click.stop="toggleActions">
+        <span></span>
+        <span></span>
+        <span></span>
+      </span>
+      <ul class="email-actions-list box-shadow" v-if="actionsOpen && isOpen" v-clickaway="closeActions" @click.stop>
+        <li class="email-action" @click.stop="toggleOpenMessage">
+          {{ !openMessage ? 'Visualizar' : 'Esconder' }} texto do e-mail (html)
+        </li>
+      </ul>
+    </div>
+    <div class="email-content" v-show="isOpen" ref="emailIframeParent">
+      <VueLoader v-if="isIframeLoading" />
+      <div v-if="hasError" class="email-error-content">
+        <p>Erro ao carregar o e-mail</p>
+        <button class="box-shadow" @click="handleTryAgain()">Tentar novamente</button>
+      </div>
+      <iframe v-show="!hasError" ref="emailIframe"
+        :class="`email-html ${isIframeLoading ? 'visibility-hidden' : ''}`"></iframe>
+      <span class="email-raw" v-if="openMessage">{{ mensagem }}</span>
+    </div>
+    <div v-if="filteredFiles && filteredFiles.length" class="email-files" v-show="isOpen">
+      <EmailFile v-for="(anexo, index) in filteredFiles" :key="index" :anexo="anexo" :dominio="dominio" />
+    </div>
+    <div
+      v-if="filteredFiles && filteredFiles.length && !isOpen"
+      class="email-attachments-clip cursor-pointer"
+      @click.stop="openAndScrollToAttachments"
+    >
+      <span class="clip-icon">
+        <fa-icon :icon="['fas', 'paperclip']" />
+      <span class="clip-badge">{{ filteredFiles.length }}</span>
+  </span>
+</div>
+<!-- Status da mensagem -->
+      <transition name="fade" mode="out-in">
+        <span class="check" v-if="status == 'D'" :content="contentTooltip" v-tippy key="check-padrao">
+          <fa-icon :icon="['fas', 'check']" />
+        </span>
+        <span class="check cinza" v-else-if="status == 'Q'" :content="contentTooltip" v-tippy key="check-cinza">
+          <fa-icon :icon="['fas', 'check']" />
+        </span>
+        <span class="check preto" v-else-if="status == 'G'" :content="contentTooltip" v-tippy key="check-preto">
+          <fa-icon :icon="['fas', 'check']" />
+        </span>
+        <span class="check preto" v-else-if="status == 'E'" :content="contentTooltip" v-tippy key="double-check-preto">
+          <fa-icon :icon="['fas', 'check-double']" />
+        </span>
+        <span class="check visualizado" v-else-if="status == 'L'" :content="contentTooltip" v-tippy
+          key="double-check-visualizado">
+          <fa-icon :icon="['fas', 'check-double']" />
+        </span>
+        <!-- Status finalizador -->
+        <span class="check vermelho" v-else-if="status == 'C' || status == 'ERRO'" :content="contentTooltip" v-tippy
+          key="times-circle">
+          <fa-icon :icon="['fas', 'times-circle']" />
+        </span>
+        <!-- Status finalizador -->
+        <span class="check vermelho" v-else-if="status == 'T'" :content="contentTooltip" v-tippy key="hourglass">
+          <fa-icon :icon="['fas', 'hourglass']" />
+        </span>
+        <!-- Status finalizador -->
+        <span class="check vermelho" v-else-if="status == 'O'" :content="contentTooltip" v-tippy key="deleted">
+          <fa-icon :icon="['fas', 'times']" />
+        </span>
+        <!-- Status de mensagem deletada -->
+      </transition>
+  </div>
+</template>
+
+<script>
+import EmailFile from "./EmailFile.vue";
+import EmailTo from "./EmailTo.vue";
+import { textoLongo } from "@/mixins/formatarTexto";
+import Clickaway from '@/directives/clickaway';
+import '../../styles/style.css';
+
+export default {
+  mixins: [textoLongo],
+  directives: {
+    clickaway: Clickaway
+  },
+  components: { EmailFile, EmailTo },
+  props: {
+    dominio: {
+      type: String,
+      required: true
+    },
+    dicionario: {
+      type: Object,
+      required: true
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    from: {
+      type: Array,
+      default: () => []
+    },
+    para: {
+      type: Array,
+      default: () => []
+    },
+    copia: {
+      type: Array,
+      default: () => []
+    },
+    html: {
+      type: String,
+      default: ""
+    },
+    assunto: {
+      type: String,
+      default: ""
+    },
+    dataHora: {
+      type: String,
+      default: ""
+    },
+    mensagem: {
+      type: String,
+      default: ""
+    },
+    anexos: {
+      type: [Array, String],
+      default: () => []
+    },
+    iniciarAberto: {
+      type: Boolean,
+      default: false
+    },
+    dataServer: {
+      type: String,
+      default: ""
+    },
+    isOpenClass: {
+      type: String,
+      default: 'bg-dark-white-2'
+    },
+    isClosedClass: {
+      type: String,
+      default: 'bg-white'
+    },
+    refKey: {
+      type: String,
+    },
+    showRawMessageInsideEmail: {
+      type: Boolean,
+      default: false
+    },
+    origem: {
+      type: String,
+      default: 'outros'
+    },
+    autor: {
+      type: String
+    },
+    isMainEmail: {
+      type: Boolean,
+      default: true
+    },
+    customButtons: {
+      type: Array
+    },
+    customActionButtons: {
+      type: Array
+    },
+    status: {
+      type: String,
+      default: ''
+    },
+    status_msg: {
+      type: String,
+      default: ''
+    },
+    hasReplyEmail: {
+      type: Boolean,
+      default: false
+    },
+    id_lig: {
+      type: String,
+    },
+    token_cliente: {
+      type: String,
+    },
+    infos: {
+      type: Object,
+      default: () => ({}),
+    },
+    jaMarcadoSpam: {
+      type: Boolean,
+      default: false
+    },
+    msgTooltip: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      isOpen: this.iniciarAberto,
+      openMessage: false,
+      actionsOpen: false,
+      showInfos: false,
+      isIframeLoading: true,
+      hasError: false,
+      errorCount: 0,
+      scrollToFile: false,
+    };
+  },
+  computed: {
+    statusTitle() {
+      if(this.status !== 'C') {
+        return `Enviado por: ${this.autor}`
+      }
+
+      if(!this.status_msg) {
+        return `Enviado com erro por: ${this.autor}` 
+      }
+
+      return `Enviado com erro por: ${this.autor} - ${this.status_msg}`
+    },
+    paraCopia() {
+      if (!this.copia || !this.copia.length) return this.para && this.para.length ? this.para : []
+      return this.para && this.para.length ? this.para.concat(this.copia) : this.copia
+    },
+    formattedDate() {
+      return this.formataDateHoraDateFns(this.dataHora, this.dataServer, this.dicionario);
+    },
+    contentTooltip: {
+          get() {
+            if(!this.status || !this.msgTooltip) return ''
+            if (this.status && !this.msgTooltip) {
+              const msgStatus = "msg_status_" + this.status;
+              return (this.strTooltipAux = this.dicionario[msgStatus]);
+            } else if (this.status && this.msgTooltip) {
+              return (this.strTooltipAux = this.msgTooltip);
+            }
+          },
+          set(msg) {
+            return (this.contentTooltip = msg);
+          },
+        },
+    mailInfos() {
+      const formatAsString = (arr) => {
+        let str = ''
+        arr.forEach(({ name, email }, index) => {
+          if (!name && !email) str += ''
+          else str += `${name || ''} ${email ? `<${email}>` : ''}${((name || email) && index !== arr.length - 1) ? ', ' : ''}`
+        })
+        return str
+      }
+
+      const infos = [
+        {
+          label: 'De:',
+          value: this.from && this.from.length ? formatAsString(this.from) : '--'
+        },
+        {
+          label: 'Para:',
+          value: this.para && this.para.length ? formatAsString(this.para) : '--'
+        },
+        {
+          label: 'Assunto:',
+          value: this.htmlEntityToEmoji(this.replaceUnicodeWithEmoji(this.assunto)) || '(Sem assunto)'
+        },
+        {
+          label: 'Data:',
+          value: this.formataDataHora(this.dataHora) || '--'
+        },
+      ]
+
+      if (this.copia && this.copia.length) {
+        infos.splice(2, 0, {
+          label: `${this.dicionario.tit_copia}:` || 'Copia:',
+          value: formatAsString(this.copia)
+        })
+      }
+
+      return infos
+    },
+    filteredFiles() {
+      if (!this.anexos || !this.anexos.length) return
+
+      return this.anexos.filter(anexo => {
+        return !this.html.includes(anexo.name);
+      })
+    },
+    returnAuthorName() {
+      if (!this.from || !this.from.length) return this.autor || ''
+      const { email, name } = this.from[0]
+      if (!name) return email
+      if (!email) return name
+      if (this.isOpen) return `${name} (${email})`
+      return name
+    },
+    formattedToName() {
+      return (name, index, length) => {
+        let addVirgulaDps = index < length - 1
+        const text = index === 0 ? `Para: ${name || ''}` : name ? `${name}${addVirgulaDps ? ', ' : ''}` : '';
+        return text
+      }
+    },
+    formattedCcName() {
+      return (name, index, length) => {
+        let addVirgulaDps = index < length - 1
+        const text = index === 0 ? `${this.dicionario.tit_copia || 'Cópia'}: ${name || ''}` : name ? `${name}${addVirgulaDps ? ', ' : ''}` : '';
+        return text
+      }
+    }
+  },
+  watch: {
+    isOpen: 'updateIframeContent'
+  },
+  mounted() {
+    this.updateIframeContent();
+    this.adjustMaxWidth()
+
+    if (this.refKey) this.$root.$refs[`${refKey}`] = this
+
+    setTimeout(() => {
+      if (this.isIframeLoading) this.adjustIframeHeight()
+    }, 15000);
+  },
+  methods: {
+    openAndScrollToAttachments() {
+      if (!this.isOpen) {
+        this.scrollToFile = true;
+        this.isIframeLoading = true;
+        this.isOpen = true;
+      } else if (!this.isIframeLoading) {
+        this.scrollToAttachments();
+      } else {
+        this.scrollToFile = true;
+      }
+    },
+    scrollToAttachments() {
+      this.$nextTick(() => {
+        const files = this.$el.querySelector('.email-files');
+        if (files) {
+          files.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      });
+    },
+    handleTryAgain() {
+      this.isOpen = true
+      this.isIframeLoading = true
+      this.hasError = false
+
+      this.$nextTick(this.updateIframeContent())
+    },
+
+    emitReplyEmail() {
+      if(!this.hasReplyEmail) return
+
+      this.$emit('reply-email', {
+        html: this.html,
+        mensagem: this.mensagem,
+        assunto: this.assunto,
+        from: this.from,
+        para: this.para,
+        dataHora: this.dataHora,
+        anexos: this.anexos,
+        status: this.status,
+        status_msg: this.status_msg,
+        copia: this.copia,
+        origem: this.origem,
+        autor: this.autor,
+        id_lig: this.id_lig,
+        token_cliente: this.token_cliente,
+        infos: this.infos,
+      });
+    },
+
+    gerarMensagemEstilizada(msg) {
+      try {
+        const currentStyles = [
+          { tagAbertura: "<i>", tagFechamento: "</i>", find: /_(.*?)_/g },
+          { tagAbertura: "<b>", tagFechamento: "</b>", find: /\*(.*?)\*/g },
+          { tagAbertura: "<del>", tagFechamento: "</del>", find: /~(.*?)~/g }
+        ]
+
+        const isLetterOrUnderscore = (char) => {
+          return /[a-zA-Z_]/.test(char)
+        }
+
+        const isValidMatch = (message, fullMatch, startIndex) => {
+          const beforeChar = message[startIndex - 1]
+          const afterChar = message[startIndex + fullMatch.length]
+          return (
+            (beforeChar === undefined || !isLetterOrUnderscore(beforeChar)) &&
+            (afterChar === undefined || !isLetterOrUnderscore(afterChar))
+          )
+        }
+
+        let message = msg
+
+        for (const { tagAbertura, tagFechamento, find } of currentStyles) {
+          let match
+          while ((match = find.exec(message)) !== null) {
+            const fullMatch = match[0]
+            const content = match[1]
+            const startIndex = match.index
+
+            if (isValidMatch(message, fullMatch, startIndex)) {
+              const endIndex = startIndex + fullMatch.length
+              const replacedContent = `${tagAbertura}${content}${tagFechamento}`
+              message = message.slice(0, startIndex) + replacedContent + message.slice(endIndex)
+            }
+          }
+        }
+
+        return message
+      } catch (err) {
+        console.error('Erro ao gerar mensagem estilizada: ', err)
+        return msg
+      }
+    },
+    updateIframeContent() {
+      this.$nextTick(() => {
+        if (this.isOpen && this.isIframeLoading) {
+          const iframe = this.$refs.emailIframe;
+          if (!iframe) {
+            console.warn('Iframe not found');
+            this.isIframeLoading = false
+            return
+          }
+          const doc = iframe.contentDocument || iframe.contentWindow.document;
+          if (!doc) {
+            console.warn('Document not found in iframe');
+            this.isIframeLoading = false
+            return
+          }
+          let content = this.html || ''
+          if(!content || !content.length) {
+            console.warn('No content to display in iframe');
+            this.isIframeLoading = false
+            return
+          }
+          if (!/<[a-z][\s\S]*>/i.test(content)) {
+            content = content.replace(/\n/g, '<br>');
+            content = this.gerarMensagemEstilizada(content)
+            content = `<p>${content}</p>`;
+          }
+
+          doc.open();
+          doc.write(content);
+          doc.close();
+
+          const images = doc.getElementsByTagName('img');
+          let imagesLoaded = 0;
+
+          const imageLoadHandler = () => {
+            imagesLoaded++;
+            if (imagesLoaded === images.length) {
+              this.adjustIframeHeight();
+            }
+          };
+
+          if (images.length === 0) {
+            this.adjustIframeHeight();
+          } else {
+            for (let img of images) {
+              img.addEventListener('load', imageLoadHandler);
+              img.addEventListener('error', imageLoadHandler);
+            }
+          }
+        }
+      });
+    },
+    adjustIframeHeight() {
+      this.$nextTick(() => {
+        const iframe = this.$refs.emailIframe;
+        const emailParent = this.$refs.emailIframeParent
+        if (iframe && emailParent) {
+          setTimeout(() => {
+            const doc = iframe.contentDocument || iframe.contentWindow.document;
+            const margin = 20
+            const value = doc.documentElement.offsetHeight + margin
+            if (value === 0 || doc.documentElement.querySelector('body').innerHTML === '') {
+              this.errorCount++
+              if (this.errorCount > 3) {
+                this.hasError = true
+                if (this.isIframeLoading) this.isIframeLoading = false
+                return
+              }
+              this.isIframeLoading = true
+              this.updateIframeContent()
+              return
+            }
+            if (this.hasError || this.errorCount > 0) {
+              this.hasError = false
+              this.errorCount = 0
+            }
+            iframe.style.height = `${value}px`;
+            emailParent.style.minHeight = `${value}px`
+            if (this.scrollToFile) {
+              this.scrollToFile = false;
+              this.scrollToAttachments();
+            }
+          }, 100)
+        }
+
+        if (this.isIframeLoading) this.isIframeLoading = false
+      });
+    },
+    toggleShowInfos() {
+      this.showInfos = !this.showInfos;
+      if (this.showInfos) {
+        this.$nextTick(() => {
+          this.adjustTopPosition();
+        });
+      }
+    },
+    adjustTopPosition() {
+      const ulElement = this.$refs.emailToInfos;
+      if (!ulElement) return
+      const ulHeight = ulElement.offsetHeight;
+      const maxHeight = 300
+      const finalHeight = ulHeight < maxHeight ? ulHeight : maxHeight
+      ulElement.style.bottom = `-${finalHeight}px`;
+    },
+    toggleIsOpen() {
+      this.isOpen = !this.isOpen;
+      if (this.isOpen) {
+        this.isIframeLoading = true;
+      } else {
+        this.actionsOpen = false;
+        this.openMessage = false;
+        this.showInfos = false;
+        this.scrollToFile = false;
+      }
+    },
+    adjustMaxWidth() {
+      this.$nextTick(() => {
+        const toContainer = this.$refs.emailToContainer
+        const dateContainer = this.$refs.emailDate
+        if (!toContainer || !dateContainer) return
+        toContainer.style.maxWidth = `calc(100% - ${dateContainer.offsetWidth}px)`
+      })
+    },
+    toggleActions() {
+      this.actionsOpen = !this.actionsOpen;
+    },
+    toggleOpenMessage() {
+      if (this.showRawMessageInsideEmail) {
+        this.openMessage = !this.openMessage;
+      }
+
+      this.$emit('open-message', {
+        dicionario: this.dicionario,
+        from: this.from,
+        para: this.para,
+        html: this.html,
+        assunto: this.assunto,
+        dataHora: this.dataHora,
+        mensagem: this.mensagem,
+        anexos: this.filteredFiles,
+        dataServer: this.dataServer,
+        dominio: this.dominio
+      })
+    },
+    closeActions() {
+      this.actionsOpen = false;
+    },
+    returnMainValue() {
+      if (this.isMainEmail) return this.htmlEntityToEmoji(this.replaceUnicodeWithEmoji(this.assunto)) || '(Sem assunto)'
+      return ''
+    },
+    openByItem(event) {
+      if (this.isOpen) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      this.toggleIsOpen();
+    },
+    returnParams(params) {
+      const defaultParams = {
+        message: this.mensagem,
+      };
+
+      if (!params) return defaultParams;
+
+      const keys = params.instanceKeys.split("|");
+      if (!keys || !keys.length)
+        return {
+          defaultParams,
+          ...params.values,
+        };
+
+      const customParams = { ...params.values };
+      keys.forEach((key) => {
+        if (this[key]) customParams[key] = this[key];
+        else console.warn(`Cant find ${key} on 'this' instance`);
+      });
+
+      return Object.keys(customParams).length ? customParams : defaultParams;
+    }
+  }
+};
+</script>