<!-- pages/mall/consumer/orders.uvue -->
<template>
    <view class="orders-page" :style="ordersPageStyle">
        <view class="orders-header" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="custom-nav-row" :style="{ paddingRight: headerRightReserve + 'px', height: navHeight + 'px' }">
                <view class="nav-back-btn" @click="goBack">
                    <text class="nav-back-icon">‹</text>
                </view>

                <view class="search-shell">
                    <text class="search-icon-left">🔍</text>
                    <input
                        class="search-input"
                        type="text"
                        placeholder="搜索订单号、药品、器械或服务"
                        :value="searchKeyword"
                        @input="onSearchInput"
                        @confirm="onSearchConfirm"
                    />
                    <text v-if="searchKeyword != ''" class="search-clear" @click="clearSearch">×</text>
                </view>
            </view>
        </view>

        <view class="biz-tabs-wrap">
            <view
                v-for="tab in businessTabs"
                :key="tab.id"
                :class="['biz-tab-item', { active: activeBizType === tab.id }]"
                @click="switchBizTab(tab.id)"
            >
                <text class="biz-tab-text">{{ tab.name }}</text>
                <text v-if="tab.count > 0" class="biz-tab-badge">{{ tab.count }}</text>
                <view v-if="activeBizType === tab.id" class="biz-tab-indicator"></view>
            </view>
        </view>

        <view class="status-tabs-wrap">
            <scroll-view
                class="status-tabs-scroll"
                direction="horizontal"
                :show-scrollbar="false"
                :scroll-with-animation="true"
            >
                <view class="status-tabs-inner">
                    <view
                        v-for="tab in currentStatusTabs"
                        :key="tab.id"
                        :class="['status-tab-item', { active: activeStatusTab === tab.id }]"
                        @click="switchStatusTab(tab.id)"
                    >
                        <text class="status-tab-text">{{ tab.name }}</text>
                        <text v-if="tab.count > 0" class="status-tab-badge">{{ tab.count }}</text>
                    </view>
                </view>
            </scroll-view>
        </view>

        <scroll-view
            class="orders-content"
            :style="ordersContentStyle"
            scroll-y="true"
            :scroll-top="scrollTop"
            refresher-enabled
            :refresher-triggered="refreshing"
            :lower-threshold="120"
            @refresherrefresh="onRefresh"
            @scroll="onOrdersScroll"
            @scrolltolower="loadMore"
        >
            <view v-if="!loading && loadedOrders.length === 0" class="empty-orders">
                <text class="empty-icon">📦</text>
                <text class="empty-title">{{ getEmptyStateTitle() }}</text>
                <text class="empty-desc">{{ getEmptyStateDescription() }}</text>
                <button class="go-shopping-btn" @click="goShopping">去逛逛</button>
            </view>

            <view v-else class="virtual-list">
                <view class="virtual-top-spacer" :style="{ height: topSpacerHeight + 'px' }"></view>

                <view
                    v-for="order in visibleOrders"
                    :key="order.id"
                    class="virtual-order-item"
                    :style="{ height: getOrderCardHeight(order) + 'px' }"
                >
                    <view class="order-card" :style="{ height: getOrderCardBodyHeight(order) + 'px' }" @click="viewOrderDetail(order)">
                        <view class="order-card-header">
                            <view class="shop-info">
                                <view class="shop-title-row">
                                    <text class="shop-icon">🏥</text>
                                    <text class="shop-name">{{ getOrderShopName(order) }}</text>
                                    <text class="arrow-right">></text>
                                </view>
                                <text class="order-meta-line">{{ getOrderMetaLine(order) }}</text>
                            </view>
                            <view class="status-row">
                                <view class="status-main">
                                    <text :class="['order-status', getStatusClass(order)]">{{ getOrderStatusText(order) }}</text>
                                    <text v-if="getOrderStatusCountdownText(order) != ''" :class="['order-status-countdown', getStatusClass(order)]">{{ getOrderStatusCountdownText(order) }}</text>
                                </view>
                                <text v-if="shouldShowDeleteIcon(order)" class="delete-order-icon" @click.stop="deleteOrder(order.id)">🗑</text>
                                <text v-else class="more-btn" @click.stop="showOrderMenu(order)">⋯</text>
                            </view>
                        </view>

                        <view class="order-main" @click.stop="onCardContentTap(order)">
                            <image class="order-cover" :src="getOrderCover(order)" mode="aspectFill" lazy-load="true" />
                            <view class="order-main-info">
                                <text class="order-main-title">{{ getOrderTitle(order) }}</text>

                                <view v-if="order.biz_type === 'service'" class="service-meta-wrap">
                                    <text class="service-meta-text">预约：{{ getServiceAppointmentText(order) }}</text>
                                    <text class="service-meta-text">地址：{{ getServiceAddressText(order) }}</text>
                                </view>

                                <view v-else class="goods-meta-wrap">
                                    <text class="goods-spec-chip">{{ getPrimaryProductSpec(order) }}</text>
                                    <text v-if="getExtraGoodsCount(order) > 0" class="goods-extra-text">共{{ order.products.length }}件商品</text>
                                </view>

                                <view class="order-main-footer">
                                    <text class="order-main-price">¥{{ formatAmount(getOrderPrimaryPrice(order)) }}</text>
                                    <text class="order-main-count">{{ getOrderPrimaryCountText(order) }}</text>
                                </view>
                            </view>
                        </view>

                        <view class="order-summary">
                            <text class="order-time">{{ formatDate(order.create_time) }}</text>
                            <view class="summary-right">
                                <text class="summary-text">{{ getOrderSummaryPrefix(order) }}</text>
                                <text class="summary-price-label">实付:</text>
                                <text class="summary-price">¥{{ formatAmount(order.total_amount) }}</text>
                            </view>
                        </view>

                        <view class="order-actions" @click.stop="">
                            <view class="action-buttons">
                                <button
                                    v-for="action in getOrderActions(order)"
                                    :key="action.id"
                                    :class="['action-btn', action.kind === 'primary' ? 'primary' : 'secondary']"
                                    @click.stop="onOrderActionTap(order, action.id)"
                                >
                                    {{ action.name }}
                                </button>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="virtual-bottom-spacer" :style="{ height: bottomSpacerHeight + 'px' }"></view>
            </view>

            <view v-if="loadingMore" class="loading-more">
                <view class="loading-spinner"></view>
                <text>加载中...</text>
            </view>

            <view v-if="!hasMore && loadedOrders.length > 0" class="no-more">
                <text>没有更多订单了</text>
            </view>

            <view class="safe-area"></view>
        </scroll-view>

        <view class="tabbar-placeholder"></view>
    </view>
</template>

