<template>
  <view class="container">
    <!-- 使用骨架屏组件 -->
    <tui-skeleton 
      v-if="skeletonShow" 
      backgroundColor="#f8f8f8" 
      skeletonBgColor="#eeeeee"
      animation="blink"
    ></tui-skeleton>

    <tui-tabs :tabs="tabs" :isFixed="false" :currentTab="currentTab" itemWidth="25%" @change="changeTab"></tui-tabs>
    
    <!-- H5平台下拉刷新提示 -->
    <view class="pull-refresh-indicator" v-if="isPullingDown && isH5">
      <view class="refresh-icon" :class="{'refreshing': refreshing}">↓</view>
      <text>{{ refreshing ? '刷新中...' : '下拉可以刷新' }}</text>
    </view>
    
    <scroll-view 
      ref="scrollViewRef"
      scroll-y
      class="mail-list"
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scroll="onScroll"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <!-- 骨架屏内容结构 -->
      <view class="tui-skeleton">
        <!-- 邮件卡片列表 -->
        <view v-if="mailList.length > 0" class="mail-list-inner">
          <view 
            class="mail-card" 
            v-for="(mail, index) in mailList" 
            :key="mail.id"
            :class="[getStatusClass(mail.status), {'new-card': mail.isNew}]"
            hover-class="card-hover"
            @tap="viewDetail(mail)"
          >
            <!-- 卡片头部：订单号和状态 -->
            <view class="card-header tui-skeleton-rect">
              <view class="order-label">
                <text class="order-dot" :class="getStatusClass(mail.status)"></text>
                <text class="order-number">订单号: {{mail.orderNumber}}</text>
              </view>
              <view class="status-badge" :class="getStatusClass(mail.status)">{{getStatusText(mail.status)}}</view>
            </view>
            
            <!-- 卡片内容 -->
            <view class="card-content">
              <!-- 收信人和内容区域，移除多余背景和边框 -->
              <view class="message-content">
                <view class="recipient-row">
                  <text class="label-text">联系人：</text>
                  <text class="recipient-value tui-skeleton-rect">{{mail.recipient}}</text>
                </view>
                <view class="content-row">
                  <text class="content-value tui-skeleton-rect">{{formatContent(mail.content)}}</text>
                </view>
              </view>
              
              <!-- 时间信息 -->
              <view class="time-row tui-skeleton-rect">
                <text class="time-label">{{ mail.status === MailStatus.SENT ? '发送' : '提交' }}于</text>
                <text class="time-value">{{ formatTime(mail.status === MailStatus.SENT ? mail.sendTime : mail.submitTime) }}</text>
              </view>
            </view>
          </view>
          
          <!-- H5加载更多按钮 -->
          <view v-if="isH5 && showLoadMoreButton && hasMore" class="load-more-button" @click="loadMore">
            {{loadMoreButtonText}}
          </view>
        </view>
        
        <!-- 加载状态 -->
        <view v-if="loading && mailList.length > 0 && !refreshing" class="loading-state">
          <view class="loading-dot"></view>
          <view class="loading-dot"></view>
          <view class="loading-dot"></view>
        </view>
        
        <view class="no-more" v-if="!hasMore && mailList.length > 0">
          <view class="no-more-line"></view>
          <text class="no-more-text">已经到底了</text>
          <view class="no-more-line"></view>
        </view>
        
        <!-- 空状态显示 - 使用SVG图片 -->
        <view class="empty-state" v-if="!loading && mailList.length === 0">
          <image class="empty-image tui-skeleton-rect" src="@/assets/nodata.svg" mode="aspectFit"></image>
          <text class="empty-text tui-skeleton-rect">暂无短信</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>


<script setup lang="ts">
import { onTabItemTap} from "@dcloudio/uni-app";
import {useSwitchTab} from "@/stores/switchTab";
import {USE_ABS_PATH} from "@/constants/glable";
import TuiTabs from "@/components/thorui/tui-tabs/tui-tabs.vue";
import TuiSkeleton from "@/components/thorui/tui-skeleton/tui-skeleton.vue";
import { ref, onMounted, computed, onUnmounted } from "vue";

// 邮件状态枚举
enum MailStatus {
  PENDING = 0,  // 待发送
  SENT = 1,     // 已发送
  FAILED = 2,   // 发送失败
}

