<template>
  <view class="page-order">


    <!-- 订单状态Tab -->
    <view class="tab-container">
      <scroll-view scroll-x class="tab-scroll" :show-scrollbar="false">
        <view class="tab-list">
          <view
            v-for="tab in tabs"
            :key="tab.value"
            :class="['tab-item', { active: currentTab === tab.value }]"
            @tap="switchTab(tab.value)"
          >
            <text class="tab-text">{{ tab.label }}</text>
            <view v-if="tab.count && tab.count > 0" class="tab-badge">{{ tab.count }}</view>
            <view v-if="currentTab === tab.value" class="tab-indicator"></view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 订单列表 -->
    <scroll-view
      scroll-y
      class="order-list"
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="list-container">
        <!-- 订单卡片 -->
        <view
          v-for="order in displayOrders"
          :key="order.id"
          class="order-card"
          @tap="goDetail(order)"
        >
          <!-- 订单头部 -->
          <view class="order-header">
            <view class="header-left">
              <view class="merchant-icon">
                <u-icon name="home-fill" :size="16" color="#FF6B35" />
              </view>
              <text class="merchant-name">{{ order.merchantName }}</text>
            </view>
            <view class="status-badge" :class="`status-${order.status}`">
              <view class="status-dot"></view>
              <text class="status-text">{{ getStatusText(order.status) }}</text>
            </view>
          </view>

          <!-- 订单内容 -->
          <view class="order-body">
            <view class="room-image-wrapper">
              <image
                v-if="order.roomImage"
                :src="order.roomImage"
                class="room-image"
                mode="aspectFill"
              />
              <view v-else class="room-image-placeholder">
                <u-icon name="photo" :size="40" color="#CCCCCC" />
              </view>
            </view>

            <view class="room-info">
              <text class="room-name">{{ order.roomName }}</text>

              <view class="room-details">
                <view class="detail-row">
                  <view class="detail-icon">
                    <u-icon name="calendar" :size="12" color="#999" />
                  </view>
                  <text class="detail-text">{{ formatDateRange(order.checkInDate, order.checkOutDate) }}</text>
                </view>
                <view class="detail-row">
                  <view class="detail-icon">
                    <u-icon name="clock" :size="12" color="#999" />
                  </view>
                  <text class="detail-text">共{{ order.nights }}晚</text>
                </view>
              </view>

              <view class="price-section">
                <view class="price-main">
                  <text class="price-symbol">¥</text>
                  <text class="price-amount">{{ order.totalAmount }}</text>
                </view>
                <text class="price-label">实付</text>
              </view>
            </view>
          </view>

          <!-- 订单底部操作 -->
          <view v-if="getActions(order.status, order.hasReviewed).length > 0" class="order-footer">
            <view class="order-no">
              <text class="no-label">订单号：</text>
              <text class="no-value">{{ order.orderNo }}</text>
            </view>
            <view class="footer-actions">
              <view
                v-for="action in getActions(order.status, order.hasReviewed)"
                :key="action.type"
                :class="['action-btn', `btn-${action.style}`]"
                @tap.stop="handleOrderAction(action.type, order)"
              >

                <text class="btn-text">{{ action.text }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 加载更多 -->
        <view v-if="loading && orderList.length > 0" class="loading-more">
          <view class="loading-spinner">
            <view class="spinner-dot"></view>
            <view class="spinner-dot"></view>
            <view class="spinner-dot"></view>
          </view>
          <text class="loading-text">加载中...</text>
        </view>

        <!-- 没有更多 -->
        <view v-if="!hasMore && orderList.length > 0" class="no-more">
          <view class="no-more-line"></view>
          <text class="no-more-text">已经到底了</text>
          <view class="no-more-line"></view>
        </view>

        <!-- 空状态 -->
        <view v-if="orderList.length === 0 && !loading" class="empty-state">
          <view class="empty-icon">
            <u-icon name="file-text" :size="80" color="#E5E5E5" />
          </view>
          <text class="empty-title">{{ getEmptyTitle() }}</text>
          <text class="empty-desc">{{ getEmptyDesc() }}</text>
          <view v-if="currentTab === ''" class="empty-action" @tap="goHome">
            <u-icon name="search" :size="16" color="#ffffff" />
            <text class="action-text">去预订房源</text>
          </view>
        </view>

        <!-- 首次加载骨架屏 -->
        <view v-if="loading && orderList.length === 0" class="loading-state">
          <view v-for="i in 3" :key="i" class="skeleton-card">
            <view class="skeleton-header">
              <view class="skeleton-line skeleton-merchant"></view>
              <view class="skeleton-line skeleton-status"></view>
            </view>
            <view class="skeleton-body">
              <view class="skeleton-image"></view>
              <view class="skeleton-info">
                <view class="skeleton-line skeleton-title"></view>
                <view class="skeleton-line skeleton-meta"></view>
                <view class="skeleton-line skeleton-price"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import * as orderApi from '@/api/user/order';

interface Tab {
  label: string;
  value: string;
  icon?: string;
  count?: number;
}

const tabs = ref<Tab[]>([
  { label: '全部', value: '', icon: 'list' },
  { label: '待支付', value: 'pending_pay', icon: 'rmb-circle' },
  { label: '待入住', value: 'pending_checkin', icon: 'calendar' },
  { label: '退款/取消', value: 'cancelled/refunded/refunding', icon: 'close-circle' },
]);

const orderList = ref<any[]>([]);
const currentTab = ref('');
const page = ref(1);
const loading = ref(false);
const hasMore = ref(true);
const refreshing = ref(false);

// 转换订单数据格式
const displayOrders = computed(() => {
  return orderList.value.map(order => ({
    id: order.id,
    orderNo: order.orderNo,
    status: order.status,
    roomName: order.room?.name || '',
    roomImage: order.room?.coverImage,
    merchantName: order.merchant?.shopName || '',
    checkInDate: order.checkInDate,
    checkOutDate: order.checkOutDate,
    nights: order.nights,
    totalAmount: order.payAmount,
    createTime: order.createdAt,
    payTime: order.paidAt,
    hasReviewed: order.hasReviewed || false,
  }));
});

// 获取状态文本
function getStatusText(status: string): string {
  const statusMap: Record<string, string> = {
    pending_pay: '待支付',
    pending_confirm: '待确认',
    confirmed: '已确认',
    pending_checkin: '待入住',
    checked_in: '已入住',
    completed: '已完成',
    cancelled: '已取消',
    refunding: '退款中',
    refunded: '已退款',
  };
  return statusMap[status] || status;
}

// 格式化日期范围
function formatDateRange(checkIn: string, checkOut: string): string {
  if (!checkIn || !checkOut) return '';
  const formatDate = (dateStr: string) => {
    const d = new Date(dateStr);
    return `${d.getMonth() + 1}/${d.getDate()}`;
  };
  return `${formatDate(checkIn)} - ${formatDate(checkOut)}`;
}

// 获取操作按钮
function getActions(status: string, hasReviewed = false) {
  const actionMap: Record<string, any[]> = {
    pending_pay: [
      { type: 'cancel', text: '取消订单', style: 'default', icon: 'close-circle' },
      { type: 'pay', text: '立即支付', style: 'primary', icon: 'rmb-circle' },
    ],
    pending_confirm: [
      { type: 'cancel', text: '取消订单', style: 'default', icon: 'close-circle' },
      { type: 'contact', text: '联系商家', style: 'default', icon: 'phone' },
    ],
    confirmed: [
      { type: 'refund', text: '申请退款', style: 'default', icon: 'reload' },
      { type: 'contact', text: '联系商家', style: 'default', icon: 'phone' },
    ],
    pending_checkin: [
      { type: 'contact', text: '联系商家', style: 'default', icon: 'phone' },
    ],
    completed: hasReviewed ? [] : [
      { type: 'review', text: '评价', style: 'primary', icon: 'edit' },
    ],
  };
  return actionMap[status] || [];
}

// 获取空状态标题
function getEmptyTitle(): string {
  const titleMap: Record<string, string> = {
    '': '暂无订单',
    pending_pay: '暂无待支付订单',
    pending_checkin: '暂无待入住订单',
    'cancelled/refunded/refunding': '暂无退款/取消订单',
  };
  return titleMap[currentTab.value] || '暂无订单';
}

// 获取空状态描述
function getEmptyDesc(): string {
  const descMap: Record<string, string> = {
    '': '快去预订心仪的房源吧',
    pending_pay: '您还没有待支付的订单',
    pending_checkin: '您还没有待入住的订单',
    'cancelled/refunded/refunding': '您还没有退款或取消的订单',
  };
  return descMap[currentTab.value] || '';
}

// 获取订单列表
async function fetchOrders(reset = false) {
  if (loading.value) return;
  if (!reset && !hasMore.value) return;

  loading.value = true;
  if (reset) {
    page.value = 1;
    hasMore.value = true;
  }

  try {
    const res = await orderApi.getOrderList({
      page: page.value,
      pageSize: 10,
      status: currentTab.value || undefined,
    });
    const list = res.data?.list || [];
    orderList.value = reset ? list : [...orderList.value, ...list];
    hasMore.value = list.length >= 10;
    page.value++;
  } catch (e) {
    console.error('获取订单列表失败:', e);
    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
  } finally {
    loading.value = false;
    refreshing.value = false;
  }
}

// 切换Tab
function switchTab(value: string) {
  if (currentTab.value === value) return;
  currentTab.value = value;
  orderList.value = [];
  fetchOrders(true);
}

// 加载更多
function loadMore() {
  fetchOrders();
}

// 下拉刷新
function onRefresh() {
  refreshing.value = true;
  fetchOrders(true);
}

// 跳转订单详情
function goDetail(order: any) {
  uni.navigateTo({ url: `/pages/order-detail/index?orderNo=${order.orderNo}` });
}

// 跳转首页
function goHome() {
  uni.switchTab({ url: '/pages/index/index' });
}

// 处理订单操作
function handleOrderAction(type: string, order: any) {
  switch (type) {
    case 'pay':
      uni.navigateTo({ url: `/pages/order-detail/index?orderNo=${order.orderNo}` });
      break;
    case 'cancel':
      cancelOrder(order.orderNo);
      break;
    case 'refund':
      applyRefund(order.orderNo);
      break;
    case 'review':
      uni.navigateTo({ url: `/pages/order-detail/index?orderNo=${order.orderNo}` });
      break;
    case 'contact':
      uni.showToast({ title: '联系商家功能开发中', icon: 'none' });
      break;
  }
}

// 取消订单
function cancelOrder(orderNo: string) {
  uni.showModal({
    title: '取消订单',
    content: '确定要取消订单吗？',
    editable: true,
    placeholderText: '请输入取消原因（选填）',
    success: async (res) => {
      if (res.confirm) {
        try {
          const reason = res.content || '用户主动取消';
          await orderApi.cancelOrder(orderNo, reason);
          uni.showToast({ title: '订单已取消', icon: 'success' });
          fetchOrders(true);
        } catch (error: any) {
          uni.showToast({ title: error.message || '取消失败', icon: 'none' });
        }
      }
    }
  });
}

// 申请退款
function applyRefund(orderNo: string) {
  uni.showModal({
    title: '申请退款',
    content: '确定要申请退款吗？商家审核通过后将原路退回',
    success: async (res) => {
      if (res.confirm) {
        uni.showToast({ title: '退款功能开发中', icon: 'none' });
        // TODO: 实现退款功能
        // try {
        //   await orderApi.refundOrder(orderNo, '用户申请退款');
        //   uni.showToast({ title: '退款申请已提交', icon: 'success' });
        //   fetchOrders(true);
        // } catch (error: any) {
        //   uni.showToast({ title: error.message || '申请失败', icon: 'none' });
        // }
      }
    }
  });
}

onMounted(() => {
  fetchOrders(true);
});
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.page-order {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FFF5F0 0%, #F5F7FA 100%);
}

/* ========== 自定义导航栏 ========== */
.custom-navbar {
  background: #ffffff;
  padding: 0 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.navbar-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1A1A1A;
}

/* ========== Tab栏 ========== */
.tab-container {
  background: #ffffff;
  border-bottom: 1rpx solid #F0F0F0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab-scroll {
  white-space: nowrap;
}

.tab-list {
  display: flex;
  width: 100%;
}

.tab-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  gap: 8rpx;
  transition: all 0.3s ease;

  &:active {
    background: #F8F9FA;
  }
}