<script setup lang="uts">
import { computed, ref } from 'vue'
import { onHide, onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { supabaseService } from '@/utils/supabaseService.uts'
import { goToLogin } from '@/utils/utils.uts'
import { formatCountdownHM, getRemainingSeconds, getUnifiedDisplayState, isOrderPayExpired, isPendingPayOrder, ORDER_STATUS_CANCELLED, ORDER_STATUS_PENDING, ORDER_STATUS_TIMEOUT_LEGACY, ORDER_TIMEOUT_CANCEL_REASON, PAYMENT_STATUS_TIMEOUT, PAYMENT_STATUS_UNPAID, type OrderStatusSource } from '@/utils/orderStatus.uts'

type BusinessTabItem = {
    id: string,
    name: string,
    count: number
}

type StatusTabItem = {
    id: string,
    name: string,
    count: number
}

type OrderProduct = {
    id: string,
    name: string,
    price: number,
    image: string,
    spec: string,
    quantity: number
}

type UnifiedServiceInfo = {
    service_name: string,
    service_image: string,
    appointment_time: string,
    address: string,
    contact_name: string,
    contact_phone: string,
    provider_name: string
}

type OrderItem = {
    id: string,
    order_no: string,
    biz_type: string,
    source: string,
    status: number,
    payment_status: number,
    cancel_reason: string,
    pay_expire_at: string,
    create_time: string,
    product_amount: number,
    shipping_fee: number,
    total_amount: number,
    merchant_id: string,
    shop_name: string,
    products: OrderProduct[],
    service_info: UnifiedServiceInfo | null
}

type UnifiedOrdersCursorResult = {
    list: OrderItem[],
    nextCursor: string,
    hasMore: boolean
}

type OrderActionItem = {
    id: string,
    name: string,
    kind: string
}

const SEARCH_HEADER_HEIGHT = 44
const BIZ_TABS_HEIGHT = 44
const STATUS_TABS_HEIGHT = 42
const TABBAR_HEIGHT = 50

const ORDER_CARD_GAP = 10
const ORDER_HEADER_HEIGHT = 44
const ORDER_PRODUCT_HEIGHT = 88
const ORDER_SERVICE_PRODUCT_HEIGHT = 104
const ORDER_SUMMARY_HEIGHT = 36
const ORDER_ACTIONS_HEIGHT = 54
const ORDER_CARD_AVERAGE_HEIGHT = 232
const ORDER_VISIBLE_PRODUCT_LIMIT = 1
const VIRTUAL_BUFFER = 5
const PAGE_SIZE = 10
const PREFETCH_THRESHOLD = 5
const loadedOrders = ref<OrderItem[]>([])
const visibleOrders = ref<OrderItem[]>([])

const loading = ref<boolean>(false)
const loadingMore = ref<boolean>(false)
const refreshing = ref<boolean>(false)
const hasMore = ref<boolean>(true)
const initialized = ref<boolean>(false)

const pageSize = ref<number>(PAGE_SIZE)
const nextCursor = ref<string>('')
const totalLoaded = ref<number>(0)

const scrollTop = ref<number>(0)
const viewportHeight = ref<number>(0)
const pageWindowHeight = ref<number>(0)
const isAndroidApp = ref<boolean>(false)

const startIndex = ref<number>(0)
const endIndex = ref<number>(0)
const topSpacerHeight = ref<number>(0)
const bottomSpacerHeight = ref<number>(0)

const activeBizType = ref<string>('all')
const activeStatusTab = ref<string>('all')
const searchKeyword = ref<string>('')
const statusBarHeight = ref<number>(0)
const headerRightReserve = ref<number>(12)
const navHeight = ref<number>(44)

const goodsStatusCounts = ref<UTSJSONObject>(createCountBucket())
const serviceStatusCounts = ref<UTSJSONObject>(createCountBucket())

let searchTimer: number = 0
const nowTick = ref<number>(Date.now())
let orderTicker = 0
const expiringOrderIds: string[] = []

function toOrderStatusSource(order: OrderItem): OrderStatusSource {
    let inferredPaymentStatus = order.payment_status
    if (inferredPaymentStatus <= 0) {
        if (order.status == ORDER_STATUS_PENDING) {
            inferredPaymentStatus = PAYMENT_STATUS_UNPAID
        } else if (order.status == ORDER_STATUS_CANCELLED || order.status == ORDER_STATUS_TIMEOUT_LEGACY) {
            inferredPaymentStatus = PAYMENT_STATUS_TIMEOUT
        } else {
            inferredPaymentStatus = 2
        }
    }

    return {
        source: order.source,
        order_status: order.status,
        payment_status: inferredPaymentStatus,
        pay_expire_at: order.pay_expire_at,
        created_at: order.create_time,
        cancel_reason: order.cancel_reason
    }
}

function isTimeoutOrder(order: OrderItem): boolean {
    return isOrderPayExpired(toOrderStatusSource(order))
}

function isPendingPayDisplayOrder(order: OrderItem): boolean {
    return isPendingPayOrder(toOrderStatusSource(order))
}

function getOrderStatusCountdownText(order: OrderItem): string {
    const currentTick = nowTick.value
    if (currentTick < 0) {
        return ''
    }
    if (!isPendingPayDisplayOrder(order)) {
        return ''
    }
    const seconds = getRemainingSeconds(toOrderStatusSource(order))
    if (seconds <= 0) {
        return ''
    }
    return formatCountdownHM(seconds)
}

function shouldShowDeleteIcon(order: OrderItem): boolean {
    const displayState = getUnifiedDisplayState(toOrderStatusSource(order))
    return displayState == 'cancelled' || displayState == 'expired'
}

function isExpiring(orderId: string): boolean {
    return expiringOrderIds.indexOf(orderId) >= 0
}

function pushExpiringOrder(orderId: string): void {
    if (!isExpiring(orderId)) {
        expiringOrderIds.push(orderId)
    }
}

function removeExpiringOrder(orderId: string): void {
    const index = expiringOrderIds.indexOf(orderId)
    if (index >= 0) {
        expiringOrderIds.splice(index, 1)
    }
}

function syncExpiredOrders(): void {
    for (let i = 0; i < loadedOrders.value.length; i++) {
        const order = loadedOrders.value[i]
        const source = toOrderStatusSource(order)
        if (isPendingPayDisplayOrder(order) && isOrderPayExpired(source) && !isExpiring(order.id)) {
            pushExpiringOrder(order.id)
            const expiredStatus = order.biz_type === 'service' ? ORDER_STATUS_TIMEOUT_LEGACY : ORDER_STATUS_CANCELLED
            updateLoadedOrderStatus(order.id, expiredStatus, PAYMENT_STATUS_TIMEOUT, ORDER_TIMEOUT_CANCEL_REASON, order.pay_expire_at)
            supabaseService.expireUnifiedOrder(order.id, order.source).finally(() => {
                removeExpiringOrder(order.id)
                loadOrderCounts()
            })
        }
    }
}

function startOrderTicker(): void {
    if (orderTicker > 0) {
        return
    }
    nowTick.value = Date.now()
    syncExpiredOrders()
    orderTicker = setInterval(() => {
        nowTick.value = Date.now()
        syncExpiredOrders()
    }, 1000)
}

function stopOrderTicker(): void {
    if (orderTicker > 0) {
        clearInterval(orderTicker)
        orderTicker = 0
    }
}

function createCountBucket(): UTSJSONObject {
    const bucket = new UTSJSONObject()
    bucket.set('all', 0)
    bucket.set('pending', 0)
    bucket.set('inprogress', 0)
    bucket.set('shipping', 0)
    bucket.set('delivering', 0)
    bucket.set('completed', 0)
    bucket.set('aftersale', 0)
    bucket.set('accepted', 0)
    bucket.set('scheduled', 0)
    bucket.set('inservice', 0)
    return bucket
}

function getBucketCount(bucket: UTSJSONObject, key: string): number {
    const value = bucket.getNumber(key)
    if (value != null) {
        return value
    }
    return 0
}

function setBucketCount(bucket: UTSJSONObject, key: string, value: number): void {
    bucket.set(key, value)
}

function goBack(): void {
    const pages = getCurrentPages()
    if (pages.length > 1) {
        uni.navigateBack()
    } else {
        uni.switchTab({ url: '/pages/mall/consumer/profile' })
    }
}

const businessTabs = computed((): BusinessTabItem[] => {
    const tabs: BusinessTabItem[] = []
    tabs.push({ id: 'all', name: '全部', count: getBucketCount(goodsStatusCounts.value, 'all') + getBucketCount(serviceStatusCounts.value, 'all') })
    tabs.push({ id: 'goods', name: '购物', count: getBucketCount(goodsStatusCounts.value, 'all') })
    tabs.push({ id: 'service', name: '服务', count: getBucketCount(serviceStatusCounts.value, 'all') })
    return tabs
})

const currentStatusTabs = computed((): StatusTabItem[] => {
    const tabs: StatusTabItem[] = []
    if (activeBizType.value === 'service') {
        tabs.push({ id: 'all', name: '全部', count: getBucketCount(serviceStatusCounts.value, 'all') })
        tabs.push({ id: 'pending', name: '待付款', count: getBucketCount(serviceStatusCounts.value, 'pending') })
        tabs.push({ id: 'accepted', name: '待接单', count: getBucketCount(serviceStatusCounts.value, 'accepted') })
        tabs.push({ id: 'scheduled', name: '待服务', count: getBucketCount(serviceStatusCounts.value, 'scheduled') })
        tabs.push({ id: 'inservice', name: '服务中', count: getBucketCount(serviceStatusCounts.value, 'inservice') })
        tabs.push({ id: 'completed', name: '已完成', count: getBucketCount(serviceStatusCounts.value, 'completed') })
        tabs.push({ id: 'aftersale', name: '售后', count: getBucketCount(serviceStatusCounts.value, 'aftersale') })
        return tabs
    }

    if (activeBizType.value === 'goods') {
        tabs.push({ id: 'all', name: '全部', count: getBucketCount(goodsStatusCounts.value, 'all') })
        tabs.push({ id: 'pending', name: '待付款', count: getBucketCount(goodsStatusCounts.value, 'pending') })
        tabs.push({ id: 'shipping', name: '待发货', count: getBucketCount(goodsStatusCounts.value, 'shipping') })
        tabs.push({ id: 'delivering', name: '待收货', count: getBucketCount(goodsStatusCounts.value, 'delivering') })
        tabs.push({ id: 'completed', name: '已完成', count: getBucketCount(goodsStatusCounts.value, 'completed') })
        tabs.push({ id: 'aftersale', name: '售后', count: getBucketCount(goodsStatusCounts.value, 'aftersale') })
        return tabs
    }

    tabs.push({ id: 'all', name: '全部', count: getBucketCount(goodsStatusCounts.value, 'all') + getBucketCount(serviceStatusCounts.value, 'all') })
    tabs.push({ id: 'pending', name: '待付款', count: getBucketCount(goodsStatusCounts.value, 'pending') + getBucketCount(serviceStatusCounts.value, 'pending') })
    tabs.push({ id: 'inprogress', name: '进行中', count: getBucketCount(goodsStatusCounts.value, 'inprogress') + getBucketCount(serviceStatusCounts.value, 'accepted') + getBucketCount(serviceStatusCounts.value, 'scheduled') + getBucketCount(serviceStatusCounts.value, 'inservice') })
    tabs.push({ id: 'completed', name: '已完成', count: getBucketCount(goodsStatusCounts.value, 'completed') + getBucketCount(serviceStatusCounts.value, 'completed') })
    tabs.push({ id: 'aftersale', name: '售后', count: getBucketCount(goodsStatusCounts.value, 'aftersale') + getBucketCount(serviceStatusCounts.value, 'aftersale') })
    return tabs
})

const ordersPageStyle = computed((): string => {
    if (!isAndroidApp.value) {
        return ''
    }
    if (pageWindowHeight.value <= 0) {
        return ''
    }
    return 'height:' + pageWindowHeight.value + 'px;min-height:' + pageWindowHeight.value + 'px;'
})

const ordersContentStyle = computed((): string => {
    if (!isAndroidApp.value) {
        return ''
    }
    if (viewportHeight.value <= 0) {
        return ''
    }
    return 'height:' + viewportHeight.value + 'px;min-height:' + viewportHeight.value + 'px;'
})

const getOptionString = (options: UTSJSONObject, key: string): string => {
    try {
        const value = options.getString(key)
        if (value != null) {
            return value
        }
    } catch (e) {
    }

    try {
        const normalized = JSON.parse(JSON.stringify(options)) as UTSJSONObject
        const value = normalized.getString(key)
        if (value != null) {
            return value
        }
    } catch (e) {
    }

    return ''
}

function unwrapJsonScalar(value: UTSJSONObject | string | number | null): string {
    if (value == null) return ''
    const raw = JSON.stringify(value)
    if (raw == 'null') return ''
    if (raw.startsWith('"') && raw.endsWith('"') && raw.length >= 2) {
        return raw.substring(1, raw.length - 1)
    }
    return raw
}

function formatSpecObj(obj: UTSJSONObject | string | number | null): string {
    if (obj == null) return ''
    const scalar = unwrapJsonScalar(obj)
    if (scalar == '') return ''
    if (!scalar.startsWith('{') && !scalar.startsWith('[')) {
        return scalar
    }

    try {
        const objParsed = JSON.parse(scalar)
        if (objParsed == null) return ''

        const specObj = objParsed as UTSJSONObject
        const specObjStr = JSON.stringify(specObj)
        const specObjForKeys = JSON.parse(specObjStr) as UTSJSONObject
        const parts: string[] = []

        const colorVal = specObjForKeys.getString('Color')
        if (colorVal != null && colorVal != '') {
            parts.push('Color: ' + colorVal)
        }

        const sizeVal = specObjForKeys.getString('Size')
        if (sizeVal != null && sizeVal != '') {
            parts.push('Size: ' + sizeVal)
        }

        const defaultVal = specObjForKeys.getString('默认')
        if (defaultVal != null && defaultVal != '') {
            parts.push('默认: ' + defaultVal)
        }

        if (parts.length === 0) {
            return specObjStr.replace(/[{}\"]/g, '').replace(/:/g, ': ').replace(/,/g, ' | ')
        }

        return parts.join(' | ')
    } catch (e) {
        return ''
    }
}

function parseSpecText(specs: UTSJSONObject | string | number | null): string {
    if (specs == null) return ''
    const scalar = unwrapJsonScalar(specs)
    if (scalar == '') return ''
    if (scalar.startsWith('{') || scalar.startsWith('[')) {
        try {
            const parsed = JSON.parse(scalar)
            if (parsed == null) return scalar
            return formatSpecObj(parsed)
        } catch (e) {
            return scalar
        }
    }
    return scalar
}

function mapServiceInfo(rawValue: UTSJSONObject | string | number | null): UnifiedServiceInfo | null {
    if (rawValue == null) {
        return null
    }

    try {
        const rawText = unwrapJsonScalar(rawValue)
        if (rawText == '') {
            return null
        }

        let infoObj: UTSJSONObject | null = null
        if (rawText.startsWith('{')) {
            const parsed = JSON.parse(rawText)
            if (parsed != null) {
                infoObj = parsed as UTSJSONObject
            }
        } else if (rawValue instanceof UTSJSONObject) {
            infoObj = rawValue
        }

        if (infoObj == null) {
            return null
        }

        return {
            service_name: infoObj.getString('service_name') ?? '',
            service_image: infoObj.getString('service_image') ?? '/static/images/default.png',
            appointment_time: infoObj.getString('appointment_time') ?? '',
            address: infoObj.getString('address') ?? '',
            contact_name: infoObj.getString('contact_name') ?? '',
            contact_phone: infoObj.getString('contact_phone') ?? '',
            provider_name: infoObj.getString('provider_name') ?? ''
        }
    } catch (e) {
        return null
    }
}

const mapRawOrdersToViewModels = (rawOrders: UTSJSONObject[]): OrderItem[] => {
    const mappedOrders: OrderItem[] = []
    for (let i = 0; i < rawOrders.length; i++) {
        const order = rawOrders[i]
        const orderStr = JSON.stringify(order)
        const orderParsed = JSON.parse(orderStr)
        if (orderParsed == null) continue
        const orderObj = orderParsed as UTSJSONObject

        const itemsRaw = orderObj.get('ml_order_items')
        const productsList: OrderProduct[] = []
        if (itemsRaw != null && Array.isArray(itemsRaw)) {
            const items = itemsRaw as UTSJSONObject[]
            for (let j = 0; j < items.length; j++) {
                const item = items[j]
                const itemStr = JSON.stringify(item)
                const itemParsed = JSON.parse(itemStr)
                if (itemParsed == null) continue
                const itemObj = itemParsed as UTSJSONObject

                const specRaw = itemObj.get('specifications')
                const specText = specRaw != null ? parseSpecText(specRaw) : ''
                const productId = itemObj.getString('product_id')
                const productName = itemObj.getString('product_name')
                const price = itemObj.getNumber('price')
                const imageUrl = itemObj.getString('image_url') ?? itemObj.getString('product_image')
                const quantity = itemObj.getNumber('quantity')

                productsList.push({
                    id: productId ?? '',
                    name: productName ?? '订单商品',
                    price: price ?? 0,
                    image: imageUrl ?? '/static/images/default.png',
                    spec: specText,
                    quantity: quantity ?? 1
                })
            }
        }

        const orderId = orderObj.getString('id')
        const orderNo = orderObj.getString('order_no')
        const orderStatus = orderObj.getNumber('order_status')
        const createdAt = orderObj.getString('created_at')
        const productAmount = orderObj.getNumber('product_amount')
        const shippingFee = orderObj.getNumber('shipping_fee')
        const totalAmount = orderObj.getNumber('total_amount')
        const paidAmount = orderObj.getNumber('paid_amount')
        const merchantId = orderObj.getString('merchant_id')
        const bizTypeRaw = orderObj.getString('biz_type')
        const bizType = bizTypeRaw != null && bizTypeRaw != '' ? bizTypeRaw : 'goods'

        let shopName = '康养商城'
        const shopsRaw = orderObj.get('ml_shops')
        if (shopsRaw != null) {
            const shopStr = JSON.stringify(shopsRaw)
            const shopParsed = JSON.parse(shopStr)
            if (shopParsed != null) {
                const shopObj = shopParsed as UTSJSONObject
                const shopNameFromDb = shopObj.getString('shop_name')
                if (shopNameFromDb != null && shopNameFromDb != '') {
                    shopName = shopNameFromDb
                }
            }
        } else if (merchantId != null && merchantId != '') {
            shopName = '商家店铺'
        }

        const serviceInfo = mapServiceInfo(orderObj.get('service_info'))

        if (productsList.length === 0 && bizType !== 'service') {
            productsList.push({
                id: 'placeholder',
                name: '订单商品',
                price: totalAmount ?? paidAmount ?? 0,
                image: '/static/images/default.png',
                spec: '',
                quantity: 1
            })
        }

        mappedOrders.push({
            id: orderId ?? '',
            order_no: orderNo ?? '',
            biz_type: bizType,
            source: orderObj.getString('source') ?? (bizType == 'service' ? 'service' : 'goods'),
            status: orderStatus ?? 1,
            payment_status: orderObj.getNumber('payment_status') ?? 1,
            cancel_reason: orderObj.getString('cancel_reason') ?? '',
            pay_expire_at: orderObj.getString('pay_expire_at') ?? '',
            create_time: createdAt ?? '',
            product_amount: productAmount ?? 0,
            shipping_fee: shippingFee ?? 0,
            total_amount: totalAmount ?? paidAmount ?? 0,
            merchant_id: merchantId ?? '',
            shop_name: shopName,
            products: productsList,
            service_info: serviceInfo
        })
    }
    return mappedOrders
}

const mergeOrders = (currentOrders: OrderItem[], appendOrders: OrderItem[]): OrderItem[] => {
    const merged: OrderItem[] = []
    for (let i = 0; i < currentOrders.length; i++) {
        merged.push(currentOrders[i])
    }
    for (let i = 0; i < appendOrders.length; i++) {
        const nextOrder = appendOrders[i]
        let exists = false
        for (let j = 0; j < merged.length; j++) {
            if (merged[j].id === nextOrder.id) {
                merged[j] = nextOrder
                exists = true
                break
            }
        }
        if (!exists) {
            merged.push(nextOrder)
        }
    }
    return merged
}

const resetListState = () => {
    loadedOrders.value = []
    visibleOrders.value = []
    totalLoaded.value = 0
    scrollTop.value = 0
    startIndex.value = 0
    endIndex.value = 0
    topSpacerHeight.value = 0
    bottomSpacerHeight.value = 0
    nextCursor.value = ''
    hasMore.value = true
}

const getShortOrderNo = (orderNo: string): string => {
    if (orderNo == '') {
        return '--'
    }
    if (orderNo.length <= 12) {
        return orderNo
    }
    return orderNo.substring(orderNo.length - 12)
}

const formatAmount = (value: number): string => {
    return value.toFixed(2)
}

function formatOrderHeaderTime(isoString: string): string {
    if (isoString == '') return '--'
    const date = new Date(isoString)
    const month = (date.getMonth() + 1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    const hour = date.getHours().toString().padStart(2, '0')
    const minute = date.getMinutes().toString().padStart(2, '0')
    return `${month}-${day} ${hour}:${minute}`
}

function getOrderMetaLine(order: OrderItem): string {
    return `订单号 ${getShortOrderNo(order.order_no)} · 下单 ${formatOrderHeaderTime(order.create_time)}`
}

const getPrimaryOrderProduct = (order: OrderItem): OrderProduct | null => {
    if (order.products.length > 0) {
        return order.products[0]
    }
    return null
}

const getExtraGoodsCount = (order: OrderItem): number => {
    const hiddenCount = order.products.length - ORDER_VISIBLE_PRODUCT_LIMIT
    if (hiddenCount > 0) {
        return hiddenCount
    }
    return 0
}

const getOrderCover = (order: OrderItem): string => {
    if (order.biz_type === 'service' && order.service_info != null && order.service_info.service_image != '') {
        return order.service_info.service_image
    }
    const product = getPrimaryOrderProduct(order)
    if (product != null && product.image != '') {
        return product.image
    }
    return '/static/images/default.png'
}

const getOrderTitle = (order: OrderItem): string => {
    if (order.biz_type === 'service' && order.service_info != null && order.service_info.service_name != '') {
        return order.service_info.service_name
    }
    const product = getPrimaryOrderProduct(order)
    if (product != null && product.name != '') {
        return product.name
    }
    return '订单商品'
}

const getPrimaryProductSpec = (order: OrderItem): string => {
    const product = getPrimaryOrderProduct(order)
    if (product != null && product.spec != '') {
        return product.spec
    }
    return '默认规格'
}

const getServiceAppointmentText = (order: OrderItem): string => {
    if (order.service_info != null && order.service_info.appointment_time != '') {
        return order.service_info.appointment_time
    }
    return '待确认'
}

const getServiceAddressText = (order: OrderItem): string => {
    if (order.service_info != null && order.service_info.address != '') {
        return order.service_info.address
    }
    return '服务地址待确认'
}

const getOrderPrimaryPrice = (order: OrderItem): number => {
    const product = getPrimaryOrderProduct(order)
    if (product != null) {
        return product.price
    }
    return order.total_amount
}

const getOrderPrimaryCountText = (order: OrderItem): string => {
    if (order.biz_type === 'service') {
        return '服务预约'
    }
    const product = getPrimaryOrderProduct(order)
    if (product != null) {
        return 'x' + product.quantity
    }
    return 'x1'
}

const getOrderItemCount = (order: OrderItem): number => {
    if (order.biz_type === 'service') {
        return 1
    }
    if (order.products.length > 0) {
        return order.products.length
    }
    return 1
}

const getOrderSummaryPrefix = (order: OrderItem): string => {
    if (order.biz_type === 'service') {
        return '共1项服务 '
    }
    return '含运费¥' + formatAmount(order.shipping_fee) + ' 共' + getOrderItemCount(order) + '件商品 '
}

const getOrderProductBlockHeight = (order: OrderItem): number => {
    if (order.biz_type === 'service') {
        return ORDER_SERVICE_PRODUCT_HEIGHT
    }
    return ORDER_PRODUCT_HEIGHT
}

function getOrderCardBodyHeight(order: OrderItem): number {
    return ORDER_HEADER_HEIGHT + getOrderProductBlockHeight(order) + ORDER_SUMMARY_HEIGHT + ORDER_ACTIONS_HEIGHT
}

function getOrderCardHeight(order: OrderItem): number {
    return getOrderCardBodyHeight(order) + ORDER_CARD_GAP
}

function getAccumulatedHeight(endIndexExclusive: number): number {
    let totalHeight = 0
    for (let i = 0; i < endIndexExclusive; i++) {
        totalHeight += getOrderCardHeight(loadedOrders.value[i])
    }
    return totalHeight
}

function getIndexByScrollTop(currentScrollTop: number): number {
    let accumulatedHeight = 0
    for (let i = 0; i < loadedOrders.value.length; i++) {
        accumulatedHeight += getOrderCardHeight(loadedOrders.value[i])
        if (accumulatedHeight > currentScrollTop) {
            return i
        }
    }
    return Math.max(0, loadedOrders.value.length - 1)
}

const updateVisibleWindow = () => {
    const total = loadedOrders.value.length
    totalLoaded.value = total

    if (total === 0) {
        visibleOrders.value = []
        topSpacerHeight.value = 0
        bottomSpacerHeight.value = 0
        startIndex.value = 0
        endIndex.value = 0
        return
    }

    const rawStart = getIndexByScrollTop(scrollTop.value)
    const start = Math.max(0, rawStart - VIRTUAL_BUFFER)
    const targetHeight = viewportHeight.value + (VIRTUAL_BUFFER * ORDER_CARD_AVERAGE_HEIGHT)
    let end = start
    let renderedHeight = 0
    while (end < total && renderedHeight < targetHeight) {
        renderedHeight += getOrderCardHeight(loadedOrders.value[end])
        end++
    }
    if (end < total) {
        end = Math.min(total, end + VIRTUAL_BUFFER)
    }

    startIndex.value = start
    endIndex.value = end
    visibleOrders.value = loadedOrders.value.slice(start, end)
    topSpacerHeight.value = getAccumulatedHeight(start)
    const totalHeight = getAccumulatedHeight(total)
    const visibleHeight = getAccumulatedHeight(end) - topSpacerHeight.value
    bottomSpacerHeight.value = Math.max(0, totalHeight - topSpacerHeight.value - visibleHeight)
}

function matchesGoodsStatusTab(status: number): boolean {
    if (activeStatusTab.value === 'all') return true
    if (activeStatusTab.value === 'pending') return status === 1
    if (activeStatusTab.value === 'shipping') return status === 2
    if (activeStatusTab.value === 'delivering') return status === 3
    if (activeStatusTab.value === 'completed') return status === 4
    if (activeStatusTab.value === 'aftersale') return status === 6 || status === 7
    if (activeStatusTab.value === 'inprogress') return status === 2 || status === 3
    return true
}

function matchesServiceStatusTab(status: number): boolean {
    if (activeStatusTab.value === 'all') return true
    if (activeStatusTab.value === 'pending') return status === 1
    if (activeStatusTab.value === 'accepted') return status === 2
    if (activeStatusTab.value === 'scheduled') return status === 3
    if (activeStatusTab.value === 'inservice') return status === 4
    if (activeStatusTab.value === 'completed') return status === 5
    if (activeStatusTab.value === 'aftersale') return status === 6 || status === 7
    return true
}

function matchesCurrentFilters(order: OrderItem): boolean {
    if (activeBizType.value === 'goods' && order.biz_type !== 'goods') {
        return false
    }
    if (activeBizType.value === 'service' && order.biz_type !== 'service') {
        return false
    }
    if (order.biz_type === 'service') {
        return matchesServiceStatusTab(order.status)
    }
    if (isTimeoutOrder(order)) {
        return activeStatusTab.value === 'all'
    }
    return matchesGoodsStatusTab(order.status)
}

const getLoadedOrderById = (orderId: string): OrderItem | null => {
    for (let i = 0; i < loadedOrders.value.length; i++) {
        const order = loadedOrders.value[i]
        if (order.id === orderId) {
            return order
        }
    }
    return null
}

const removeLoadedOrder = (orderId: string) => {
    loadedOrders.value = loadedOrders.value.filter((order: OrderItem) => order.id !== orderId)
    updateVisibleWindow()
}

const updateLoadedOrderStatus = (orderId: string, nextStatus: number, nextPaymentStatus: number = 0, nextCancelReason: string = '', nextPayExpireAt: string = ''): OrderItem | null => {
    let targetOrder: OrderItem | null = null
    const nextList: OrderItem[] = []
    for (let i = 0; i < loadedOrders.value.length; i++) {
        const currentOrder = loadedOrders.value[i]
        if (currentOrder.id === orderId) {
            currentOrder.status = nextStatus
            if (nextPaymentStatus > 0) {
                currentOrder.payment_status = nextPaymentStatus
            }
            if (nextCancelReason != '') {
                currentOrder.cancel_reason = nextCancelReason
            }
            if (nextPayExpireAt != '') {
                currentOrder.pay_expire_at = nextPayExpireAt
            }
            targetOrder = currentOrder
            if (matchesCurrentFilters(currentOrder)) {
                nextList.push(currentOrder)
            }
        } else {
            nextList.push(currentOrder)
        }
    }
    loadedOrders.value = nextList
    updateVisibleWindow()
    return targetOrder
}

function getGoodsStatusCodeByTab(tabId: string): number {
    if (tabId == 'pending') return 1
    if (tabId == 'shipping') return 2
    if (tabId == 'delivering') return 3
    if (tabId == 'completed') return 4
    if (tabId == 'aftersale') return 6
    return 0
}

async function getUnifiedOrdersCompatByCursor(): Promise<UnifiedOrdersCursorResult> {
    const result = await supabaseService.getUnifiedOrdersByCursor({
        cursor: nextCursor.value,
        limit: pageSize.value,
        bizType: activeBizType.value,
        statusTab: activeStatusTab.value,
        keyword: searchKeyword.value.trim()
    })

    return {
        list: mapRawOrdersToViewModels(result.list),
        nextCursor: result.nextCursor,
        hasMore: result.hasMore
    }
}

const loadOrderCounts = async () => {
    const nextGoodsCounts = createCountBucket()
    const nextServiceCounts = createCountBucket()

    try {
        const counts = await supabaseService.getOrderCounts()
        setBucketCount(nextGoodsCounts, 'all', counts.all)
        setBucketCount(nextGoodsCounts, 'pending', counts.pending)
        setBucketCount(nextGoodsCounts, 'shipping', counts.shipping)
        setBucketCount(nextGoodsCounts, 'delivering', counts.delivering)
        setBucketCount(nextGoodsCounts, 'inprogress', counts.shipping + counts.delivering)
        setBucketCount(nextGoodsCounts, 'completed', counts.completed)
        setBucketCount(nextGoodsCounts, 'aftersale', counts.aftersale)

        const serviceCounts = await supabaseService.getServiceOrderStatusCounts()
        setBucketCount(nextServiceCounts, 'all', serviceCounts.getNumber('all') ?? 0)
        setBucketCount(nextServiceCounts, 'pending', serviceCounts.getNumber('pending') ?? 0)
        setBucketCount(nextServiceCounts, 'accepted', serviceCounts.getNumber('accepted') ?? 0)
        setBucketCount(nextServiceCounts, 'scheduled', serviceCounts.getNumber('scheduled') ?? 0)
        setBucketCount(nextServiceCounts, 'inservice', serviceCounts.getNumber('inservice') ?? 0)
        setBucketCount(nextServiceCounts, 'completed', serviceCounts.getNumber('completed') ?? 0)
        setBucketCount(nextServiceCounts, 'aftersale', serviceCounts.getNumber('aftersale') ?? 0)
    } catch (e) {
        console.error('[orders] 加载订单数量失败:', e)
    }

    goodsStatusCounts.value = nextGoodsCounts
    serviceStatusCounts.value = nextServiceCounts
}

async function loadOrders(reset: boolean): Promise<void> {
    if (loading.value || loadingMore.value) {
        return
    }

    if (!reset && !hasMore.value) {
        return
    }

    if (reset) {
        loading.value = true
        hasMore.value = true
        nextCursor.value = ''
    } else {
        loadingMore.value = true
    }

    try {
        const result = await getUnifiedOrdersCompatByCursor()
        if (reset) {
            loadedOrders.value = result.list
            scrollTop.value = 0
        } else {
            loadedOrders.value = mergeOrders(loadedOrders.value, result.list)
        }

        nextCursor.value = result.nextCursor
        hasMore.value = result.hasMore
        updateVisibleWindow()
        initialized.value = true
    } catch (err) {
        console.error('[orders] 加载订单失败:', err)
        uni.showToast({ title: '加载订单失败', icon: 'none' })
    } finally {
        loading.value = false
        loadingMore.value = false
        refreshing.value = false
    }
}

function loadMore(): void {
    if (loadedOrders.value.length > 0 && loadedOrders.value.length % PREFETCH_THRESHOLD == 0) {
        loadOrders(false)
        return
    }
    loadOrders(false)
}

const refreshCurrentSlice = async () => {
    resetListState()
    await loadOrders(true)
    await loadOrderCounts()
}

function applyLegacyOptions(status: string, type: string): void {
    if (type == 'service') {
        activeBizType.value = 'service'
        activeStatusTab.value = 'all'
    } else if (type == 'goods') {
        activeBizType.value = 'goods'
        activeStatusTab.value = 'all'
    } else if (type == 'pending') {
        activeBizType.value = 'all'
        activeStatusTab.value = 'pending'
    } else if (type == 'shipped') {
        activeBizType.value = 'goods'
        activeStatusTab.value = 'delivering'
    } else if (type == 'review') {
        activeBizType.value = 'all'
        activeStatusTab.value = 'completed'
    } else if (type == 'refund') {
        activeBizType.value = 'all'
        activeStatusTab.value = 'aftersale'
    }

    if (status == 'all') {
        activeBizType.value = 'all'
        activeStatusTab.value = 'all'
    } else if (status == 'pending') {
        activeStatusTab.value = 'pending'
    } else if (status == 'shipping') {
        activeBizType.value = 'goods'
        activeStatusTab.value = 'shipping'
    } else if (status == 'delivering') {
        activeBizType.value = 'goods'
        activeStatusTab.value = 'delivering'
    } else if (status == 'completed') {
        activeStatusTab.value = 'completed'
    } else if (status == 'aftersale') {
        activeStatusTab.value = 'aftersale'
    }
}

onLoad((options) => {
    uni.$on('orderUpdated', handleOrderUpdated)

    const systemInfo = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight ?? 0
    let windowWidth = systemInfo.windowWidth ?? 375
    headerRightReserve.value = 12
    navHeight.value = 44

    // #ifdef MP-WEIXIN
    try {
        const menuButton = uni.getMenuButtonBoundingClientRect()
        headerRightReserve.value = windowWidth - menuButton.left + 8
        navHeight.value = menuButton.height + 8
    } catch (e) {
        headerRightReserve.value = 96
        navHeight.value = 44
    }
    // #endif

    // #ifndef MP-WEIXIN
    headerRightReserve.value = 12
    navHeight.value = 44
    // #endif

    pageWindowHeight.value = systemInfo.windowHeight ?? systemInfo.screenHeight ?? 0
    const windowHeight = pageWindowHeight.value
    const calculatedViewport = windowHeight - statusBarHeight.value - navHeight.value - BIZ_TABS_HEIGHT - STATUS_TABS_HEIGHT - TABBAR_HEIGHT
    viewportHeight.value = calculatedViewport > 0 ? calculatedViewport : windowHeight
    // #ifdef APP-ANDROID
    isAndroidApp.value = true
    // #endif

    if (options == null) return
    const optionsObj = JSON.parse(JSON.stringify(options)) as UTSJSONObject
    const status = getOptionString(optionsObj, 'status')
    const type = getOptionString(optionsObj, 'type')
    applyLegacyOptions(status, type)
})

onUnload(() => {
    stopOrderTicker()
    uni.$off('orderUpdated', handleOrderUpdated)
})

onHide(() => {
    stopOrderTicker()
})

onShow(() => {
    startOrderTicker()
    if (!initialized.value) {
        loadOrders(true)
        loadOrderCounts()
    }
})

const handleOrderUpdated = (payload: any) => {
    try {
        const payloadObj = JSON.parse(JSON.stringify(payload)) as UTSJSONObject
        const targetOrderId = payloadObj.getString('orderId') ?? ''
        if (targetOrderId == '') {
            return
        }
        const nextStatus = payloadObj.getNumber('status') ?? 0
        const nextPaymentStatus = payloadObj.getNumber('paymentStatus') ?? 0
        const nextCancelReason = payloadObj.getString('cancelReason') ?? ''
        updateLoadedOrderStatus(targetOrderId, nextStatus, nextPaymentStatus, nextCancelReason)
        loadOrderCounts()
    } catch (e) {
        refreshCurrentSlice()
    }
}

const formatDate = (isoString: string): string => {
    if (isoString == '') return ''
    const date = new Date(isoString)
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}

const performSearch = () => {
    resetListState()
    loadOrders(true)
}

const onSearchInput = (e: UniInputEvent) => {
    searchKeyword.value = e.detail.value as string
    if (searchTimer > 0) {
        clearTimeout(searchTimer)
    }
    searchTimer = setTimeout(() => {
        performSearch()
    }, 500)
}

const onSearchConfirm = () => {
    if (searchTimer > 0) {
        clearTimeout(searchTimer)
        searchTimer = 0
    }
    performSearch()
}

const clearSearch = () => {
    if (searchTimer > 0) {
        clearTimeout(searchTimer)
        searchTimer = 0
    }
    searchKeyword.value = ''
    performSearch()
}

const switchBizTab = (tabId: string) => {
    if (activeBizType.value === tabId) return
    activeBizType.value = tabId
    activeStatusTab.value = 'all'
    resetListState()
    loadOrders(true)
    loadOrderCounts()
}

const switchStatusTab = (tabId: string) => {
    if (activeStatusTab.value === tabId) return
    activeStatusTab.value = tabId
    resetListState()
    loadOrders(true)
    loadOrderCounts()
}

const onOrdersScroll = (e: UniScrollEvent) => {
    try {
        const detail = e.detail
        if (detail == null) return
        let top = 0
        if (typeof detail.scrollTop == 'number') {
            top = detail.scrollTop
        }
        scrollTop.value = top
        updateVisibleWindow()
    } catch (err) {
        console.error('[orders虚拟列表] 处理滚动失败:', err)
    }
}

const onRefresh = async () => {
    refreshing.value = true
    resetListState()
    await loadOrders(true)
    await loadOrderCounts()
}

const getOrderStatusText = (order: OrderItem): string => {
    const displayState = getUnifiedDisplayState(toOrderStatusSource(order))
    if (displayState == 'pending_pay') return '待付款'
    if (displayState == 'cancelled' || displayState == 'expired') return '已取消'

    if (order.biz_type === 'service') {
        if (order.status == 1) return '待付款'
        if (order.status == 2) return '待接单'
        if (order.status == 3) return '待服务'
        if (order.status == 4) return '服务中'
        if (order.status == 5) return '已完成'
        if (order.status == 6) return '退款中'
        if (order.status == 7) return '已退款'
        if (order.status == 8) return '已取消'
        return '服务处理中'
    }

    if (order.status == 1) return '待付款'
    if (order.status == 2) return '待发货'
    if (order.status == 3) return '待收货'
    if (order.status == 4) return '已完成'
    if (order.status == 5) return '已取消'
    if (order.status == 6) return '退款中'
    if (order.status == 7) return '已退款'
    return '未知状态'
}

const getStatusClass = (order: OrderItem): string => {
    const displayState = getUnifiedDisplayState(toOrderStatusSource(order))
    if (displayState == 'pending_pay') return 'status-pending'
    if (displayState == 'cancelled' || displayState == 'expired') return 'status-cancelled'
    if (order.status == 2 || order.status == 3 || order.status == 4) return 'status-processing'
    if (order.status == 5 || order.status == ORDER_STATUS_TIMEOUT_LEGACY) return 'status-cancelled'
    if (order.status == 6 || order.status == 7) return 'status-aftersale'
    return 'status-default'
}

const getOrderShopName = (order: OrderItem): string => {
    if (order.biz_type === 'service') {
        if (order.service_info != null && order.service_info.provider_name != '') {
            return order.service_info.provider_name
        }
        if (order.shop_name != '') {
            return order.shop_name
        }
        return '康养上门服务'
    }
    if (order.shop_name != '') {
        return order.shop_name
    }
    return '康养商城'
}

const contactSeller = (order: OrderItem) => {
    if (order.merchant_id != '') {
        uni.navigateTo({ url: `/pages/mall/consumer/chat?merchantId=${order.merchant_id}` })
    } else {
        uni.showToast({ title: '暂无联系方式', icon: 'none' })
    }
}

const doDeleteOrder = async (orderId: string): Promise<void> => {
    uni.showLoading({ title: '删除中...' })
    try {
        const currentOrder = getLoadedOrderById(orderId)
        const orderSource = currentOrder != null ? currentOrder.source : 'goods'
        const success = await supabaseService.softDeleteUnifiedOrderForConsumer(orderId, orderSource)
        uni.hideLoading()
        if (success) {
            uni.showToast({ title: '订单已删除', icon: 'success' })
            removeLoadedOrder(orderId)
            loadOrderCounts()
        } else {
            uni.showToast({ title: '删除失败，请稍后重试', icon: 'none' })
        }
    } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '删除失败，请稍后重试', icon: 'none' })
    }
}

const deleteOrder = (orderId: string) => {
    uni.showModal({
        title: '删除订单',
        content: '确定要删除此订单吗？',
        success: (res) => {
            if (res.confirm) {
                doDeleteOrder(orderId)
            }
        }
    })
}

const doCancelOrder = async (orderId: string): Promise<void> => {
    uni.showLoading({ title: '取消中...' })
    try {
        const currentOrder = getLoadedOrderById(orderId)
        const oldPayExpireAt = currentOrder != null ? currentOrder.pay_expire_at : ''
        const orderSource = currentOrder != null ? currentOrder.source : 'goods'
        const success = await supabaseService.cancelUnifiedOrder(orderId, orderSource, '用户取消订单')
        uni.hideLoading()
        if (success) {
            const nextStatus = orderSource == 'service' ? ORDER_STATUS_TIMEOUT_LEGACY : ORDER_STATUS_CANCELLED
            uni.showToast({ title: '订单已取消', icon: 'success' })
            updateLoadedOrderStatus(orderId, nextStatus, PAYMENT_STATUS_TIMEOUT, '用户取消订单', oldPayExpireAt)
            loadOrderCounts()
        } else {
            uni.showToast({ title: '取消失败', icon: 'none' })
        }
    } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '取消失败', icon: 'none' })
    }
}

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