// 邮件类型接口
interface Mail {
  id: number;
  orderNumber: string;
  recipient: string;
  content: string;
  sendTime: string;
  submitTime: string;
  status: MailStatus;
  price: number;
  isNew: boolean;
}

const isLogin = ref<boolean>(false);
const currentTab = ref<number>(0);
const tabs = ref([
  { name: "全部"},
  { name: "待发送"},
  { name: "已发送"},
  { name: "发送失败"}
]);

// 列表相关状态
const mailList = ref<Mail[]>([]);
const page = ref<number>(1);
const pageSize = ref<number>(5);
const loading = ref<boolean>(false);
const hasMore = ref<boolean>(true);
const refreshing = ref<boolean>(false);
const skeletonShow = ref<boolean>(true);
const scrollViewRef = ref<any>(null); // 滚动视图引用
const scrollHeight = ref<number>(0); // 滚动容器高度
const contentHeight = ref<number>(0); // 内容总高度
const showLoadMoreButton = ref<boolean>(false); // 是否显示加载更多按钮
const isTabSwitching = ref<boolean>(false); // 标记正在切换标签，防止重复触发加载更多

const switchTab = useSwitchTab();
const originalPagePath = switchTab.lastPage;

// 平台检测和下拉刷新相关状态
const isH5 = ref<boolean>(false);
const isPullingDown = ref<boolean>(false);
const startY = ref<number>(0);
const scrollTop = ref<number>(0);
const pullDistance = ref<number>(0);
const PULL_THRESHOLD = 60; // 下拉刷新阈值
const LOAD_MORE_THRESHOLD = 50; // 加载更多阈值，距离底部多少像素触发

// 加载更多按钮状态
const loadMoreButtonText = computed(() => {
  if (loading.value) return '加载中...';
  if (!hasMore.value) return '已经到底了';
  return '点击加载更多';
});

// 检测平台类型 - 更加可靠的运行时检测
const checkPlatform = () => {
  // 检查是否是浏览器环境
  isH5.value = typeof window !== 'undefined' && typeof document !== 'undefined';
  console.log('运行环境:', isH5.value ? 'H5/浏览器' : '非H5环境');
  
  // 如果是H5环境，设置window滚动监听
  if (isH5.value) {
    // 延迟获取滚动容器高度
    setTimeout(() => {
      updateScrollHeights();
    }, 500);
  }
};

// 更新滚动高度信息
const updateScrollHeights = () => {
  if (!isH5.value) return;
  
  try {
    const scrollViewElement = document.querySelector('.mail-list');
    const contentElement = document.querySelector('.mail-list-inner');
    
    if (scrollViewElement && contentElement) {
      scrollHeight.value = scrollViewElement.clientHeight;
      contentHeight.value = contentElement.scrollHeight;
      
      console.log('Scroll Heights -', 'Container:', scrollHeight.value, 'Content:', contentHeight.value);
    }
  } catch (error) {
    console.error('获取滚动高度失败:', error);
  }
};

// 检查是否需要显示加载更多按钮（仅H5）
const checkShowLoadMoreButton = () => {
  if (!isH5.value || !hasMore.value || loading.value) return;
  
  try {
    const scrollViewElement = document.querySelector('.mail-list');
    const contentElement = document.querySelector('.mail-list-inner');
    
    if (scrollViewElement && contentElement) {
      scrollHeight.value = scrollViewElement.clientHeight;
      contentHeight.value = contentElement.scrollHeight;
      
      // 检查是否接近底部
      const distanceToBottom = contentHeight.value - scrollHeight.value - scrollTop.value;
      const isNearBottom = distanceToBottom < LOAD_MORE_THRESHOLD;
      
      // 如果接近底部但scrolltolower不触发，且不在标签切换过程中，则显示加载更多按钮
      showLoadMoreButton.value = !isNearBottom && hasMore.value && mailList.value.length > 0 && !isTabSwitching.value;
      
      // 如果非常接近底部，应该自动加载而不显示按钮
      if (isNearBottom && hasMore.value && !loading.value && !isTabSwitching.value) {
        console.log('非常接近底部，自动加载更多:', distanceToBottom);
        loadMore();
      }
    }
  } catch (error) {
    console.error('检查加载更多按钮出错:', error);
  }
};

// 触摸开始
const onTouchStart = (e: any) => {
  if (!isH5.value) return;
  
  // 只有在顶部时才允许下拉刷新
  if (scrollTop.value > 5) return;
  
  console.log('触摸开始', e);
  startY.value = e.touches[0].clientY || e.changedTouches[0].clientY;
};