.tab-icon-wrapper {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F7FA;
  transition: all 0.3s ease;

  &.active {
    background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DD 100%);
  }
}

.tab-text {
  font-size: 24rpx;
  color: #999;
  transition: all 0.3s ease;
  font-weight: 500;
}

.tab-item.active .tab-text {
  color: #FF6B35;
  font-weight: 600;
}

.tab-badge {
  position: absolute;
  top: 0;
  right: 8rpx;
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  background: linear-gradient(135deg, #FF6B35 0%, #FF4D4F 100%);
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: #ffffff;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32rpx;
  height: 6rpx;
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  border-radius: 3rpx;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 32rpx;
    opacity: 1;
  }
}

/* ========== 订单列表 ========== */
.order-list {
  flex: 1;
  overflow-y: auto;
}

.list-container {
  padding: 24rpx;
}

/* ========== 订单卡片 ========== */
.order-card {
  background: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6rpx;
    height: 100%;
    background: linear-gradient(180deg, #FF8C5A 0%, #FF6B35 100%);
  }

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  }
}

/* 订单头部 */
.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 24rpx 20rpx 32rpx;
  background: linear-gradient(135deg, #FFFBF8 0%, #FFF5F0 100%);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex: 1;
  min-width: 0;
}

.merchant-icon {
  width: 40rpx;
  height: 40rpx;
  background: linear-gradient(135deg, #FFF5F0 0%, #FFE8DD 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.merchant-name {
  font-size: 28rpx;
  color: #1A1A1A;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  flex-shrink: 0;
}

.status-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-pending_pay {
  background: rgba(255, 140, 0, 0.1);
  border: 2rpx solid rgba(255, 140, 0, 0.3);

  .status-dot {
    background: #FF8C00;
  }
}

.status-pending_confirm,
.status-pending_checkin {
  background: rgba(74, 144, 226, 0.1);
  border: 2rpx solid rgba(74, 144, 226, 0.3);

  .status-dot {
    background: #4A90E2;
  }
}

.status-confirmed,
.status-checked_in {
  background: rgba(82, 196, 26, 0.1);
  border: 2rpx solid rgba(82, 196, 26, 0.3);

  .status-dot {
    background: #52C41A;
  }
}

.status-completed {
  background: rgba(153, 153, 153, 0.1);
  border: 2rpx solid rgba(153, 153, 153, 0.3);

  .status-dot {
    background: #999;
  }
}

.status-cancelled,
.status-refunding,
.status-refunded {
  background: rgba(255, 77, 79, 0.1);
  border: 2rpx solid rgba(255, 77, 79, 0.3);

  .status-dot {
    background: #FF4D4F;
  }
}

.status-text {
  font-size: 24rpx;
  font-weight: 600;
}

.status-pending_pay .status-text {
  color: #FF8C00;
}

.status-pending_confirm .status-text,
.status-pending_checkin .status-text {
  color: #4A90E2;
}

.status-confirmed .status-text,
.status-checked_in .status-text {
  color: #52C41A;
}

.status-completed .status-text {
  color: #999;
}

.status-cancelled .status-text,
.status-refunding .status-text,
.status-refunded .status-text {
  color: #FF4D4F;
}

/* 订单内容 */
.order-body {
  display: flex;
  gap: 20rpx;
  padding: 24rpx 24rpx 24rpx 32rpx;
}

.room-image-wrapper {
  flex-shrink: 0;
}

.room-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 16rpx;
  background: #F5F7FA;
}

