<!-- 消费者端 - 订单详情页 -->
<template>
  <view class="order-detail-page">
    <scroll-view scroll-y="true" class="scroll-content">
    <!-- 订单状态 -->
    <view class="order-status" :class="getStatusClass()">
      <view class="status-content">
        <view class="status-info">
          <view class="status-title-row">
            <text class="status-emoji">{{ getStatusIcon() }}</text>
            <text class="status-text">{{ getStatusText() }}</text>
          </view>
          <text class="status-desc">{{ getStatusDesc() }}</text>
        </view>
        <!-- 分享免单入口 -->
        <view v-if="order?.order_status === 4" class="share-free-entry" @click="shareForFree">
          <text class="share-free-icon">🎁</text>
          <view class="share-free-info">
            <text class="share-free-title">分享免单</text>
            <text class="share-free-desc">分享给好友，4人购买即可免单</text>
          </view>
          <text class="share-free-arrow">›</text>
        </view>
      </view>
    </view>

    <!-- 配送信息 -->
    <view v-if="order != null && (order?.order_status ?? 0) >= 2" class="delivery-info card">
      <view class="delivery-header">
        <text class="section-title">配送信息</text>
      </view>
      <view class="delivery-info-content">
        <view class="delivery-address">
          <view class="address-icon">📍</view>
          <view class="address-content">
              <view class="address-user">
                  <text class="recipient">{{ deliveryAddress?.name ?? '' }}</text>
                  <text class="phone">{{ deliveryAddress?.phone ?? '' }}</text>
              </view>
              <text class="address-detail">{{ getFullAddress(deliveryAddress as any) }}</text>
          </view>
        </view>
        <!-- 如果有物流信息显示 -->
        <view v-if="deliveryInfo != null && deliveryInfo?.tracking_no != ''" class="courier-info">
          <view class="courier-icon">🚚</view>
          <view class="courier-content">
              <text class="courier-label">物流信息</text>
              <view class="tracking-row">
                  <text class="carrier-name">{{ deliveryInfo?.carrier_name ?? '快递运单' }}</text>
                  <text class="tracking-no">{{ deliveryInfo?.tracking_no ?? '' }}</text>
                  <view class="copy-tag" @click="copyText(deliveryInfo?.tracking_no ?? '')">
                      <text class="copy-tag-text">复制</text>
                  </view>
              </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品信息 -->
    <view class="order-products card">
      <view class="shop-header" @click="goToShop">
        <text class="shop-icon">🏪</text>
        <text class="shop-name">{{ shopName }}</text>
        <text class="arrow-right">›</text>
      </view>
      <view v-for="item in orderItems" :key="item.id" class="product-item" @click="goToProduct(item.product_id)">
        <image :src="item.image_url != null && item.image_url != '' ? item.image_url : '/static/default-product.png'" class="product-image" mode="aspectFill"/>
        <view class="product-info">
          <text class="product-name">{{ item.product_name }}</text>
          <text v-if="item.specifications" class="product-spec">{{ getSpecText(item.specifications) }}</text>
          <view class="price-quantity">
            <text class="product-price">¥{{ item.price }}</text>
            <text class="product-quantity">×{{ item.quantity }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="order-info card" v-if="order != null">
      <view class="info-row">
        <text class="info-label">订单编号</text>
        <text class="info-value copyable" @click="copyText(order?.order_no ?? '')">{{ order?.order_no ?? '' }} <text class="copy-icon">📄</text></text>
      </view>
      <view class="info-row">
        <text class="info-label">下单时间</text>
        <text class="info-value">{{ formatTime(order?.created_at ?? '') }}</text>
      </view>
      <view class="info-row" v-if="order?.payment_method != null && order?.payment_method != ''">
        <text class="info-label">支付方式</text>
        <text class="info-value">{{ getPaymentMethodText(order?.payment_method as any) }}</text>
      </view>
       <view class="info-row" v-if="order?.paid_at != null && order?.paid_at != ''">
        <text class="info-label">支付时间</text>
        <text class="info-value">{{ formatTime(order?.paid_at ?? '') }}</text>
      </view>
      <view class="info-row" v-if="order?.shipped_at != null && order?.shipped_at != ''">
        <text class="info-label">发货时间</text>
        <text class="info-value">{{ formatTime(order?.shipped_at ?? '') }}</text>
      </view>
      <view class="info-row" v-if="order?.completed_at != null && order?.completed_at != ''">
        <text class="info-label">完成时间</text>
        <text class="info-value">{{ formatTime(order?.completed_at ?? '') }}</text>
      </view>
    </view>

    <!-- 费用明细 -->
    <view class="cost-detail card" v-if="order != null">
      <view class="cost-row">
        <text class="cost-label">商品总额</text>
        <text class="cost-value">¥{{ order?.product_amount ?? 0 }}</text>
      </view>
      <view class="cost-row">
        <text class="cost-label">运费</text>
        <text class="cost-value">+¥{{ order?.shipping_fee != null ? order?.shipping_fee : 0 }}</text>
      </view>
      <view class="cost-row" v-if="(order?.discount_amount ?? 0) > 0">
        <text class="cost-label">优惠金额</text>
        <text class="cost-value">-¥{{ order?.discount_amount ?? 0 }}</text>
      </view>
      <view class="cost-row total">
        <text class="cost-label">实付金额</text>
        <text class="cost-value price">¥{{ order?.total_amount ?? 0 }}</text>
      </view>
    </view>
    </scroll-view>

    <view class="bottom-actions" v-if="order != null">
      <view class="action-bar-wrapper">
        <view class="action-left" @click="contactService">
            <view class="service-item">
                <text class="service-icon">🎧</text>
                <text class="service-label">客服</text>
            </view>
        </view>
        <view class="action-right">
          <view v-if="order?.order_status === 1" class="btn-group">
            <button class="btn" @click="cancelOrder">取消订单</button>
            <button class="btn primary" @click="payOrder">立即支付</button>
          </view>
          
          <view v-if="order?.order_status === 2" class="btn-group">
            <button class="btn" @click="applyRefund">申请退款</button>
            <button class="btn primary" @click="remindDelivery">提醒发货</button>
          </view>
          
          <view v-if="order?.order_status === 3" class="btn-group">
            <button class="btn" @click="viewLogistics">查看物流</button>
            <button class="btn primary" @click="confirmReceive">确认收货</button>
          </view>
          
          <view v-if="order?.order_status === 4" class="btn-group">
            <button class="btn" @click="applyAfterSales">申请售后</button>
            <button class="btn share-free" @click="shareForFree">分享免单</button>
            <button class="btn" @click="rePurchase">再次购买</button>
            <button class="btn primary" @click="goToReview">评价订单</button>
          </view>
          
          <view v-if="order?.order_status === 5" class="btn-group">
            <button class="btn primary" @click="rePurchase">重新购买</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted, computed } from 'vue'
