<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import TuiIcon from "@/components/thorui/tui-icon/tui-icon.vue";

// 定义订单数据的接口
interface OrderData {
  id: string;          // 订单号
  contactPhone: string; // 联系人电话
  message: string;     // 消息内容
  submitTime: string;  // 提交时间
  status: 'pending' | 'sent' | 'failed'; // 状态：待发送、已发送、发送失败
}

// 模拟订单数据 - 作为数据源
const allOrderData: OrderData[] = [
  {
    id: '250389921533060553',
    contactPhone: '19878384602',
    message: '别忘了带伞',
    submitTime: '03月04日 01:14',
    status: 'failed'
  },
  {
    id: '250348969878313001',
    contactPhone: '13993621665',
    message: '晚安zZZ测试测试测试测试测试测试测阿斯顿阿斯顿...',
    submitTime: '03月07日 08:06',
    status: 'pending'
  },
  {
    id: '250314551803170091',
    contactPhone: '10635958094',
    message: '注意休息',
    submitTime: '03月08日 09:31',
    status: 'failed'
  },
  {
    id: '250394625042831447',
    contactPhone: '12679421695',
    message: '别忘了带伞',
    submitTime: '03月20日 07:51',
    status: 'failed'
  },
  // 添加更多测试数据
  {
    id: 'SX20230615001',
    contactPhone: '19878384778',
    message: '收到您的心意了，非常感谢您的问候！我们下周见面聊聊到您的心意了，非常感谢您的问候！我们下周见面聊聊到您的心意了，非常感谢您的问候！我们下周见面聊聊到您的心意了，到您的心意了，非常感谢您的问候！我们下周见面聊聊到您的心意了，非常感谢您的问候！我们下周见面聊聊到您的心意了，非常感谢您的问候！我们下周见面聊聊到您的心意了，非常感谢您的问候！我们下周见面聊聊非常感谢您的问候！我们下周见面聊聊吧。',
    submitTime: '02月15日 14:30',
    status: 'sent'
  },
  {
    id: 'SX20230610002',
    contactPhone: '13993623456',
    message: '我已经原谅你了，希望以后我们能更好地沟通。',
    submitTime: '02月10日 09:15',
    status: 'sent'
  },
  {
    id: 'SX20230605003',
    contactPhone: '13993621234',
    message: '生日祝福收到了，谢谢你还记得我的生日！',
    submitTime: '02月05日 18:42',
    status: 'pending'
  },
  {
    id: 'SX20230528004',
    contactPhone: '13993625678',
    message: '周末愉快，我也很想你。有时间我们出来喝杯咖啡聊聊吧。',
    submitTime: '01月28日 20:10',
    status: 'pending'
  },
  {
    id: 'SX20230520005',
    contactPhone: '13993629012',
    message: '我很高兴收到你的消息。这段时间我一直在想我们的关系，希望我们能有机会好好谈谈。希望我们能够坐下来，像成年人一样解决我们之间的问题，重新建立起信任。',
    submitTime: '01月20日 16:05',
    status: 'sent'
  },
  {
    id: 'SX20230515006',
    contactPhone: '13993622233',
    message: '我收到你的包裹了，谢谢你的礼物！',
    submitTime: '01月15日 10:20',
    status: 'sent'
  },
  {
    id: 'SX20230510007',
    contactPhone: '13993624455',
    message: '上次的会议很有收获，期待下次合作。',
    submitTime: '01月10日 13:45',
    status: 'sent'
  }
];

// 分页控制变量
const currentPage = ref(1);
const pageSize = 10; // 每页显示10条数据
const isLoading = ref(false);
const hasMore = ref(true);

// 当前显示的订单列表数据
const orderList = ref<OrderData[]>([]);

// 加载数据的方法
const loadData = (page: number, refresh: boolean = false) => {
  isLoading.value = true;
  
  // 模拟API请求延迟
  setTimeout(() => {
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    const newData = allOrderData.slice(start, end);
    
    // 如果是刷新，替换数据；否则追加数据
    if (refresh) {
      orderList.value = newData;
    } else {
      orderList.value = [...orderList.value, ...newData];
    }
    
    // 更新分页状态
    currentPage.value = page;
    hasMore.value = end < allOrderData.length;
    isLoading.value = false;
  }, 500); // 模拟网络请求延迟
};