.room-image-placeholder {
  width: 180rpx;
  height: 180rpx;
  border-radius: 16rpx;
  background: linear-gradient(135deg, #F5F7FA 0%, #E8EAED 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.room-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.room-name {
  font-size: 30rpx;
  color: #1A1A1A;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 12rpx;
}

.room-details {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.detail-icon {
  width: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-text {
  font-size: 24rpx;
  color: #666;
}

.price-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
}

.price-symbol {
  font-size: 24rpx;
  color: #FF6B35;
  font-weight: 600;
}

.price-amount {
  font-size: 40rpx;
  color: #FF6B35;
  font-weight: 700;
  line-height: 1;
}

.price-label {
  font-size: 22rpx;
  color: #999;
}

/* 订单底部操作 */
.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 24rpx 16rpx 32rpx;
  background: #FAFBFC;
  border-top: 1rpx solid #F0F0F0;
}

.order-no {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4rpx;
  min-width: 0;
  margin-right: 16rpx;
}

.no-label {
  font-size: 22rpx;
  color: #999;
  flex-shrink: 0;
}

.no-value {
  font-size: 22rpx;
  color: #666;
  font-family: 'Courier New', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footer-actions {
  display: flex;
  gap: 12rpx;
  flex-shrink: 0;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6rpx;
  padding: 12rpx 20rpx;
  border-radius: 32rpx;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
  }
}

.btn-default {
  background: #ffffff;
  border: 2rpx solid #E5E5E5;

  .btn-text {
    color: #666;
  }

  &:active {
    background: #F5F7FA;
  }
}

.btn-primary {
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.25);

  .btn-text {
    color: #ffffff;
  }

  &:active {
    box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3);
  }
}