import { onLoad, onBackPress } from '@dcloudio/uni-app'
import { supabaseService } from '@/utils/supabaseService.uts'
import supa from '@/components/supadb/aksupainstance.uts'

// 定义订单类型
type OrderType = {
	order_no: string,
	order_status: number,
	total_amount: number,
	product_amount: number,
	shipping_fee: number,
	discount_amount: number,
	payment_method: string,
	created_at: string,
	paid_at: string,
	shipped_at: string,
	completed_at: string,
	merchant_id: string,
	shipping_address: any | null
}

type OrderItemType = {
	id: string,
	product_id: string,
	product_name: string,
	image_url: string,
	price: number,
	quantity: number,
	specifications: any
}

type AddressType = {
	name: string,
	phone: string,
	province: string,
	city: string,
	district: string,
	detail: string,
	address: string
}

type DeliveryInfoType = {
	tracking_no: string,
	carrier_name: string
}

const orderId = ref('')
const order = ref<OrderType | null>(null)
const orderItems = ref<OrderItemType[]>([])
const shopName = ref('店铺名称')
const deliveryAddress = ref<AddressType | null>(null)
const deliveryInfo = ref<DeliveryInfoType | null>(null)

// 辅助函数 - 必须在调用前定义
const getStatusText = (): string => {
    const status = order.value?.order_status ?? 0
    if (status == 1) return '待付款'
    if (status == 2) return '待发货'
    if (status == 3) return '待收货'
    if (status == 4) return '已完成'
    if (status == 5) return '已取消'
    if (status == 6) return '退款中'
    if (status == 7) return '已退款'
    return '未知状态'
}