// 下拉刷新处理函数
const onRefresh = () => {
  loadData(1, true);
};

// 触底加载更多
const onLoadMore = () => {
  if (!isLoading.value && hasMore.value) {
    loadData(currentPage.value + 1);
  }
};

// 弹窗控制
const showContentModal = ref(false);
const currentContent = ref('');
const currentContact = ref('');

// 显示完整内容弹窗
const showFullContent = (content: string, contact: string) => {
  currentContent.value = content;
  currentContact.value = contact;
  showContentModal.value = true;
};

// 关闭弹窗
const closeModal = () => {
  showContentModal.value = false;
};

// 获取状态文本和样式
const getStatusInfo = (status: string) => {
  switch (status) {
    case 'pending':
      return {
        text: '待发送',
        class: 'status-pending',
        icon: 'clock'
      };
    case 'sent':
      return {
        text: '已发送',
        class: 'status-sent',
        icon: 'check'
      };
    case 'failed':
      return {
        text: '发送失败',
        class: 'status-failed',
        icon: 'close'
      };
    default:
      return {
        text: '未知状态',
        class: 'status-unknown',
        icon: 'help'
      };
  }
};

// 生成随机渐变背景 - 为了添加一些视觉趣味
const getGradientBackground = (index: number) => {
  const gradients = [
    'linear-gradient(135deg, #fceff7 0%, #ffffff 100%)',
    'linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%)',
    'linear-gradient(135deg, #f2fcf3 0%, #ffffff 100%)',
    'linear-gradient(135deg, #fff9f0 0%, #ffffff 100%)',
    'linear-gradient(135deg, #f5f0ff 0%, #ffffff 100%)'
  ];
  return gradients[index % gradients.length];
};

// 页面加载时的逻辑
onMounted(() => {
  console.log('订单页面已加载');
  // 初始加载第一页数据
  loadData(1, true);
});
</script>

