<template>
  <div class="mail-container">
    <!-- 左侧账户与文件夹栏 -->
    <div class="mail-sidebar">
      <div class="sidebar-header">
        <el-button type="primary" class="compose-btn" icon="Edit" @click="handleCompose">写邮件</el-button>
      </div>
      
      <el-scrollbar class="account-list">
        <div v-for="config in configList" :key="config.configId" class="account-group">
          <div class="account-title" @click="toggleAccount(config.configId)">
            <el-icon><Message /></el-icon>
            <span class="text-truncate">{{ config.configName }}</span>
          </div>
          
          <div v-if="activeAccount === config.configId" class="folder-list">
            <div class="folder-item" :class="{ active: currentFolder === 'all' }" @click="switchFolder('all')">
              <span class="folder-name"><el-icon><Files /></el-icon> 全部邮件</span>
            </div>
            <div class="folder-item" :class="{ active: currentFolder === 'unread' }" @click="switchFolder('unread')">
              <span class="folder-name"><el-icon><Bell /></el-icon> 未读邮件</span>
              <el-badge :value="config.unreadCount" v-if="config.unreadCount > 0" class="unread-badge" type="danger" />
            </div>
            <div class="folder-item" :class="{ active: currentFolder === 'starred' }" @click="switchFolder('starred')">
              <span class="folder-name"><el-icon><Star /></el-icon> 星标邮件</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
      
      <div class="sidebar-footer">
        <el-button link icon="Setting" @click="$router.push('/system/mail/config')">邮箱配置</el-button>
      </div>
    </div>

    <!-- 中间邮件列表栏 -->
    <div class="mail-list-panel">
      <div class="list-header">
        <div class="search-box">
          <el-input 
            v-model="queryParams.subject" 
            placeholder="搜索邮件主题..." 
            prefix-icon="Search"
            clearable
            @keyup.enter="handleQuery"
            @clear="handleQuery"
          />
        </div>
        <div class="list-actions">
          <el-tooltip content="全部标为已读" placement="bottom">
            <el-button plain size="small" @click="markAllAsRead">全部已读</el-button>
          </el-tooltip>
          <el-tooltip :content="syncing ? '正在同步中...' : '同步邮件'" placement="bottom">
            <el-button class="sync-btn" circle @click="handleSync" :disabled="syncing">
              <el-icon :class="{ 'is-syncing': syncing }"><Refresh /></el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </div>

      <div class="list-filter" v-if="total > 0">
        <span>共 {{ total }} 封邮件</span>
        <div class="pagination-simple">
          <el-button link size="small" :disabled="queryParams.pageNum <= 1" @click="prevPage"><el-icon><ArrowLeft /></el-icon></el-button>
          <span>{{ queryParams.pageNum }}</span>
          <el-button link size="small" :disabled="queryParams.pageNum * queryParams.pageSize >= total" @click="nextPage"><el-icon><ArrowRight /></el-icon></el-button>
        </div>
      </div>

      <el-scrollbar class="mail-list-scroll" v-loading="loading">
        <div v-if="inboxList.length > 0">
          <div 
            v-for="mail in inboxList" 
            :key="mail.inboxId" 
            class="mail-item" 
            :class="{ active: currentMail && currentMail.inboxId === mail.inboxId, unread: mail.isRead === '0' }"
            @click="handleMailClick(mail)"
          >
            <div class="mail-item-left">
              <el-avatar :size="36" :style="{ backgroundColor: getAvatarColor(mail.fromName || mail.fromAddress) }">
                {{ (mail.fromName || mail.fromAddress || '?').charAt(0).toUpperCase() }}
              </el-avatar>
            </div>
            <div class="mail-item-right">
              <div class="mail-item-header">
                <span class="sender-name text-truncate" :title="mail.fromName || mail.fromAddress">{{ mail.fromName || mail.fromAddress }}</span>
                <span class="mail-time">{{ formatTime(mail.receiveTime) }}</span>
              </div>
              <div class="mail-item-subject text-truncate">
                <span v-if="mail.isRead === '0'" class="unread-dot"></span>
                <el-icon v-if="mail.isStarred === '1'" class="icon-star"><StarFilled /></el-icon>
                <el-tag v-if="mail.hasAttachment === '1'" size="small" type="info" effect="plain" class="attachment-tag">
                  <el-icon><Paperclip /></el-icon>
                </el-tag>
                {{ mail.subject }}
              </div>
              <div class="mail-item-snippet text-truncate">
                {{ getSnippet(mail.content) }}
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无邮件" :image-size="80" />
      </el-scrollbar>
    </div>

    <!-- 右侧阅读窗格 -->
    <div class="mail-detail-panel">
      <div v-if="currentMail" class="detail-container">
        <!-- 工具栏 -->
        <div class="detail-toolbar">
          <div class="toolbar-left">
            <el-tooltip content="回复" placement="bottom">
              <el-button plain circle icon="Position" @click="handleReply"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="bottom">
              <el-button plain circle type="danger" icon="Delete" @click="handleDelete"></el-button>
            </el-tooltip>
            <el-divider direction="vertical" />
            <el-tooltip :content="currentMail.isStarred === '1' ? '取消星标' : '星标'" placement="bottom">
              <el-button plain circle :type="currentMail.isStarred === '1' ? 'warning' : 'default'" @click="handleToggleStar">
                <el-icon><component :is="currentMail.isStarred === '1' ? 'StarFilled' : 'Star'" /></el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip content="标为已读" placement="bottom" v-if="currentMail.isRead === '0'">
              <el-button plain circle icon="Message" @click="handleMarkRead"></el-button>
            </el-tooltip>
          </div>
          <div class="toolbar-right">
          </div>
        </div>

        <!-- 邮件头 -->
        <el-scrollbar class="detail-content-scroll">
          <div class="mail-header">
            <h1 class="mail-subject">{{ currentMail.subject }}</h1>
            <div class="mail-meta">
              <div class="sender-avatar">
                <el-avatar :size="48" :style="{ backgroundColor: getAvatarColor(currentMail.fromName || currentMail.fromAddress) }">
                  {{ (currentMail.fromName || currentMail.fromAddress || '?').charAt(0).toUpperCase() }}
                </el-avatar>
              </div>
              <div class="meta-info">
                <div class="sender-row">
                  <span class="sender-name">{{ currentMail.fromName }}</span>
                  <span class="sender-email">&lt;{{ currentMail.fromAddress }}&gt;</span>
                </div>
                <div class="recipient-row">
                  <span>发给：{{ currentMail.toAddress }}</span>
                  <el-popover placement="bottom" title="详细信息" :width="400" trigger="click">
                    <template #reference>
                      <el-button link size="small">详情 <el-icon><CaretBottom /></el-icon></el-button>
                    </template>
                    <el-descriptions :column="1" size="small" border>
                      <el-descriptions-item label="发件人">{{ currentMail.fromName }} &lt;{{ currentMail.fromAddress }}&gt;</el-descriptions-item>
                      <el-descriptions-item label="收件人">{{ currentMail.toAddress }}</el-descriptions-item>
                      <el-descriptions-item label="抄送" v-if="currentMail.ccAddress">{{ currentMail.ccAddress }}</el-descriptions-item>
                      <el-descriptions-item label="时间">{{ currentMail.receiveTime }}</el-descriptions-item>
                    </el-descriptions>
                  </el-popover>
                </div>
              </div>
              <div class="mail-date">
                {{ currentMail.receiveTime }}
              </div>
            </div>
            
            <div v-if="currentMail.hasAttachment === '1' && getAttachments(currentMail).length > 0" class="mail-attachments">
              <div class="attachments-header">
                <el-icon><Paperclip /></el-icon>
                <span>附件 ({{ getAttachments(currentMail).length }})</span>
              </div>
              <div class="attachments-list">
                <div v-for="(att, idx) in getAttachments(currentMail)" :key="idx" class="attachment-item">
                  <el-icon><Document /></el-icon>
                  <span class="att-name">{{ att.fileName }}</span>
                  <span class="att-size">{{ formatFileSize(att.size) }}</span>
                  <span class="att-tip">请从原邮箱下载</span>
                </div>
              </div>
            </div>
          </div>

          <el-divider />

          <!-- 邮件内容 -->
          <div class="mail-body">
            <div v-if="isHtmlContent(currentMail.content)" v-html="currentMail.content" class="html-content"></div>
            <div v-else class="text-content">{{ currentMail.content }}</div>
          </div>
        </el-scrollbar>
      </div>
      
      <div v-else class="empty-selection">
        <div class="empty-content">
          <el-icon class="empty-icon"><Message /></el-icon>
          <h3>选择一封邮件开始阅读</h3>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="MailInbox">