const getStatusDesc = (): string => {
    const status = order.value?.order_status ?? 0
    if (status == 1) return '请尽快完成支付'
    if (status == 2) return '商家正在打包商品'
    if (status == 3) return '商品正在赶往您的地址'
    if (status == 4) return '订单已完成，感谢支持'
    if (status == 5) return '订单已取消'
    if (status == 6) return '售后处理中'
    if (status == 7) return '钱款已退回'
    return ''
}

const getStatusIcon = (): string => {
    const status = order.value?.order_status ?? 0
    if (status === 1) return '💳'
    if (status === 2) return '📦'
    if (status === 3) return '🚚'
    if (status === 4) return '✅'
    return '📝'
}

const getStatusClass = (): string => {
    const status = order.value?.order_status ?? 0
    return `status-${status}`
}

const getFullAddress = (addr: any): string => {
    if (addr == null) return ''
    if (typeof addr === 'string') return addr
    
    try {
        const addrObj = JSON.parse(JSON.stringify(addr)) as UTSJSONObject
        const addressField = addrObj.getString('address')
        if (addressField != null && addressField != '') return addressField
        
        const province = addrObj.getString('province') ?? ''
        const city = addrObj.getString('city') ?? ''
        const district = addrObj.getString('district') ?? ''
        const detail = addrObj.getString('detail') ?? addrObj.getString('address_detail') ?? ''
        return province + city + district + detail
    } catch (e) {
        console.error('[getFullAddress] 解析地址失败:', e)
        return ''
    }
}