// 触摸移动
const onTouchMove = (e: any) => {
  if (!isH5.value || scrollTop.value > 5 || refreshing.value) return;
  
  const currentY = e.touches[0].clientY || e.changedTouches[0].clientY;
  const distance = currentY - startY.value;
  
  // 确保用户正在下拉而不是上滑
  if (distance > 10) {
    // 在H5环境中防止默认行为
    if (isH5.value) {
      e.preventDefault(); // 阻止默认滚动行为
      e.stopPropagation(); // 阻止事件冒泡
    }
    
    pullDistance.value = Math.min(distance * 0.5, PULL_THRESHOLD * 1.5);
    isPullingDown.value = true;
    
    console.log('下拉距离:', pullDistance.value);
  } else {
    pullDistance.value = 0;
    isPullingDown.value = false;
  }
};

// 触摸结束
const onTouchEnd = (e: any) => {
  if (!isH5.value || !isPullingDown.value) return;
  
  console.log('触摸结束', pullDistance.value);
  
  if (pullDistance.value > PULL_THRESHOLD) {
    // 触发刷新
    console.log('触发刷新');
    refreshing.value = true;
    skeletonShow.value = true; // 显示骨架屏增强体验
    loadData(true);
  }
  
  // 重置状态
  pullDistance.value = 0;
  isPullingDown.value = false;
};

// 监听滚动
const onScroll = (e: any) => {
  if (e.detail) {
    scrollTop.value = e.detail.scrollTop || 0;
  }
  
  // 不在滚动事件中直接检查是否接近底部，避免频繁触发
  // 仅在H5环境中更新加载更多按钮状态
  if (isH5.value && !loading.value && !refreshing.value) {
    // 延迟执行减轻滚动压力
    setTimeout(() => {
      checkShowLoadMoreButton();
    }, 100);
  }
};

// 生成模拟数据
const generateMockData = (count: number): Mail[] => {
  const statusOptions = [MailStatus.PENDING, MailStatus.SENT, MailStatus.FAILED];
  const result: Mail[] = [];
  
  for (let i = 0; i < count; i++) {
    const id = Math.floor(Math.random() * 1000000);
    const status = statusOptions[Math.floor(Math.random() * statusOptions.length)];
    
    result.push({
      id,
      orderNumber: `2503${String(Math.random()).slice(2, 16)}`,
      recipient: `1${String(Math.random()).slice(2, 13)}`,
      content: ["晚安zZZ测试测试测试测试测试测试测阿斯顿阿斯自行车"
      , "明天早点起", 
      "别忘了带伞", 
      "注意休息"][Math.floor(Math.random() * 4)],
      sendTime: `2025-03-${String(Math.floor(Math.random() * 30) + 1).padStart(2, '0')} ${String(Math.floor(Math.random() * 24)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`,
      submitTime: `2025-03-${String(Math.floor(Math.random() * 30) + 1).padStart(2, '0')} ${String(Math.floor(Math.random() * 24)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}:${String(Math.floor(Math.random() * 60)).padStart(2, '0')}`,
      status,
      price: Number((Math.random() * 10).toFixed(2)),
      isNew: true // 标记新加载的卡片
    });
  }
  
  return result;
};

// 根据状态获取样式类名
const getStatusClass = (status: MailStatus): string => {
  switch (status) {
    case MailStatus.PENDING:
      return 'status-pending';
    case MailStatus.SENT:
      return 'status-sent';
    case MailStatus.FAILED:
      return 'status-failed';
    default:
      return '';
  }
};

// 根据状态获取文本
const getStatusText = (status: MailStatus): string => {
  switch (status) {
    case MailStatus.PENDING:
      return '待发送';
    case MailStatus.SENT:
      return '已发送';
    case MailStatus.FAILED:
      return '发送失败';
    default:
      return '';
  }
};

// 格式化内容文本，不再截断内容，交由CSS处理
const formatContent = (content: string): string => {
  return content; // 返回完整内容，由CSS控制显示方式
};