const payOrder = async (order: OrderItem) => {
    nowTick.value = Date.now()

    const totalAmount = order.total_amount
    const userId = supabaseService.getCurrentUserId()
    const paymentUrl = `/pages/mall/consumer/payment?orderId=${encodeURIComponent(order.id)}&bizType=${encodeURIComponent(order.biz_type)}&source=${encodeURIComponent(order.source)}&amount=${totalAmount}`
    if (userId == null || userId === '') {
        goToLogin(paymentUrl)
        return
    }

    const latestOrder = await supabaseService.getUnifiedOrderDetail(order.id, order.source)
    if (latestOrder == null) {
        uni.showToast({ title: '订单不存在或已删除', icon: 'none' })
        return
    }
    if (latestOrder != null) {
        const latestObj = JSON.parse(JSON.stringify(latestOrder)) as UTSJSONObject
        const latestStatus = latestObj.getNumber('order_status') ?? 1
        const latestPaymentStatus = latestObj.getNumber('payment_status') ?? 1
        const latestCancelReason = latestObj.getString('cancel_reason') ?? ''
        const latestPayExpireAt = latestObj.getString('pay_expire_at') ?? ''
        const latestViewOrder: OrderItem = {
            ...order,
            status: latestStatus,
            payment_status: latestPaymentStatus,
            cancel_reason: latestCancelReason,
            pay_expire_at: latestPayExpireAt
        }
        if (isTimeoutOrder(latestViewOrder)) {
            await supabaseService.expireUnifiedOrder(order.id, order.source)
            const nextStatus = order.source == 'service' ? ORDER_STATUS_TIMEOUT_LEGACY : ORDER_STATUS_CANCELLED
            updateLoadedOrderStatus(order.id, nextStatus, PAYMENT_STATUS_TIMEOUT, ORDER_TIMEOUT_CANCEL_REASON, latestPayExpireAt)
            uni.showToast({ title: '订单已取消，不能继续支付', icon: 'none' })
            loadOrderCounts()
            return
        }
        if (latestStatus != ORDER_STATUS_PENDING || latestPaymentStatus != PAYMENT_STATUS_UNPAID) {
            updateLoadedOrderStatus(order.id, latestStatus, latestPaymentStatus, latestCancelReason, latestPayExpireAt)
            uni.showToast({ title: '订单状态已变更，不能继续支付', icon: 'none' })
            loadOrderCounts()
            return
        }
    }

    uni.navigateTo({ url: paymentUrl })
}