function formatSpecs(specs: any): string {
    if (specs == null) return ''
    if (typeof specs === 'string') {
        if (specs == '') return ''
        try {
            const parsed = JSON.parse(specs as string)
            if (parsed != null) {
                return formatSpecs(parsed)
            }
            return specs as string
        } catch (e) {
            return specs as string
        }
    }
    
    try {
        const specStr = JSON.stringify(specs)
        const specObj = JSON.parse(specStr) as UTSJSONObject
        
        // 定义常见的键名
        const keys = ['Color', 'Size', '颜色', '尺寸', '规格', '默认', 'spec', 'color', 'size']
        const parts : string[] = []
        
        // 尝试提取键值
        for (let i = 0; i < keys.length; i++) {
            const key = keys[i]
            const val = specObj.get(key)
            if (val != null && val != '') {
                parts.push(val.toString())
            }
        }
        
        // 如果提取到了内容
        if (parts.length > 0) {
            return parts.join(' | ')
        }
        
        // 如果没有提取到已知键，则进行通用清理
        return specStr.replace(/[{}"]/g, '').replace(/:/g, ': ').replace(/,/g, ' | ')
    } catch (e) {
        return ''
    }
}

const getSpecText = (specs: any): string => {
    return formatSpecs(specs)
}

const formatTime = (iso: string): string => {
    if (iso == '') return ''
    const d = new Date(iso)
    return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}`
}

const getPaymentMethodText = (method: any): string => {
    return '在线支付'
}

const copyText = (text: string) => {
    if(text == '') return
    uni.setClipboardData({
        data: text,
        success: () => uni.showToast({ title: '已复制' })
    })
}

const loadShopInfo = async (merchantId: string) => {
    try {
        const result = await supa
            .from('ml_shops')
            .select('shop_name')
            .eq('merchant_id', merchantId)
            .limit(1)
            .execute()
        
        if (result.error != null) {
            console.error('[loadShopInfo] 获取店铺信息失败:', result.error)
            return
        }
        
        const rawData = result.data
        if (rawData == null) return
        
        const rawList = rawData as any[]
        if (rawList.length == 0) return
        
        const shopData = rawList[0]
        const shopObj = JSON.parse(JSON.stringify(shopData)) as UTSJSONObject
        shopName.value = (shopObj.getString('shop_name') ?? '店铺') as string
    } catch (e) {
        console.error('[loadShopInfo] 获取店铺信息异常:', e)
    }
}

const loadOrderDetail = async () => {
    uni.showLoading({ title: '加载中' })
    try {
        const data = await supabaseService.getOrderDetail(orderId.value)
        console.log('[loadOrderDetail] 获取到的数据:', JSON.stringify(data))
        
        if (data != null) {
            const dataObj = data as UTSJSONObject
            
            order.value = {
                order_no: (dataObj.get('order_no') ?? '') as string,
                order_status: (dataObj.get('order_status') ?? 1) as number,
                total_amount: (dataObj.get('total_amount') ?? 0) as number,
                product_amount: (dataObj.get('product_amount') ?? 0) as number,
                shipping_fee: (dataObj.get('shipping_fee') ?? 0) as number,
                discount_amount: (dataObj.get('discount_amount') ?? 0) as number,
                payment_method: (dataObj.get('payment_method') ?? '') as string,
                created_at: (dataObj.get('created_at') ?? '') as string,
                paid_at: (dataObj.get('paid_at') ?? '') as string,
                shipped_at: (dataObj.get('shipped_at') ?? '') as string,
                completed_at: (dataObj.get('completed_at') ?? '') as string,
                merchant_id: (dataObj.get('merchant_id') ?? '') as string,
                shipping_address: (dataObj.get('shipping_address') ?? null) as any
            } as OrderType
            
            const itemsRaw = dataObj.get('ml_order_items')
            console.log('[loadOrderDetail] 订单商品数据:', itemsRaw)
            
            if (itemsRaw != null && Array.isArray(itemsRaw)) {
                const items = itemsRaw as any[]
                orderItems.value = []
                for (let i = 0; i < items.length; i++) {
                    const item = items[i]
                    const itemObj = JSON.parse(JSON.stringify(item)) as UTSJSONObject
                    
                    const orderItem: OrderItemType = {
                        id: (itemObj.get('id') ?? '') as string,
                        product_id: (itemObj.get('product_id') ?? '') as string,
                        product_name: (itemObj.get('product_name') ?? '未知商品') as string,
                        price: (itemObj.get('price') ?? 0) as number,
                        quantity: (itemObj.get('quantity') ?? 1) as number,
                        image_url: (itemObj.get('image_url') ?? '') as string,
                        specifications: (itemObj.get('specifications') ?? '') as any
                    }
                    orderItems.value.push(orderItem)
                }
            }
            
            const addressRaw = dataObj.get('shipping_address')
            console.log('[loadOrderDetail] 收货地址数据:', addressRaw)
            
            if (addressRaw != null) {
                let addressObj: UTSJSONObject
                if (addressRaw instanceof UTSJSONObject) {
                    addressObj = addressRaw as UTSJSONObject
                } else if (typeof addressRaw === 'string') {
                    addressObj = JSON.parse(addressRaw as string) as UTSJSONObject
                } else {
                    addressObj = JSON.parse(JSON.stringify(addressRaw)) as UTSJSONObject
                }
                
                const province = (addressObj.get('province') ?? '') as string
                const city = (addressObj.get('city') ?? '') as string
                const district = (addressObj.get('district') ?? '') as string
                const detail = (addressObj.get('detail') ?? (addressObj.get('address_detail') ?? '')) as string
                
                deliveryAddress.value = {
                    name: (addressObj.get('name') ?? (addressObj.get('recipient_name') ?? (addressObj.get('receiver_name') ?? ''))) as string,
                    phone: (addressObj.get('phone') ?? (addressObj.get('recipient_phone') ?? (addressObj.get('receiver_phone') ?? ''))) as string,
                    province: province,
                    city: city,
                    district: district,
                    detail: detail,
                    address: province + city + district + detail
                } as AddressType
            }
            
            const merchantId = (dataObj.get('merchant_id') ?? '') as string
            if (merchantId != '') {
                loadShopInfo(merchantId)
            }
            
            // 加载物流信息
            const trackingNoVal = dataObj.getString('tracking_no')
            const carrierNameVal = dataObj.getString('carrier_name')
            if (trackingNoVal != null && trackingNoVal != '') {
                deliveryInfo.value = {
                    tracking_no: trackingNoVal,
                    carrier_name: carrierNameVal ?? ''
                } as DeliveryInfoType
            }
            
            console.log('[loadOrderDetail] 订单详情加载成功，商品数量:', orderItems.value.length)
        } else {
            uni.showToast({ title: '订单不存在', icon: 'none' })
        }
    } catch (e) {
        console.error('[loadOrderDetail] 加载订单详情失败:', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
    } finally {
        uni.hideLoading()
    }
}

// 动作函数
const contactService = () => {
    if (order.value != null && order.value?.merchant_id != '') {
        // 跳转到商家的聊天窗口
        uni.navigateTo({
            url: `/pages/mall/consumer/chat?merchantId=${order.value?.merchant_id}&merchantName=${encodeURIComponent(shopName.value)}`
        })
    } else {
        uni.showActionSheet({
            itemList: ['在线客服', '拨打电话'],
            success: (res) => {
                if (res.tapIndex === 1) {
                    // 模拟拨打电话
                    uni.makePhoneCall({ phoneNumber: '400-123-4567' })
                } else {
                     uni.showToast({ title: '连接到了系统客服' })
                }
            }
        })
    }
}

const payOrder = () => {
    const totalAmount = order.value?.total_amount ?? 0
    uni.navigateTo({
        url: `/pages/mall/consumer/payment?orderId=${orderId.value}&amount=${totalAmount}`
    })
}

const doCancelOrder = async () => {
    try {
        const updatePayload = new UTSJSONObject()
        updatePayload.set('order_status', 5)
        updatePayload.set('updated_at', new Date().toISOString())
        
        const result = await supa
            .from('ml_orders')
            .update(updatePayload)
            .eq('id', orderId.value)
            .execute()
        
        if (result.error == null) {
            if (order.value != null) {
                order.value.order_status = 5
            }
            uni.showToast({ title: '订单已取消' })
        } else {
            console.error('[doCancelOrder] 取消订单失败:', result.error)
            uni.showToast({ title: '取消失败', icon: 'none' })
        }
    } catch (e) {
        console.error('[doCancelOrder] 取消订单异常:', e)
        uni.showToast({ title: '取消失败', icon: 'none' })
    }
}

const cancelOrder = () => {
    uni.showModal({
        title: '提示',
        content: '确定要取消订单吗？',
        success: (res) => {
            if (res.confirm) {
                doCancelOrder()
            }
        }
    })
}

const remindDelivery = async () => {
    const merchantId = order.value?.merchant_id
    if (merchantId == null || merchantId == '') {
        uni.showToast({ title: '商家信息不存在', icon: 'none' })
        return
    }
    
    const orderNo = order.value?.order_no ?? ''
    const message = `您好，订单 ${orderNo} 已付款，请尽快安排发货，谢谢！`
    
    uni.showLoading({ title: '发送中...' })
    const success = await supabaseService.sendChatMessage(message, merchantId, 'text')
    uni.hideLoading()
    
    if (success) {
        uni.showToast({ title: '已提醒商家尽快发货' })
    } else {
        uni.showToast({ title: '发送失败，请稍后重试', icon: 'none' })
    }
}

const viewLogistics = () => {
    uni.navigateTo({ url: `/pages/mall/consumer/logistics?orderId=${orderId.value}` })
}

const goToReview = () => {
    uni.navigateTo({ url: `/pages/mall/consumer/review?orderId=${orderId.value}` })
}

const doConfirmReceive = async () => {
    try {
        const result = await supabaseService.confirmReceipt(orderId.value)
        if (result.success) {
            if (order.value != null) {
                order.value.order_status = 4
            }
            uni.showToast({ title: '收货成功' })
            setTimeout(() => goToReview(), 1500)
        } else {
            uni.showToast({ title: result.error ?? '失败', icon: 'none' })
        }
    } catch (e) {
        console.error('[doConfirmReceive] 确认收货异常:', e)
        uni.showToast({ title: '操作失败', icon: 'none' })
    }
}

const confirmReceive = () => {
    uni.showModal({
        title: '确认收货',
        content: '确保您已收到货物',
        success: (res) => {
            if (res.confirm) {
                doConfirmReceive()
            }
        }
    })
}

const rePurchase = async () => {
    uni.showLoading({ title: '处理中' })
    try {
        const items = orderItems.value
        if (items.length == 0) {
            uni.hideLoading()
            uni.showToast({ title: '没有可购买的商品', icon: 'none' })
            return
        }
        
        let successCount = 0
        for (let i = 0; i < items.length; i++) {
            const item = items[i]
            const result = await supabaseService.addToCart(
                item.product_id,
                item.quantity,
                '',
                order.value?.merchant_id ?? ''
            )
            if (result) successCount++
        }
        
        uni.hideLoading()
        
        if (successCount > 0) {
            uni.showToast({ title: '已加入购物车' })
            setTimeout(() => {
                uni.switchTab({ url: '/pages/main/cart' })
            }, 1000)
        } else {
            uni.showToast({ title: '操作失败', icon: 'none' })
        }
    } catch (e) {
        uni.hideLoading()
        console.error('[rePurchase] 再次购买异常:', e)
        uni.showToast({ title: '操作失败', icon: 'none' })
    }
}

const doApplyRefund = async (reason: string) => {
    try {
        const success = await supabaseService.applyRefund(orderId.value, reason)
        if (success) {
            if (order.value != null) {
                order.value.order_status = 6
            }
            uni.showToast({ title: '申请已提交' })
        } else {
            uni.showToast({ title: '提交失败', icon: 'none' })
        }
    } catch (e) {
        console.error('[doApplyRefund] 申请退款异常:', e)
        uni.showToast({ title: '提交失败', icon: 'none' })
    }
}

const applyRefund = () => {
    uni.showModal({
        title: '申请退款',
        editable: true,
        placeholderText: '请输入退款原因',
        success: (res) => {
            if (res.confirm) {
                const reason = res.content ?? '用户主动申请'
                doApplyRefund(reason)
            }
        }
    })
}

const applyAfterSales = () => {
    // 售后逻辑类似退款，或者是跳转到专门的售后单页面
    applyRefund()
}

const goToShop = () => {
    // 跳转到店铺详情
    const merchantId = order.value?.merchant_id ?? ''
    if (merchantId != '') {
        uni.navigateTo({ 
            url: `/pages/mall/consumer/shop-detail?id=${merchantId}` 
        })
    } else {
        uni.showToast({ title: '商家信息不存在', icon: 'none' })
    }
}

const goToProduct = (pid: string) => {
    uni.navigateTo({ url: `/pages/mall/consumer/product-detail?id=${pid}` })
}

const shareForFree = async () => {
    if (orderItems.value.length === 0) {
        uni.showToast({ title: '没有可分享的商品', icon: 'none' })
        return
    }
    
    const firstItem = orderItems.value[0]
    
    try {
        uni.showLoading({ title: '创建分享...' })
        const result = await supabaseService.createShareRecord(
            firstItem.product_id,
            orderId.value,
            firstItem.id,
            firstItem.product_name,
            firstItem.image_url,
            firstItem.price
        )
        uni.hideLoading()
        
        const shareIdRaw = result.get('id')
        const shareCodeRaw = result.get('share_code')
        
        if (shareIdRaw != null && shareCodeRaw != null) {
            const shareId = shareIdRaw as string
            const shareCode = shareCodeRaw as string
            
            uni.showModal({
                title: '分享成功',
                content: `您的分享码: ${shareCode}\n分享给好友，当有4人购买后即可免单！`,
                confirmText: '查看详情',
                success: (res) => {
                    if (res.confirm) {
                        uni.navigateTo({ url: `/pages/mall/consumer/share/detail?id=${shareId}` })
                    }
                }
            })
        } else {
            uni.showToast({ title: '分享创建失败', icon: 'none' })
        }
    } catch (e) {
        uni.hideLoading()
        console.error('[shareForFree] 创建分享失败:', e)
        uni.showToast({ title: '分享失败', icon: 'none' })
    }
}

// 使用 onBackPress 拦截物理返回键和系统导航栏返回
onBackPress((_): boolean => {
    const pages = getCurrentPages()
    console.log('[order-detail onBackPress] pages count:', pages.length)
    
    if (pages.length > 1) {
        // 正常返回上一页
        return false
    }
    
    // 如果只有当前页面，跳转到 orders
    uni.redirectTo({ url: '/pages/mall/consumer/orders' })
    return true
})

// 生命周期 - 在所有函数定义之后
onLoad((options) => {
    const id = options['id']
    const orderIdParam = options['orderId']
    if (id != null && id != '') {
        orderId.value = id as string
        loadOrderDetail()
    } else if (orderIdParam != null && orderIdParam != '') {
        orderId.value = orderIdParam as string
        loadOrderDetail()
    }
})

</script>

<style scoped>
.order-detail-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    background-color: #f5f5f5;
}

.scroll-content {
    flex: 1;
    padding-bottom: 20px;
}

.card {
    background-color: #ffffff;
    margin: 10px;
    padding: 15px;
    border-radius: 10px;
}

/* 状态栏 */
.order-status {
    background: linear-gradient(135deg, #ff9000, #ff5000);
    padding: 30px 20px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center; /* 手机端默认居中 */
}

.status-content {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 确保内容居中 */
    text-align: center; /* 文字居中 */
}

.status-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.status-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* 标题行居中 */
    margin-bottom: 8px;
}

.status-emoji {
    font-size: 28px;
    margin-right: 12px;
}

.status-text {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}

.status-desc {
    font-size: 14px;
    opacity: 0.95;
    text-align: center;
}

/* 分享免单入口 */
.share-free-entry {
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 400px;
}

.share-free-icon {
    font-size: 28px;
    margin-right: 12px;
}

.share-free-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.share-free-title {
    font-size: 16px;
    font-weight: bold;
    color: white;
    margin-bottom: 4px;
}

.share-free-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.share-free-arrow {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
}

/* 配送信息 */
.section-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.delivery-address {
    display: flex;
    align-items: flex-start;
}

.address-icon {
    font-size: 20px;
    margin-right: 10px;
    color: #666;
}

.address-user {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 14px;
}

.phone {
    margin-left: 10px;
    color: #666;
    font-weight: normal;
}

.address-detail {
    font-size: 13px;
    color: #333;
    line-height: 1.4;
}

.courier-info {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.courier-icon {
    font-size: 20px;
    margin-right: 10px;
    color: #666;
}

.courier-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.courier-label {
    font-size: 14px;
    color: #333;
    font-weight: bold;
    margin-bottom: 5px;
}

.tracking-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.carrier-name {
    font-size: 12px;
    color: #999;
    margin-right: 8px;
}

.tracking-no {
    font-size: 13px;
    color: #666;
    margin-right: 10px;
    font-family: monospace; /* 适合单号显示 */
}

.copy-tag {
    background-color: #fff2f0;
    border: 1px solid #ffccc7;
    border-radius: 4px;
    padding: 1px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.copy-tag-text {
    color: #ff4d4f;
    font-size: 11px;
}

/* 店铺与商品 */
.shop-header {
    display: flex;
    flex-direction: row; /* 显式声明横向 */
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
    width: 100%; /* 占满容器 */
}

.shop-icon {
    margin-right: 8px;
    font-size: 16px;
}

.shop-name {
    font-size: 14px;
    font-weight: bold;
    flex: 1; /* 自适应占据空间 */
    color: #333;
}

.arrow-right {
    color: #999;
    font-size: 14px;
    margin-left: auto; /* 确保在最后端 */
}

.product-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 15px;
    align-items: flex-start;
}

.product-item:last-child {
    margin-bottom: 0;
}

.product-image {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    margin-right: 12px;
    background-color: #f9f9f9;
    flex-shrink: 0;
}

.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 90px;
}

.product-name {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    lines: 2;
    margin-bottom: 4px;
}

.product-spec {
    font-size: 12px;
    color: #999;
    background-color: #f5f5f5;
    padding: 2px 5px;
    border-radius: 4px;
    align-self: flex-start;
    margin-top: 5px;
}

.price-quantity {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    width: 100%;
}

.product-price {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.product-quantity {
    color: #999;
    font-size: 12px;
}

/* 订单详情 */
.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
}

.info-label {
    color: #999;
}

.info-value {
    color: #333;
}

.copy-icon {
    font-size: 12px;
}

/* 费用明细 */
.cost-detail {
    display: flex;
    flex-direction: column;
    align-items: center; /* 居中显示 */
    padding: 20px 15px;
}

.cost-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    width: 100%;
    max-width: 400px; /* 控制明细区域宽度，并保持居中感 */
}

.cost-row.total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f5f5f5;
    align-items: center;
}

.cost-value.price {
    color: #ff5000;
    font-size: 20px;
    font-weight: bold;
}

/* 底部按钮 */
.bottom-actions {
    background-color: #ffffff;
    padding: 12px 15px;
    padding-bottom: 30px;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.08);
}

.action-bar-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.action-left {
    padding: 0;
    margin-right: 0;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
}

.service-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

.service-label {
    font-size: 11px;
    color: #666;
}

.action-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.btn {
    margin: 0;
    margin-left: 12px;
    padding: 0 18px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #ddd;
    color: #444;
}

.btn.primary {
    background: linear-gradient(to right, #ff9000, #ff5000);
    color: #ffffff;
    border: none;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(255, 80, 0, 0.2);
}

.btn.share-free {
    background: linear-gradient(to right, #52c41a, #73d13d);
    color: #ffffff;
    border: none;
    font-weight: bold;
}

/* 响应式适配 */
@media screen and (min-width: 768px) {
    .card {
        width: 1200px;
        max-width: 1080px;
        margin: 15px auto;
        padding: 25px;
        box-sizing: border-box;
    }
    
    .status-content, .action-bar-wrapper {
        width: 1200px;
        max-width: 1080px;
        margin: 0 auto;
    }

    /* 优化店铺头部在大屏下的自适应布局 */
    .shop-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 15px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
    }
    
    .shop-icon {
        font-size: 20px;
        margin-right: 12px;
    }
    
    .shop-name {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        flex: 1;
    }
    
    .arrow-right {
        font-size: 18px;
        color: #ccc;
        margin-left: auto; /* 确保箭头始终在最右侧 */
    }

    /* 费用明细在大屏下的居中对齐 */
    .cost-detail {
        display: flex;
        flex-direction: column;
        align-items: center; /* 整体板块内容在大屏下也保持水平居中 */
    }
    
    .cost-row {
        width: 100%;
        max-width: 500px;
        margin-bottom: 12px;
        font-size: 15px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .cost-row.total {
        width: 100%;
        max-width: 500px;
        padding-top: 20px;
        margin-top: 10px;
        border-top: 1px solid #eee;
    }

    .cost-label {
        font-size: 15px;
        color: #666;
    }

    .cost-value.price {
        font-size: 28px;
    }

    /* 配送信息平铺优化 */
    .delivery-info-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }
    
    .delivery-address {
        flex: 2;
    }
    
    .courier-info {
        flex: 1;
        border-top: none;
        margin-top: 0;
        padding-top: 0;
        justify-content: flex-end;
    }

    /* 订单信息在大屏下对齐展示 */
    .order-info {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .order-info .info-row {
        width: 30%;
        margin: 0 1.5% 10px 1.5%;
        border-bottom: 1px solid #f9f9f9;
        padding-bottom: 8px;
    }
    
    .status-text {
        font-size: 26px;
    }
    
    .btn {
        height: 42px;
        line-height: 42px;
        padding: 0 30px;
        font-size: 15px;
    }
}

/* 状态样式 */
.status-4 .status-text { /* Completed */ }
</style>