// 格式化时间显示，添加前导零，兼容iOS
const formatTime = (timeString: string): string => {
  try {
    // 确保timeString是字符串类型
    if (!timeString || typeof timeString !== 'string') {
      console.warn('无效的时间字符串:', timeString);
      return String(timeString || ''); // 转换为字符串以防止错误
    }
    
    // 修复iOS日期格式兼容性问题：将空格替换为'T'
    const isoTimeString = timeString.replace(' ', 'T');
    const date = new Date(isoTimeString);
    
    if (isNaN(date.getTime())) {
      console.warn('日期解析失败:', timeString);
      return timeString; // 如果解析失败，返回原始字符串
    }
    
    const now = new Date();
    const isCurrentYear = date.getFullYear() === now.getFullYear();
    
    // 获取月、日、时、分，并添加前导零
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    
    // 添加前导零
    const monthStr = month.toString().padStart(2, '0');
    const dayStr = day.toString().padStart(2, '0');
    
    // 如果是当年，只显示月日时分；否则显示年月日时分
    if (isCurrentYear) {
      return `${monthStr}月${dayStr}日 ${hours}:${minutes}`;
    } else {
      const year = date.getFullYear();
      return `${year}年${monthStr}月${dayStr}日 ${hours}:${minutes}`;
    }
  } catch (error) {
    console.error('时间格式化错误:', error);
    return String(timeString || ''); // 确保返回一个字符串
  }
};

// 查看短信详情
const viewDetail = (mail: Mail) => {
  // 模拟点击卡片效果，实际项目中可以跳转到详情页
  console.log('查看短信详情:', mail.id);
  uni.showToast({
    title: '查看短信详情',
    icon: 'none'
  });
};

// 加载数据
const loadData = (reset: boolean = false) => {
  if (loading.value) return;
  
  if (reset) {
    page.value = 1;
    hasMore.value = true;
    mailList.value = [];
  }
  
  if (!hasMore.value) return;
  
  loading.value = true;
  showLoadMoreButton.value = false; // 加载时隐藏按钮
  
  // 模拟API请求延迟
  setTimeout(() => {
    // 获取模拟数据
    const mockData = generateMockData(pageSize.value);
    
    // 根据当前tab过滤数据
    let filteredData: Mail[] = [];
    
    if (currentTab.value === 0) {
      // 全部
      filteredData = mockData;
    } else if (currentTab.value === 1) {
      // 待发送
      filteredData = mockData.filter(item => item.status === MailStatus.PENDING);
    } else if (currentTab.value === 2) {
      // 已发送
      filteredData = mockData.filter(item => item.status === MailStatus.SENT);
    } else if (currentTab.value === 3) {
      // 发送失败 - 返回空数据
      filteredData = [];
    }
    
    // 添加新卡片并标记为新
    const newData = reset ? filteredData : [...mailList.value, ...filteredData];
    
    // 更新列表
    mailList.value = newData;
    
    // 在短暂延迟后移除新卡片标记，使动画只显示一次
    if (!reset && filteredData.length > 0) {
      setTimeout(() => {
        mailList.value.forEach(item => {
          item.isNew = false;
        });
      }, 1500);
    }
    
    // 模拟没有更多数据的情况
    if (page.value >= 3) {
      hasMore.value = false;
    }
    
    page.value++;
    loading.value = false;
    refreshing.value = false;
    skeletonShow.value = false; // 数据加载完成后隐藏骨架屏
    
    console.log(`加载了${filteredData.length}条数据，当前tab:${currentTab.value}`);
    
    // 更新滚动高度用于检测是否需要显示加载更多按钮
    if (isH5.value) {
      setTimeout(() => {
        updateScrollHeights();
        checkShowLoadMoreButton();
      }, 300);
    }
  }, 1500); // 缩短延迟到1500ms
};

// 切换标签页
const changeTab = (e:any) => {  
  currentTab.value = e.index;
  isTabSwitching.value = true; // 标记正在切换标签
  console.log("已经切换TAB:", currentTab.value);
  
  // 每次切换标签页时重新加载数据
  loadData(true);
  
  // 防止短期内触发加载更多
  setTimeout(() => {
    isTabSwitching.value = false;
    console.log('标签切换保护结束，允许加载更多');
    
    // 标签保护结束后重新检查是否需要加载更多
    if (isH5.value) {
      updateScrollHeights();
      checkShowLoadMoreButton();
    }
  }, 1500); // 缩短为1.5秒，减少等待时间
};

// 加载更多 - 增强版
const loadMore = () => {
  // 只有当不处于加载状态、有更多数据可加载、且不在标签切换过程中时才加载
  if (!loading.value && hasMore.value) {
    // 即使在标签切换过程中，如果用户手动点击了加载更多按钮，也应响应
    if (isTabSwitching.value) {
      console.log('标签切换中，但允许用户手动触发加载更多');
    } else {
      console.log('触发加载更多');
    }
    loadData();
  } else if (loading.value) {
    console.log('正在加载中，忽略加载更多请求');
  } else if (!hasMore.value) {
    console.log('没有更多数据');
  }
};