import { 
  Message, Star, StarFilled, Delete, Refresh, Search, 
  Files, Bell, Edit, Paperclip, ArrowLeft, ArrowRight,
  Position, CaretBottom, Setting, Document, Download
} from '@element-plus/icons-vue'
import { getEnabledConfigList, listMailInbox, getMailInbox, toggleStar, delMailInbox, syncMails, getUnreadCount, markAsRead, batchMarkAsRead, markAllAsReadByConfig } from "@/api/system/mail"
import { useRouter } from 'vue-router'
import request from '@/utils/request'

const router = useRouter()
const { proxy } = getCurrentInstance()

// 数据状态
const configList = ref([])
const activeAccount = ref(null)
const currentFolder = ref('all') // all, unread, starred
const inboxList = ref([])
const currentMail = ref(null)
const loading = ref(false)
const syncing = ref(false)
const total = ref(0)

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  configId: null,
  subject: '',
  isRead: null,
  isStarred: null
})

// 头像颜色
const avatarColors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#36cfc9', '#9254de', '#ff7875']

/** 获取头像颜色 */
function getAvatarColor(name) {
  if (!name) return avatarColors[0]
  let hash = 0
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash)
  }
  return avatarColors[Math.abs(hash) % avatarColors.length]
}

/** 提取纯文本摘要 */
function getSnippet(content) {
  if (!content) return ''
  // 使用正则去除HTML标签，避免触发图片加载
  let text = content
    .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '') // 移除style标签
    .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') // 移除script标签
    .replace(/<[^>]+>/g, ' ') // 移除所有HTML标签
    .replace(/&nbsp;/gi, ' ') // 替换&nbsp;
    .replace(/&lt;/gi, '<')
    .replace(/&gt;/gi, '>')
    .replace(/&amp;/gi, '&')
    .replace(/&quot;/gi, '"')
    .replace(/\s+/g, ' ') // 压缩空格
    .trim()
  return text.length > 50 ? text.substring(0, 50) + '...' : text
}