<template>
  <view class="order-container">
    <!-- 订单列表 -->
    <scroll-view 
      class="order-list-scroll" 
      scroll-y 
      @scrolltolower="onLoadMore"
      v-if="orderList.length > 0"
    >
      <view class="order-list">
        <view 
          class="order-item" 
          v-for="(item, index) in orderList" 
          :key="index"
          :class="{'animate-in': true}"
          :style="{
            'animation-delay': index * 0.05 + 's',
            'background': getGradientBackground(index)
          }"
        >
          <view class="order-item-inner">
            <view class="order-header">
              <view class="order-id">
                <tui-icon name="mail" :size="16" color="#666"></tui-icon>
                <text>{{ item.id }}</text>
              </view>
            </view>
            
            <view class="order-content">
              <view class="contact-info">
                <view class="contact-icon">
                  <tui-icon name="people" :size="18" color="#666"></tui-icon>
                </view>
                <text class="contact-phone">{{ item.contactPhone }}</text>
              </view>
              
              <view class="message-content-wrapper" @tap="showFullContent(item.message, item.contactPhone)">
                <view class="message-content">{{ item.message }}</view>
                <view class="view-more" v-if="item.message.length > 15">
                  <text class="view-more-text">查看详情</text>
                </view>
              </view>
              
              <view class="order-footer">
                <view class="time-wrapper">
                  <tui-icon name="calendar" :size="14" color="#999"></tui-icon>
                  <text class="submit-time">{{ item.submitTime }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 加载状态提示 -->
        <view class="loading-more" v-if="isLoading">
          <view class="loading-icon"></view>
          <text class="loading-text">加载中...</text>
        </view>
        
        <view class="no-more" v-if="!hasMore && !isLoading && orderList.length > 0">
          <text class="no-more-text">— 已经到底了 —</text>
        </view>
      </view>
    </scroll-view>

    <!-- 空数据状态 -->
    <view class="empty-state" v-if="orderList.length === 0 && !isLoading">
      <view class="empty-icon">
        <tui-icon name="forbid" :size="80" color="#d3d7de"></tui-icon>
      </view>
      <text class="empty-text">暂无回复数据</text>
      <text class="empty-subtext">您收到的回复将会显示在这里</text>
      <button class="refresh-btn">刷新试试</button>
    </view>

    <!-- 内容详情弹窗 -->
    <view class="content-modal-mask" v-if="showContentModal" @tap="closeModal"></view>
    <view class="content-modal" v-if="showContentModal" @tap.stop>
      <view class="modal-header">
        <view class="modal-title-container">
          <text class="modal-title">回复详情</text>
        </view>
        <view class="modal-close" @tap="closeModal">
          <tui-icon name="close" :size="16" color="#999"></tui-icon>
        </view>
      </view>
      <view class="modal-content">
        <view class="modal-item">
          <view class="modal-label-row">
            <tui-icon name="people" :size="16" color="#666"></tui-icon>
            <text class="modal-label">联系人</text>
          </view>
          <text class="modal-value">{{ currentContact }}</text>
        </view>
        <view class="modal-item message-item">
          <view class="modal-label-row">
            <tui-icon name="message" :size="16" color="#666"></tui-icon>
            <text class="modal-label">消息内容</text>
          </view>
          <view class="scroll-container">
            <scroll-view class="modal-scroll" scroll-y show-scrollbar>
              <text class="modal-text">{{ currentContent }}</text>
            </scroll-view>
            <view class="scroll-indicator">
              <view class="scroll-arrow"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.order-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(180deg, #f0f5ff 0%, #f5f8fc 100%);
  padding: 20rpx 24rpx 32rpx;
}

.page-header {
  padding: 24rpx 8rpx 32rpx;
  display: flex;
  align-items: center;
}

.page-title {
  font-size: 38rpx;
  font-weight: 600;
  color: #333;
  position: relative;
}

.page-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8rpx;
  width: 60rpx;
  height: 4rpx;
  background: linear-gradient(90deg, #537edc, #84a9ff);
  border-radius: 2rpx;
}

.order-list-scroll {
  flex: 1;
  height: calc(100vh - 120rpx);
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 28rpx;
  padding-bottom: 40rpx;
}

.order-item {
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  transform: translateY(20rpx);
  opacity: 0;
  box-shadow: 0 5rpx 18rpx rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.order-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.06);
}

.order-item-inner {
  position: relative;
  padding: 28rpx;
  overflow: hidden;
}

.animate-in {
  animation: fadeInUp 0.35s ease forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.order-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20rpx;
  padding-left: 0;
}

.order-id {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 28rpx;
  color: #444;
  font-weight: 500;
}