// 下拉刷新
const onRefresh = () => {
  console.log('刷新触发');
  refreshing.value = true;
  skeletonShow.value = true; // 刷新时显示骨架屏
  
  // 重置下拉状态
  isPullingDown.value = false;
  pullDistance.value = 0;
  
  loadData(true);
};

// 检测滚动到底部（H5）
const checkScrollToBottom = () => {
  if (!isH5.value || loading.value || !hasMore.value) return;
  
  try {
    const scrollViewElement = document.querySelector('.mail-list');
    const contentElement = document.querySelector('.mail-list-inner');
    
    if (scrollViewElement && contentElement) {
      const scrollContainer = scrollViewElement;
      const scrollPosition = scrollContainer.scrollTop;
      const containerHeight = scrollContainer.clientHeight;
      const contentHeight = contentElement.scrollHeight;
      
      // 计算距离底部的距离
      const distanceToBottom = contentHeight - (scrollPosition + containerHeight);
      
      // 如果滚动位置接近底部，加载更多
      if (distanceToBottom < LOAD_MORE_THRESHOLD) {
        // 如果不是由于标签切换引起的，则加载更多
        if (!isTabSwitching.value) {
          console.log('H5检测到底部，加载更多，距离底部:', distanceToBottom);
          loadMore();
        } else {
          console.log('H5检测到底部，但正在切换标签，忽略加载');
        }
      }
    }
  } catch (error) {
    console.error('检测滚动到底部出错:', error);
  }
};

// 手动检测滚动位置
const startScrollDetection = () => {
  if (!isH5.value) return;
  
  // 为H5环境添加滚动监听器
  const scrollElement = document.querySelector('.mail-list');
  if (scrollElement) {
    // 使用防抖函数包装滚动事件处理
    let scrollTimer: any = null;
    
    scrollElement.addEventListener('scroll', () => {
      // 更新滚动位置
      scrollTop.value = scrollElement.scrollTop || 0;
      
      // 防抖处理，避免频繁触发加载
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(() => {
        checkScrollToBottom();
        checkShowLoadMoreButton();
      }, 100);
    });
    
    console.log('H5环境: 已添加滚动监听器');
  }
};

onTabItemTap((item)=>{
  currentTab.value = 0;
  console.log("触发切换Tab事件：",item);
  console.log("是否登陆：",isLogin.value);
  const currentPages = getCurrentPages();
  console.log("获取到的页面地址：",currentPages);

  isLogin.value = true;

  if(!isLogin.value){
    uni.showModal({
      title: '提示',
      content: '请先登录',
      success: (res) => {
        if (res.confirm) {
          // 用户点击"确定"，跳转到登录页面
          uni.switchTab({
            url: '/pages/login/login',
          });
        } else if (res.cancel) {
          console.log("当前转发地址：",originalPagePath);
          // 用户点击"取消"，返回原始页面
          uni.switchTab({
            url: USE_ABS_PATH + originalPagePath,
          });
        }
      },
    });
  }
  console.log("完成Tab切换事件",item);
});

// 生命周期钩子
onMounted(() => {
  console.log("内容已载入");
  checkPlatform(); // 检测平台类型
  
  // 为文档添加触摸事件监听器 (仅H5环境)
  if (typeof document !== 'undefined') {
    // 在document上监听触摸事件，确保能捕获到所有触摸
    document.addEventListener('touchstart', onTouchStart, { passive: false });
    document.addEventListener('touchmove', onTouchMove, { passive: false });
    document.addEventListener('touchend', onTouchEnd, { passive: false });
    
    console.log('H5环境: 已添加触摸事件监听器');
    
    // 延迟启动滚动检测，确保DOM已完全加载
    setTimeout(() => {
      startScrollDetection();
    }, 1000);
  }
  
  loadData(); // 初始加载数据
});

// 在组件销毁时移除事件监听器
onUnmounted(() => {
  if (typeof document !== 'undefined') {
    document.removeEventListener('touchstart', onTouchStart);
    document.removeEventListener('touchmove', onTouchMove);
    document.removeEventListener('touchend', onTouchEnd);
    
    // 移除滚动监听器
    const scrollElement = document.querySelector('.mail-list');
    if (scrollElement) {
      scrollElement.removeEventListener('scroll', checkScrollToBottom);
    }
    
    console.log('H5环境: 已移除事件监听器');
  }
});
</script>