/** 格式化时间 */
function formatTime(time) {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const isToday = date.toDateString() === now.toDateString()
  if (isToday) {
    return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  }
  const isThisYear = date.getFullYear() === now.getFullYear()
  if (isThisYear) {
    return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' })
  }
  return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' })
}

/** 解析附件列表 */
function getAttachments(mail) {
  if (!mail || !mail.attachments) return []
  try {
    return JSON.parse(mail.attachments)
  } catch (e) {
    return []
  }
}

/** 格式化文件大小 */
function formatFileSize(size) {
  if (!size || size < 0) return '未知'
  if (size < 1024) return size + ' B'
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'
  return (size / 1024 / 1024).toFixed(1) + ' MB'
}

/** 判断内容是否为HTML */
function isHtmlContent(content) {
  if (!content) return false
  // 检测是否包含常见HTML标签
  return /<[a-z][\s\S]*>/i.test(content)
}

/** 处理邮件内容中加载失败的图片 */
function handleBrokenImages() {
  nextTick(() => {
    const images = document.querySelectorAll('.html-content img')
    images.forEach(img => {
      img.onerror = function() {
        this.style.display = 'none'
      }
    })
  })
}

// 监听邮件变化，处理图片
watch(currentMail, (val) => {
  if (val) {
    handleBrokenImages()
  }
})

/** 加载配置列表 */
function loadConfigList() {
  getEnabledConfigList().then(res => {
    configList.value = (res.data || []).map(c => ({...c, unreadCount: 0}))
    if (configList.value.length > 0) {
      // 默认选中第一个
      if (!activeAccount.value) {
        toggleAccount(configList.value[0].configId)
        // 首次进入页面自动同步邮件
        setTimeout(() => handleSync(), 300)
      }
      // 加载所有账户的未读数
      configList.value.forEach(c => loadUnreadCount(c))
    }
  })
}

/** 加载单个账户未读数 */
function loadUnreadCount(config) {
  getUnreadCount(config.configId).then(res => {
    config.unreadCount = res.data || 0
  })
}

/** 切换账户 */
function toggleAccount(configId) {
  if (activeAccount.value === configId) return
  activeAccount.value = configId
  queryParams.configId = configId
  currentFolder.value = 'all' // 重置为全部
  resetFilters()
  getList()
}

/** 切换文件夹 */
function switchFolder(folder) {
  currentFolder.value = folder
  resetFilters()
  if (folder === 'unread') {
    queryParams.isRead = '0'
  } else if (folder === 'starred') {
    queryParams.isStarred = '1'
  }
  queryParams.pageNum = 1
  getList()
}

/** 重置过滤条件 */
function resetFilters() {
  queryParams.isRead = null
  queryParams.isStarred = null
}

/** 查询列表 */
function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