.animate-in {
  animation: fadeInUp 0.35s ease forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.order-content {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 16rpx;
  padding: 20rpx;
  margin-left: 0;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(5px);
}

.contact-info {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  padding-bottom: 14rpx;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.contact-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: rgba(83, 126, 220, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12rpx;
}

.contact-phone {
  font-size: 28rpx;
  color: #444;
  font-weight: 500;
}

.message-content-wrapper {
  margin-bottom: 16rpx;
  padding: 16rpx;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 12rpx;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.message-content-wrapper:active {
  background-color: rgba(255, 255, 255, 0.8);
}

.message-content {
  font-size: 30rpx;
  color: #444;
  line-height: 1.5;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.view-more {
  text-align: right;
  margin-top: 10rpx;
}

.view-more-text {
  font-size: 24rpx;
  color: #537edc;
  display: inline-flex;
  align-items: center;
}

.view-more-text::after {
  content: "";
  display: inline-block;
  width: 12rpx;
  height: 12rpx;
  border-top: 2rpx solid #537edc;
  border-right: 2rpx solid #537edc;
  transform: rotate(45deg);
  margin-left: 6rpx;
}

.order-footer {
  display: flex;
  justify-content: flex-end;
}

.time-wrapper {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.submit-time {
  font-size: 24rpx;
  color: #888;
}

/* 加载更多样式 */
.loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
}

.loading-icon {
  width: 40rpx;
  height: 40rpx;
  border: 3rpx solid #f0f0f0;
  border-top: 3rpx solid #537edc;
  border-radius: 50%;
  margin-right: 10rpx;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 26rpx;
  color: #888;
}

.no-more {
  text-align: center;
  padding: 30rpx 0;
}

.no-more-text {
  font-size: 26rpx;
  color: #888;
  position: relative;
  display: inline-block;
  padding: 0 30rpx;
}

.no-more-text::before,
.no-more-text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80rpx;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ccc);
}

.no-more-text::before {
  left: -50rpx;
  background: linear-gradient(90deg, transparent, #ccc);
}

.no-more-text::after {
  right: -50rpx;
  background: linear-gradient(90deg, #ccc, transparent);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
  text-align: center;
}

.empty-icon {
  margin-bottom: 30rpx;
  position: relative;
}

.empty-icon::after {
  content: "";
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 120rpx;
  height: 10rpx;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
}

.empty-text {
  font-size: 34rpx;
  color: #555;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.empty-subtext {
  font-size: 28rpx;
  color: #888;
  max-width: 80%;
  margin-bottom: 30rpx;
}

.refresh-btn {
  background: linear-gradient(90deg, #537edc, #84a9ff);
  color: #fff;
  font-size: 28rpx;
  padding: 12rpx 40rpx;
  border-radius: 40rpx;
  border: none;
  box-shadow: 0 6rpx 16rpx rgba(83, 126, 220, 0.2);
  transition: all 0.3s ease;
}

.refresh-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(83, 126, 220, 0.2);
}

/* 弹窗样式 */
.content-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100;
  backdrop-filter: blur(6px);
  transition: opacity 0.3s;
}

.content-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600rpx;
  max-height: 75vh;
  background: linear-gradient(135deg, #ffffff, #f8faff);
  border-radius: 20rpx;
  overflow: hidden;
  z-index: 101;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.12);
  animation: modalIn 0.35s ease-out;
}

@keyframes modalIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -48%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.modal-header {
  padding: 24rpx 30rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: linear-gradient(90deg, #f8faff, #ffffff);
}

.modal-title-container {
  display: flex;
  flex-direction: column;
}

.modal-close {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.modal-close:active {
  background-color: rgba(0, 0, 0, 0.08);
}

.modal-content {
  flex: 1;
  padding: 30rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.modal-item {
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 16rpx;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.message-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 250rpx;
}

.scroll-container {
  position: relative;
  flex: 1;
  margin-top: 16rpx;
  border-radius: 12rpx;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px dashed rgba(83, 126, 220, 0.2);
  padding: 16rpx;
  min-height: 200rpx;
}

.modal-scroll {
  max-height: 350rpx;
  padding: 10rpx;
}

.modal-scroll::-webkit-scrollbar {
  width: 6rpx;
}

.modal-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(83, 126, 220, 0.3);
  border-radius: 3rpx;
}

.modal-scroll::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 3rpx;
}

.scroll-indicator {
  position: absolute;
  right: 16rpx;
  bottom: 16rpx;
  width: 30rpx;
  height: 30rpx;
  background-color: rgba(83, 126, 220, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bounce 1.5s infinite;
  opacity: 0.7;
}

.scroll-arrow {
  width: 10rpx;
  height: 10rpx;
  border-right: 2rpx solid rgba(83, 126, 220, 0.8);
  border-bottom: 2rpx solid rgba(83, 126, 220, 0.8);
  transform: rotate(45deg) translateY(-2rpx);
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6rpx);
  }
}

.modal-text {
  font-size: 30rpx;
  color: #444;
  line-height: 1.8;
  word-break: break-all;
}

.modal-label-row {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 10rpx;
}

.modal-label {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
}

.modal-value {
  font-size: 30rpx;
  color: #333;
  display: block;
  margin-top: 12rpx;
  padding: 0 10rpx;
}

.modal-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-left: 14rpx;
}

.modal-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4rpx;
  height: 24rpx;
  background: #537edc;
  border-radius: 2rpx;
}
</style>