<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8; /* 更柔和的背景色 */
  position: relative;
  height: 100vh;
}

.mail-list {
  flex: 1;
  height: calc(100vh - 44px); /* 减去tab栏的高度 */
  padding: 0;
}

.mail-list-inner {
  padding: 12px;
}

.mail-card {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  // 移除左侧边框样式
  // 卡片点击状态样式
  &.card-hover {
    transform: scale(0.98);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    background-color: #fafafa;
  }
  
  // 卡片分隔样式
  &:nth-child(odd) {
    background-color: #ffffff;
  }
  
  &:nth-child(even) {
    background-color: #feffff;
  }
  
  // 新卡片的进入动画
  &.new-card {
    animation: fadeSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f5f5f5;
  background-color: #fafafa;
}

.order-label {
  display: flex;
  align-items: center;
  max-width: 70%;
}

.order-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
  
  &.status-pending {
    background-color: #ff9900;
  }
  
  &.status-sent {
    background-color: #09bb07;
  }
  
  &.status-failed {
    background-color: #ff3b30;
  }
}

.order-number {
  font-size: 14px;
  color: #666;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  
  &.status-pending {
    background-color: rgba(255, 153, 0, 0.7);
  }
  
  &.status-sent {
    background-color: rgba(9, 187, 7, 0.7);
  }
  
  &.status-failed {
    background-color: rgba(255, 59, 48, 0.7);
  }
}

.card-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}

.message-content {
  margin-bottom: 6px;
}

.recipient-row, .content-row {
  display: flex;
  align-items: center;
  padding: 0;
}

.recipient-row {
  margin-bottom: 8px;
}

.label-text {
  font-size: 15px;
  color: #888;
  margin-right: 4px;
  flex-shrink: 0;
}

.recipient-value {
  font-size: 16px;
  font-weight: normal;
  color: #666;
}

.content-row {
  padding-left: 0;
}

.content-value {
  font-size: 16px;
  color: #666;
  line-height: 1.5;
  font-weight: normal;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  flex: 1;
}

.time-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
  border-top: 1px solid #f0f0f0;
  padding-top: 6px;
}

.time-label {
  font-size: 13px;
  color: #999;
  margin-right: 4px;
}

.time-value {
  font-size: 13px;
  color: #666;
}

// 更新加载状态样式
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  height: 20px;
}

.loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 4px;
  animation: loadingDot 1.4s infinite ease-in-out both;
  
  &:nth-child(1) {
    animation-delay: -0.32s;
  }
  
  &:nth-child(2) {
    animation-delay: -0.16s;
  }
}

@keyframes loadingDot {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.no-more-line {
  height: 1px;
  width: 60px;
  background-color: #ddd;
}

.no-more-text {
  color: #999;
  font-size: 13px;
  margin: 0 10px;
}

// 骨架屏容器样式
.skeleton-container {
  padding: 12px;
}

.skeleton-card {
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 10px;
}

.skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.skeleton-content {
  padding: 10px 0;
}

// 更新空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  height: 60vh;
}

.empty-image {
  width: 240px;
  height: 180px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 16px;
  color: #999;
  text-align: center;
}

@font-face {
  font-family: 'iconfont';
  src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 添加骨架屏预加载状态样式
.tui-skeleton {
  width: 100%;
}

// 确保预加载时内容可见但被骨架屏覆盖
.tui-skeleton-rect, 
.tui-skeleton-circular, 
.tui-skeleton-fillet {
  position: relative;
}

// 下拉刷新提示样式
.pull-refresh-indicator {
  position: fixed; // 改为fixed定位确保始终可见
  top: 44px; // 标签栏高度
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(248, 248, 248, 0.95);
  z-index: 99; // 提高z-index确保在最上层
  font-size: 14px;
  color: #666;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.refresh-icon {
  margin-right: 8px;
  font-size: 16px;
  transition: transform 0.3s;
  
  &.refreshing {
    animation: rotating 1s linear infinite;
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 添加加载更多按钮样式
.load-more-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  margin: 10px 0 20px;
  background-color: #f8f8f8;
  color: #666;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:active {
    background-color: #eaeaea;
  }
}
</style>