const viewSimilar = (order: OrderItem) => {
    const firstProduct = order.products.length > 0 ? order.products[0] : null
    if (firstProduct == null) {
        uni.showToast({ title: '暂无相似商品', icon: 'none' })
        return
    }
    const keyword = firstProduct.name != '' ? firstProduct.name : '商品'
    uni.navigateTo({ url: `/pages/mall/consumer/search?keyword=${encodeURIComponent(keyword)}` })
}

const remindShipping = async (orderId: string) => {
    uni.showLoading({ title: '正在提醒...' })
    try {
        const order = getLoadedOrderById(orderId)
        if (order != null && order.merchant_id != '') {
            const message = `你好，我的订单[${order.order_no}]还没有发货，请尽快安排，谢谢。`
            await supabaseService.sendChatMessage(message, order.merchant_id)
        }
    } catch (e) {
        console.error('提醒发货异常:', e)
    } finally {
        uni.hideLoading()
    }
    uni.showToast({ title: '已提醒处理', icon: 'success' })
}

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

const goReview = (order: OrderItem) => {
    const productIds = order.products.map((p: OrderProduct): string => {
        return p.id
    }).join(',')
    uni.navigateTo({ url: `/pages/mall/consumer/review?orderId=${order.id}&productIds=${productIds}` })
}