/** 获取邮件列表 */
function getList() {
  if (!queryParams.configId) return
  loading.value = true
  listMailInbox(queryParams).then(res => {
    inboxList.value = res.rows
    total.value = res.total
    loading.value = false
    // 如果当前选中的邮件不在新列表中，清空选中
    if (currentMail.value && !inboxList.value.find(m => m.inboxId === currentMail.value.inboxId)) {
      currentMail.value = null
    }
  }).catch(() => {
    loading.value = false
  })
}

/** 上一页 */
function prevPage() {
  if (queryParams.pageNum > 1) {
    queryParams.pageNum--
    getList()
  }
}

/** 下一页 */
function nextPage() {
  if (queryParams.pageNum * queryParams.pageSize < total.value) {
    queryParams.pageNum++
    getList()
  }
}

/** 同步邮件 */
function handleSync() {
  // 如果正在同步中，阻止再次点击
  if (syncing.value) {
    proxy.$modal.msgWarning('正在同步中，请稍后...')
    return
  }
  
  if (!activeAccount.value) {
    console.log('同步失败: activeAccount 未设置')
    proxy.$modal.msgWarning('请先选择邮箱账户')
    return
  }
  console.log('开始同步邮件, configId:', activeAccount.value)
  syncing.value = true
  syncMails(activeAccount.value).then(res => {
    console.log('同步结果:', res)
    const count = res.data || 0
    proxy.$modal.msgSuccess(`同步完成，新增 ${count} 封邮件`)
    getList()
    // 更新未读数
    const config = configList.value.find(c => c.configId === activeAccount.value)
    if (config) loadUnreadCount(config)
  }).catch(err => {
    console.error('同步失败:', err)
    proxy.$modal.msgError('同步失败: ' + (err.message || '未知错误'))
  }).finally(() => {
    syncing.value = false
  })
}

/** 点击邮件 */
function handleMailClick(mail) {
  if (currentMail.value && currentMail.value.inboxId === mail.inboxId) return
  
  // 先从列表数据快速展示
  currentMail.value = mail
  
  // 获取详情（更新已读状态）
  getMailInbox(mail.inboxId).then(res => {
    currentMail.value = res.data
    // 本地更新列表状态
    if (mail.isRead === '0') {
      mail.isRead = '1'
      // 更新左侧未读数
      const config = configList.value.find(c => c.configId === activeAccount.value)
      if (config && config.unreadCount > 0) config.unreadCount--
    }
  })
}

/** 切换星标 */
function handleToggleStar() {
  if (!currentMail.value) return
  const newValue = currentMail.value.isStarred === '1' ? '0' : '1'
  toggleStar(currentMail.value.inboxId).then(() => {
    currentMail.value.isStarred = newValue
    const item = inboxList.value.find(m => m.inboxId === currentMail.value.inboxId)
    if (item) item.isStarred = newValue
    proxy.$modal.msgSuccess(newValue === '1' ? '已标为星标邮件' : '已取消星标')
  })
}

/** 标为已读 */
function handleMarkRead() {
  if (!currentMail.value || currentMail.value.isRead === '1') return
  markAsRead(currentMail.value.inboxId).then(() => {
    currentMail.value.isRead = '1'
    const item = inboxList.value.find(m => m.inboxId === currentMail.value.inboxId)
    if (item) {
      item.isRead = '1'
      // 更新未读数
      const config = configList.value.find(c => c.configId === activeAccount.value)
      if (config && config.unreadCount > 0) config.unreadCount--
    }
  })
}

/** 删除邮件 */
function handleDelete() {
  if (!currentMail.value) return
  proxy.$modal.confirm('确定要删除这封邮件吗？').then(() => {
    return delMailInbox(currentMail.value.inboxId)
  }).then(() => {
    proxy.$modal.msgSuccess('删除成功')
    getList()
    currentMail.value = null
  })
}

/** 全部标为已读 */
function markAllAsRead() {
  const config = configList.value.find(c => c.configId === activeAccount.value)
  if (!config || config.unreadCount === 0) {
    proxy.$modal.msgInfo('没有未读邮件')
    return
  }
  
  proxy.$modal.confirm(`确定要将 ${config.unreadCount} 封未读邮件标为已读吗？`).then(() => {
    // 调用后端接口直接标记当前账户的所有未读邮件
    return markAllAsReadByConfig(activeAccount.value)
  }).then(() => {
    proxy.$modal.msgSuccess('已全部标为已读')
    // 更新列表
    inboxList.value.forEach(m => {
      if (m.isRead === '0') m.isRead = '1'
    })
    // 更新未读数
    config.unreadCount = 0
    currentMail.value = null
  }).catch(() => {
    // 用户取消
  })
}

/** 写邮件 */
function handleCompose() {
  router.push('/system/mail/send')
}