.btn-text {
  font-size: 24rpx;
  font-weight: 600;
}

/* ========== 加载更多 ========== */
.loading-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  padding: 48rpx 0;
}

.loading-spinner {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.spinner-dot {
  width: 12rpx;
  height: 12rpx;
  background: #FF6B35;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;

  &:nth-child(1) {
    animation-delay: -0.32s;
  }

  &:nth-child(2) {
    animation-delay: -0.16s;
  }
}

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

.loading-text {
  font-size: 24rpx;
  color: #999;
}

/* ========== 没有更多 ========== */
.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
  padding: 48rpx 0;
}

.no-more-line {
  width: 80rpx;
  height: 2rpx;
  background: linear-gradient(90deg, transparent 0%, #E5E5E5 50%, transparent 100%);
}

.no-more-text {
  font-size: 24rpx;
  color: #CCCCCC;
}

/* ========== 空状态 ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 32rpx;
}

.empty-icon {
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient(135deg, #F5F7FA 0%, #E8EAED 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}

.empty-title {
  font-size: 32rpx;
  color: #666;
  font-weight: 600;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 48rpx;
}

.empty-action {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 24rpx 48rpx;
  background: linear-gradient(135deg, #FF8C5A 0%, #FF6B35 100%);
  border-radius: 48rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.96);
    box-shadow: 0 4rpx 16rpx rgba(255, 107, 53, 0.4);
  }
}

.action-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 600;
}

/* ========== 骨架屏 ========== */
.loading-state {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding-top: 20rpx;
  width: 100%;
}

.skeleton-card {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 28rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  width: 100%;
  box-sizing: border-box;
}

.skeleton-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.skeleton-line {
  height: 28rpx;
  border-radius: 8rpx;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.skeleton-merchant {
  width: 200rpx;
}

.skeleton-status {
  width: 80rpx;
}

.skeleton-body {
  display: flex;
  gap: 20rpx;
}

.skeleton-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

.skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  justify-content: space-between;
  min-width: 0;
}

.skeleton-title {
  width: 100%;
  height: 32rpx;
}

.skeleton-meta {
  width: 70%;
  height: 24rpx;
}

.skeleton-price {
  width: 50%;
  height: 36rpx;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>