const doConfirmReceipt = async (orderId: string): Promise<void> => {
    uni.showLoading({ title: '处理中...' })
    try {
        const result = await supabaseService.confirmReceipt(orderId)
        uni.hideLoading()
        if (result.success) {
            uni.showToast({ title: '收货成功', icon: 'success' })
            const updatedOrder = updateLoadedOrderStatus(orderId, 4)
            loadOrderCounts()
            setTimeout(() => {
                if (updatedOrder != null) {
                    goReview(updatedOrder)
                }
            }, 1000)
        } else {
            uni.showToast({ title: result.error ?? '确认收货失败', icon: 'none' })
        }
    } catch (e) {
        uni.hideLoading()
        uni.showToast({ title: '系统异常', icon: 'none' })
    }
}

const confirmReceipt = (orderId: string) => {
    uni.showModal({
        title: '确认收货',
        content: '请确认您已收到商品，且商品无误',
        success: (res) => {
            if (res.confirm) {
                doConfirmReceipt(orderId)
            }
        }
    })
}

const confirmServiceFinished = (order: OrderItem) => {
    uni.showModal({
        title: '确认完成',
        content: '确认本次康养服务已完成吗？',
        success: (res) => {
            if (res.confirm) {
                // TODO: 服务订单接入统一接口后，替换为真实完成服务 API。
                uni.showToast({ title: '服务完成接口待接入', icon: 'none' })
            }
        }
    })
}