/** 回复邮件 */
function handleReply() {
  if (!currentMail.value) return
  // 构造引用原文
  const mail = currentMail.value
  const quoteContent = `<br/><br/>---原始邮件---<br/>发件人: ${mail.fromName || mail.fromAddress}<br/>时间: ${mail.receiveTime}<br/>主题: ${mail.subject}<br/><br/>${mail.content || ''}`
  
  router.push({
    path: '/system/mail/send',
    query: {
      to: mail.fromAddress,
      subject: 'Re: ' + (mail.subject || '(无主题)'),
      content: encodeURIComponent(quoteContent)
    }
  })
}

// 初始化
loadConfigList()
</script>

<style scoped>
.mail-container {
  display: flex;
  height: calc(100vh - 84px); /* 减去顶部导航高度 */
  background-color: #f5f7fa;
  border: 1px solid #e6e6e6;
  margin: 0;
  overflow: hidden;
}

/* 左侧边栏 */
.mail-sidebar {
  width: 240px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.compose-btn {
  width: 100%;
}

.account-list {
  flex: 1;
}

.account-group {
  margin-bottom: 8px;
}

.account-title {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  color: #303133;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #fafafa;
}
.account-title:hover {
  background-color: #f0f0f0;
}

.folder-list {
  padding: 4px 0;
}

.folder-item {
  padding: 8px 16px 8px 32px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #606266;
  font-size: 14px;
}
.folder-item:hover {
  background-color: #f5f7fa;
}
.folder-item.active {
  background-color: #ecf5ff;
  color: #409eff;
  font-weight: 500;
}
.folder-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

/* 中间邮件列表 */
.mail-list-panel {
  width: 320px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  display: flex;
  flex-direction: column;
}

.list-header {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 8px;
}
.search-box {
  flex: 1;
}

.list-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.is-syncing {
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.list-filter {
  padding: 8px 12px;
  background-color: #f9fafe;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
  color: #909399;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mail-list-scroll {
  flex: 1;
}

.mail-item {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  display: flex;
  gap: 12px;
  transition: background-color 0.2s;
}
.mail-item:hover {
  background-color: #f5f7fa;
}
.mail-item.active {
  background-color: #ecf5ff;
  border-left: 3px solid #409eff;
}
.mail-item.unread {
  background-color: #f0f9ff;
  border-left: 3px solid #67c23a;
}
.mail-item.unread .mail-item-subject {
  font-weight: 700;
  color: #303133;
}
.mail-item.unread .sender-name {
  font-weight: 700;
  color: #303133;
}
.mail-item.unread .mail-item-header {
  font-weight: 600;
}

.mail-item-right {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mail-item-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  align-items: center;
}
.sender-name {
  color: #606266;
  max-width: 140px;
}
.mail-time {
  color: #909399;
  font-size: 12px;
}

.mail-item-subject {
  font-size: 13px;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 4px;
}
.icon-star {
  color: #e6a23c;
  font-size: 14px;
}

.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #409eff;
  margin-right: 4px;
  flex-shrink: 0;
}

.mail-item-snippet {
  font-size: 12px;
  color: #909399;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧详情 */
.mail-detail-panel {
  flex: 1;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-toolbar {
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}
.toolbar-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.detail-content-scroll {
  flex: 1;
  padding: 0;
}

.mail-header {
  padding: 24px 32px 16px;
}

.mail-subject {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.mail-meta {
  display: flex;
  gap: 16px;
  position: relative;
}

.meta-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sender-row {
  font-size: 14px;
  color: #303133;
}
.sender-name {
  font-weight: 600;
  margin-right: 8px;
}
.sender-email {
  color: #909399;
}

.recipient-row {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
}

.mail-date {
  font-size: 12px;
  color: #909399;
}

.mail-attachments {
  margin-top: 16px;
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
}
.attachments-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #606266;
  margin-bottom: 10px;
}
.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
}
.attachment-item .att-name {
  flex: 1;
  font-size: 13px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-item .att-size {
  font-size: 12px;
  color: #909399;
}

.mail-body {
  padding: 24px 32px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.html-content :deep(img) {
  max-width: 100%;
}
/* 隐藏加载失败的图片 */
.html-content :deep(img[src=""]),
.html-content :deep(img:not([src])) {
  display: none;
}
.html-content :deep(blockquote) {
  border-left: 2px solid #ccc;
  margin-left: 0;
  padding-left: 10px;
  color: #666;
}

.text-content {
  white-space: pre-wrap;
  font-family: inherit;
}

.empty-selection {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-content {
  text-align: center;
  color: #909399;
}
.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  color: #dcdfe6;
}
</style>