const repurchase = (order: OrderItem) => {
    const products = order.products
    if (products.length === 0) {
        uni.showToast({ title: '订单无商品', icon: 'none' })
        return
    }

    uni.showLoading({ title: '处理中...' })
    let completed = 0
    const total = products.length
    let successCount = 0

    for (let i = 0; i < products.length; i++) {
        const product = products[i]
        const productId = product.id
        const merchantId = order.merchant_id
        if (productId != null && productId !== '') {
            supabaseService.addToCart(productId, 1, '', merchantId ?? '').then((success: boolean) => {
                completed++
                if (success) successCount++
                if (completed === total) {
                    uni.hideLoading()
                    if (successCount > 0) {
                        uni.showToast({ title: `已添加${successCount}件商品`, icon: 'success' })
                    } else {
                        uni.showToast({ title: '添加失败', icon: 'none' })
                    }
                }
            }).catch(() => {
                completed++
                if (completed === total) {
                    uni.hideLoading()
                    if (successCount > 0) {
                        uni.showToast({ title: `已添加${successCount}件商品`, icon: 'success' })
                    } else {
                        uni.showToast({ title: '添加失败', icon: 'none' })
                    }
                }
            })
        } else {
            completed++
            if (completed === total) {
                uni.hideLoading()
                if (successCount > 0) {
                    uni.showToast({ title: `已添加${successCount}件商品`, icon: 'success' })
                } else {
                    uni.showToast({ title: '添加失败', icon: 'none' })
                }
            }
        }
    }
}

const rebookService = (order: OrderItem) => {
    if (order.service_info != null && order.service_info.service_name != '') {
        uni.showToast({ title: '再次预约功能待接入', icon: 'none' })
        return
    }
    uni.showToast({ title: '暂无可预约服务', icon: 'none' })
}

const viewSimilarService = (order: OrderItem) => {
    const serviceName = order.service_info != null ? order.service_info.service_name : ''
    const url = serviceName != ''
        ? `/pages/mall/consumer/home-service/index?keyword=${encodeURIComponent(serviceName)}`
        : '/pages/mall/consumer/home-service/index'
    uni.navigateTo({ url })
}

const viewOrderDetail = (order: OrderItem) => {
    if (order.biz_type === 'service') {
        uni.navigateTo({ url: `/pages/mall/consumer/home-service/order-detail?id=${order.id}&source=${order.source}` })
        return
    }
    uni.navigateTo({ url: `/pages/mall/consumer/order-detail?id=${order.id}&source=${order.source}` })
}

const onApplyRefund = (order: OrderItem) => {
    const userId = supabaseService.getCurrentUserId()
    if (userId == null || userId === '') {
        goToLogin(`/pages/mall/consumer/apply-refund?orderId=${order.id}`)
        return
    }
    uni.navigateTo({ url: `/pages/mall/consumer/apply-refund?orderId=${order.id}` })
}

const viewRefundProgress = (orderId: string) => {
    uni.navigateTo({ url: `/pages/mall/consumer/refund?orderId=${orderId}` })
}

const doCancelRefund = async (orderId: string) => {
    uni.showLoading({ title: '处理中...' })
    const result = await supabaseService.cancelRefund(orderId)
    uni.hideLoading()
    if (result.success) {
        uni.showToast({ title: '已取消退款', icon: 'success' })
        refreshCurrentSlice()
    } else {
        uni.showToast({ title: result.message, icon: 'none' })
    }
}

const cancelRefund = (orderId: string) => {
    uni.showModal({
        title: '确认取消',
        content: '确定要取消退款申请吗？',
        success: (res) => {
            if (res.confirm) {
                doCancelRefund(orderId)
            }
        }
    })
}

const contactServiceProvider = (order: OrderItem) => {
    contactSeller(order)
}

const getOrderActions = (order: OrderItem): OrderActionItem[] => {
    const actions: OrderActionItem[] = []
    const displayState = getUnifiedDisplayState(toOrderStatusSource(order))

    if (displayState == 'pending_pay') {
        actions.push({ id: 'cancel', name: order.biz_type === 'service' ? '取消预约' : '取消订单', kind: 'secondary' })
        actions.push({ id: 'pay', name: '立即支付', kind: 'primary' })
        return actions
    }

    if (displayState == 'cancelled' || displayState == 'expired') {
        if (order.biz_type === 'service') {
            actions.push({ id: 'view-similar-service', name: '看相似服务', kind: 'secondary' })
            actions.push({ id: 'rebook', name: '再次预约', kind: 'primary' })
            return actions
        }
        actions.push({ id: 'view-similar', name: '看相似', kind: 'secondary' })
        actions.push({ id: 'repurchase', name: '再次购买', kind: 'primary' })
        return actions
    }

    if (order.biz_type === 'service') {
        if (order.status === 2) {
            actions.push({ id: 'cancel', name: '取消预约', kind: 'secondary' })
            actions.push({ id: 'contact-service', name: '联系客服', kind: 'secondary' })
        } else if (order.status === 3) {
            actions.push({ id: 'view-detail', name: '查看预约', kind: 'secondary' })
            actions.push({ id: 'contact-provider', name: '联系服务人员', kind: 'secondary' })
        } else if (order.status === 4) {
            actions.push({ id: 'contact-provider', name: '联系服务人员', kind: 'secondary' })
            actions.push({ id: 'confirm-service', name: '确认完成', kind: 'primary' })
        } else if (displayState == 'completed') {
            actions.push({ id: 'service-review', name: '评价服务', kind: 'secondary' })
            actions.push({ id: 'rebook', name: '再次预约', kind: 'primary' })
        } else if (order.status === 6 || order.status === 7) {
            actions.push({ id: 'refund-progress', name: '退款进度', kind: 'secondary' })
            actions.push({ id: 'view-detail', name: '查看详情', kind: 'secondary' })
        }
        return actions
    }

    if (order.status === 2) {
        actions.push({ id: 'remind', name: '提醒发货', kind: 'secondary' })
        actions.push({ id: 'refund', name: '申请售后', kind: 'secondary' })
    } else if (order.status === 3) {
        actions.push({ id: 'logistics', name: '查看物流', kind: 'secondary' })
        actions.push({ id: 'confirm', name: '确认收货', kind: 'primary' })
        actions.push({ id: 'refund', name: '申请售后', kind: 'secondary' })
    } else if (displayState == 'completed') {
        actions.push({ id: 'refund', name: '申请售后', kind: 'secondary' })
        actions.push({ id: 'repurchase', name: '再次购买', kind: 'primary' })
        actions.push({ id: 'review', name: '评价晒单', kind: 'secondary' })
    } else if (order.status === 6 || order.status === 7) {
        actions.push({ id: 'refund-progress', name: '退款进度', kind: 'secondary' })
        actions.push({ id: 'view-detail', name: '查看详情', kind: 'secondary' })
    }
    return actions
}

const onOrderActionTap = (order: OrderItem, actionId: string) => {
    if (actionId === 'cancel') {
        cancelOrder(order.id)
    } else if (actionId === 'pay') {
        payOrder(order)
    } else if (actionId === 'remind') {
        remindShipping(order.id)
    } else if (actionId === 'refund') {
        onApplyRefund(order)
    } else if (actionId === 'logistics') {
        viewLogistics(order.id)
    } else if (actionId === 'confirm') {
        confirmReceipt(order.id)
    } else if (actionId === 'review') {
        goReview(order)
    } else if (actionId === 'repurchase') {
        repurchase(order)
    } else if (actionId === 'view-similar') {
        viewSimilar(order)
    } else if (actionId === 'view-similar-service') {
        viewSimilarService(order)
    } else if (actionId === 'view-detail') {
        viewOrderDetail(order)
    } else if (actionId === 'refund-progress') {
        viewRefundProgress(order.id)
    } else if (actionId === 'contact-service' || actionId === 'contact-provider') {
        contactServiceProvider(order)
    } else if (actionId === 'confirm-service') {
        confirmServiceFinished(order)
    } else if (actionId === 'service-review') {
        uni.showToast({ title: '服务评价功能待接入', icon: 'none' })
    } else if (actionId === 'rebook') {
        rebookService(order)
    }
}

const showOrderMenu = (order: OrderItem) => {
    const actions = getOrderActions(order)
    if (actions.length === 0) {
        uni.showToast({ title: '暂无可执行操作', icon: 'none' })
        return
    }

    const actionNames: string[] = []
    for (let i = 0; i < actions.length; i++) {
        actionNames.push(actions[i].name)
    }

    uni.showActionSheet({
        itemList: actionNames,
        success: (res) => {
            const action = actions[res.tapIndex]
            onOrderActionTap(order, action.id)
        }
    })
}

const navigateToProduct = (product: OrderProduct) => {
    if (product.id == '' || product.id == 'placeholder') {
        return
    }
    uni.navigateTo({ url: `/pages/mall/consumer/product-detail?id=${product.id}` })
}

const onCardContentTap = (order: OrderItem) => {
    if (order.biz_type === 'service') {
        viewOrderDetail(order)
        return
    }
    const product = getPrimaryOrderProduct(order)
    if (product != null) {
        navigateToProduct(product)
    }
}

const goShopping = () => {
    uni.switchTab({ url: '/pages/main/index' })
}

const getEmptyStateTitle = (): string => {
    if (activeBizType.value === 'service') {
        return '暂无服务订单'
    }
    if (activeBizType.value === 'goods') {
        return '暂无购物订单'
    }
    return '暂无订单'
}

const getEmptyStateDescription = (): string => {
    if (activeBizType.value === 'service') {
        return '康养服务预约记录会展示在这里'
    }
    return '去逛逛，发现心仪的商品与服务'
}
</script>

<style>
.orders-page {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    overflow: hidden;
}

.orders-header,
.biz-tabs-wrap,
.status-tabs-wrap {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

.orders-header {
    background-color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    z-index: 20;
}

.custom-nav-row {
    height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
}

.nav-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 6px;
    background-color: #ffffff;
}

.nav-back-icon {
    font-size: 30px;
    line-height: 32px;
    color: #222222;
    font-weight: 400;
}

.search-shell {
    flex: 1;
    height: 36px;
    border-radius: 18px;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 12px;
    box-sizing: border-box;
    min-width: 0;
}

.search-icon-left {
    font-size: 15px;
    color: #999999;
    margin-right: 6px;
    flex-shrink: 0;
}

.search-clear {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    line-height: 20px;
    text-align: center;
    color: #999999;
    background-color: #dddddd;
    font-size: 16px;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #333333;
    background-color: transparent;
    border: none;
    padding: 0;
    min-width: 0;
}

.search-input::placeholder {
    color: #a0a0a0;
    font-size: 13px;
}

.biz-tabs-wrap {
    height: 44px;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid #f2f2f2;
}

.biz-tab-item {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.biz-tab-item.active .biz-tab-text {
    color: #ff3b1f;
    font-weight: 700;
}

.biz-tab-text {
    font-size: 16px;
    color: #333333;
}

.biz-tab-badge {
    margin-left: 6px;
    min-width: 16px;
    padding: 0 5px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    background-color: #ffebe7;
    color: #ff3b1f;
    font-size: 10px;
    text-align: center;
}

.biz-tab-indicator {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background-color: #ff3b1f;
}

.status-tabs-wrap {
    height: 42px;
    background-color: #ffffff;
    flex-shrink: 0;
    border-bottom: 1px solid #f0f0f0;
}

.status-tabs-scroll {
    width: 100%;
    height: 42px;
    flex-shrink: 0;
}

.status-tabs-inner {
    height: 42px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    width: max-content;
}

.status-tab-item {
    height: 30px;
    min-width: 72px;
    padding: 0 14px;
    margin-right: 8px;
    border-radius: 15px;
    background-color: #f7f7f7;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.status-tab-item.active {
    background-color: #fff1ef;
    border: 1px solid #ff3b1f;
}

.status-tab-text {
    font-size: 13px;
    color: #333333;
}

.status-tab-item.active .status-tab-text {
    color: #ff3b1f;
    font-weight: bold;
}

.status-tab-badge {
    margin-left: 4px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    background-color: #ff3b1f;
    color: #ffffff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}

.orders-content {
    flex: 1;
    height: 0;
    width: 100%;
    background-color: #f5f5f5;
}

.empty-orders {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 88px 24px;
}

.empty-icon {
    font-size: 72px;
    color: #d8d8d8;
    margin-bottom: 18px;
}

.empty-title {
    font-size: 18px;
    color: #444444;
    margin-bottom: 8px;
}

.empty-desc {
    font-size: 13px;
    color: #999999;
    margin-bottom: 26px;
}

.go-shopping-btn {
    height: 36px;
    line-height: 36px;
    border-radius: 18px;
    background-color: #ff3b1f;
    color: #ffffff;
    font-size: 14px;
    padding: 0 28px;
    border: none;
}

.virtual-list,
.virtual-top-spacer,
.virtual-bottom-spacer {
    width: 100%;
}

.virtual-order-item {
    width: 100%;
    padding: 10px 12px 0 12px;
    box-sizing: border-box;
}

.order-card {
    width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.order-card-header {
    height: 44px;
    padding: 8px 12px 4px 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

.shop-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
}

.shop-title-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.shop-icon {
    font-size: 14px;
    margin-right: 6px;
}

.shop-name {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    lines: 1;
}

.arrow-right {
    font-size: 12px;
    color: #bbbbbb;
    margin-left: 4px;
}

.order-meta-line {
    margin-top: 2px;
    font-size: 11px;
    color: #9a9a9a;
    overflow: hidden;
    text-overflow: ellipsis;
    lines: 1;
}

.status-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
}

.status-main {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.order-status {
    font-size: 13px;
    font-weight: 600;
}

.order-status-countdown {
    font-size: 13px;
    font-weight: 600;
    margin-left: 4px;
}

.status-pending,
.status-processing,
.status-aftersale {
    color: #ff3b1f;
}

.status-cancelled,
.status-expired,
.status-default {
    color: #999999;
}

.delete-order-icon {
    font-size: 16px;
    color: #999999;
    margin-left: 8px;
    padding: 0 2px;
}

.more-btn {
    font-size: 18px;
    color: #999999;
    margin-left: 6px;
    padding: 0 4px;
}

.order-main {
    height: 88px;
    padding: 8px 12px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    box-sizing: border-box;
}

.order-cover {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    background-color: #f2f2f2;
    margin-right: 10px;
    flex-shrink: 0;
}

.order-main-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.order-main-title {
    font-size: 14px;
    color: #262626;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    lines: 2;
}

.goods-meta-wrap,
.service-meta-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 4px;
}

.goods-spec-chip {
    max-width: 190px;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #f3f3f3;
    color: #888888;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    lines: 1;
}

.goods-extra-text {
    margin-top: 4px;
    font-size: 11px;
    color: #999999;
}

.service-meta-text {
    font-size: 11px;
    color: #8a8a8a;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    lines: 1;
}

.order-main-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.order-main-price {
    font-size: 15px;
    color: #222222;
    font-weight: 700;
}

.order-main-count {
    font-size: 12px;
    color: #999999;
}

.order-summary {
    height: 36px;
    padding: 0 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.order-time {
    font-size: 11px;
    color: #9a9a9a;
}

.summary-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    overflow: hidden;
}

.summary-text,
.summary-price-label {
    font-size: 12px;
    color: #666666;
}

.summary-price-label {
    margin-left: 4px;
    margin-right: 4px;
}

.summary-price {
    font-size: 15px;
    color: #222222;
    font-weight: 700;
}

.order-actions {
    height: 54px;
    padding: 8px 12px 12px 12px;
    box-sizing: border-box;
}

.action-buttons {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.action-btn {
    min-width: 74px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    font-size: 12px;
    padding: 0 14px;
    margin-left: 8px;
    background-color: #ffffff;
}

.action-btn.secondary {
    color: #666666;
    border: 1px solid #d8d8d8;
}

.action-btn.primary {
    color: #ff3b1f;
    border: 1px solid #ff3b1f;
    background-color: #fff6f4;
}

.loading-more,
.no-more {
    width: 100%;
    padding: 18px 0 8px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-size: 12px;
}

.loading-spinner {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    border: 2px solid #ffd4cc;
    border-top-color: #ff3b1f;
    margin-right: 8px;
}

.safe-area,
.tabbar-placeholder {
    width: 100%;
    height: 50px;
    flex-shrink: 0;
}
</style>
