<template>
    <view class="card-wrapper">
        <view class="card-container" v-for="(item, index) in list" :key="index" @click.stop="clickItem(item)"
            @touchstart="handleTouchStart($event, item)" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
            <!-- 顶部店铺和状态 -->
            <view class="card-header">
                <view class="shop-info flex-align-center">
                    <image class="taobao-logo" :class="{ shangou: item.orderType === 'waimai' }"
                        :src="`/static/image/shopping/taobao/${item.orderType === 'waimai' ? 'shangou' : item.shopType}.png`"
                        mode="heightFix">
                    </image>
                    <text class="shop-name flex-align-center"><text
                            :class="{ 'waimai-shop-name': item.orderType === 'waimai' }">{{ item.shopName || '淘宝店铺'
                            }}</text> <text v-if="item.orderType === 'waimai'" style="color: #7C8495;"
                            class="waimai-shop-name">{{
                                item.location }}</text></text>
                    <uni-icons style="margin-left: 4rpx;" type="right" size="12" color="#8C8C8C"></uni-icons>
                    <!-- <text class="iconfont icon-arrow-right arrow-icon">></text> -->
                </view>
                <view class="order-status" :class="[item.statusType, item.orderType]">
                    {{ item.statusText || getStatusText(item.statusType) }}
                </view>
            </view>

            <!-- 商品列表 -->
            <view class="goods-list" @tap="goToDetail(item)">
                <template v-if="item.orderType === 'waimai'">
                    <!-- 外卖单个商品 -->
                    <!-- :style="{ width: imgHeights[index + '-0'] ? imgHeights[index + '-0'] + 'px' : '', height: imgHeights[index + '-0'] ? imgHeights[index + '-0'] + 'px' : '' }" -->
                    <view v-if="item.goodsList.length === 1" class="goods-item">
                        <image class="goods-img" :src="item.goodsList[0].image || '/static/default-goods.png'"
                            mode="aspectFill">
                        </image>
                        <view class="goods-info" :id="'goods-info-' + index + '-0'">
                            <view class="goods-title-row">
                                <view class="good-info-box" :id="'title-box-' + index + '-0'">
                                    <text class="goods-title">{{ getTruncatedTitle(item, index, item.goodsList[0], 0)
                                    }}</text>
                                    <view class="goods-spec" style="margin-top: 18rpx; color: #999;">默认</view>
                                    <view class="goods-tags" v-if="item.goodsList[0].tags || item.goodsList[0].tag"
                                        style="margin-top: 18rpx;">
                                        <text class="tag">{{ item.goodsList[0].tags || item.goodsList[0].tag }}</text>
                                    </view>
                                </view>
                                <view class="goods-price-box">
                                    <text class="price-symbol wx-font-medium">￥</text>
                                    <text class="price-val wx-font-medium">{{ item.goodsList[0].actualPrice ||
                                        item.goodsList[0].price }}</text>
                                    <text class="goods-count">x{{ item.goodsList[0].count || 1 }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <!-- 外卖多个商品 -->
                    <view v-else class="waimai-multi-goods flex-align-center"
                        style="margin-bottom: 18rpx; height: 136rpx;">
                        <scroll-view scroll-x class="waimai-images"
                            style="flex: 1; white-space: nowrap; overflow: hidden; margin-right: 16rpx; height: 100%;">
                            <view v-for="(goods, gIdx) in item.goodsList" :key="gIdx"
                                style="display: inline-block; position: relative; margin-right: 16rpx; width: 136rpx; height: 136rpx;">
                                <image :src="goods.image || '/static/default-goods.png'" mode="aspectFill"
                                    style="width: 100%; height: 100%; border-radius: 12rpx; background-color: #F5F5F5;">
                                </image>
                                <text
                                    style="position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,0.4); color: #fff; font-size: 20rpx; padding: 2rpx 8rpx; border-radius: 0 12rpx 0 12rpx;">x{{
                                        goods.count || 1 }}</text>
                            </view>
                        </scroll-view>
                        <view class="waimai-total-count"
                            style="font-size: 24rpx; color: #7C8495; flex-shrink: 0; font-weight: 400;">共{{
                                getTotalCount(item.goodsList) }}件</view>
                    </view>
                </template>
                <template v-else>
                    <view class="goods-item" v-for="(goods, gIdx) in item.goodsList" :key="gIdx">
                        <!-- :style="{ width: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '', height: imgHeights[index + '-' + gIdx] ? imgHeights[index + '-' + gIdx] + 'px' : '' }" -->
                        <image class="goods-img"
                            :class="{ refunding: item.statusType === 'refunding' && currentFilter == 4 }"
                            :src="goods.image || '/static/default-goods.png'" mode="aspectFill">
                        </image>
                        <view class="goods-info" :id="'goods-info-' + index + '-' + gIdx">
                            <view class="goods-title-row">
                                <view class="good-info-box" :id="'title-box-' + index + '-' + gIdx">
                                    <text class="goods-title">{{ getTruncatedTitle(item, index, goods, gIdx) }}</text>
                                    <view class="goods-spec" v-if="goods.specs">{{ goods.specs }}</view>
                                </view>

                                <view class="goods-price-box">
                                    <text class="price-symbol wx-font-medium">￥</text>
                                    <text class="price-val wx-font-medium">{{ goods.price }}</text>
                                    <text class="goods-count">x{{ goods.count || 1 }}</text>
                                </view>
                            </view>

                            <view class="goods-tags" v-if="goods.tags && currentFilter != 4">
                                <text class="tag">{{ goods.tags }}</text>
                            </view>
                            <!-- 单个商品的售后状态 -->
                            <view class="goods-evaluation" v-if="item.statusType == 'success'">
                                <view class="left">
                                    <image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
                                        src='/static/image/shopping/taobao/pingjia.png'>
                                    </image>
                                    <text>评价将帮助70人</text>
                                </view>
                                <view class="right">
                                    <image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
                                        src='/static/image/shopping/taobao/chaping.png'>
                                    </image>
                                    <text>差评</text>
                                    <image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
                                        src='/static/image/shopping/taobao/zhongping.png'>
                                    </image>
                                    <text>中评</text>
                                    <image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
                                        src='/static/image/shopping/taobao/haoping.png'>
                                    </image>
                                    <text>好评</text>
                                </view>
                            </view>
                            <!-- 单个商品的退款状态 -->
                            <view class="goods-evaluation" v-if="item.statusType == 'refunding' && currentFilter != 4">
                                <view class="left">
                                    <image style="width: 24rpx;height: 24rpx;margin-right: 8rpx;"
                                        src='/static/image/shopping/taobao/tuikuanchenggong.png'>
                                    </image>
                                    <text>退款成功</text>
                                </view>
                                <view class="desc">
                                    {{ item.statusDesc }}
                                </view>
                                <uni-icons type="right" size="12" color="#7B7E8C"></uni-icons>
                            </view>
                        </view>
                    </view>
                </template>
            </view>

            <!-- 各种提示信息 -->
            <view v-if="item.orderType === 'waimai' && item.statusType === 'wait_recv'" class="tips-box waimai-delivery"
                style="background-color: #F4F5F7; border-radius: 12rpx; padding: 16rpx 24rpx; margin-top: 16rpx; display: flex; align-items: center; height: auto;">
                <image style="width: 36rpx; height: 36rpx; margin-right: 16rpx; flex-shrink: 0;"
                    src="/static/image/shopping/taobao/daocha.png"></image>
                <view style="flex: 1; overflow: hidden;">
                    <view
                        style="font-size: 26rpx; color: #1A1A1A; font-weight: 500; display: flex; align-items: center;">
                        预计 <text style="color: #FF7824; margin: 0 8rpx;">{{ item.deliveryTime || '14:15-14:45' }}</text>
                        送达</view>
                    <view style="font-size: 22rpx; color: #999; margin-top: 6rpx;">下单时间 {{ item.orderInfo?.[8]?.value }}
                    </view>
                </view>
                <uni-icons type="right" size="12" color="#7C8495"></uni-icons>
            </view>
            <view v-else-if="item.statusType == 'wait_pay' && item.orderType != 'waimai'" class="tips-box daifukuan">
                <image class="tip-icon" src="/static/image/shopping/taobao/daifukuan.png"></image>
                <text class="text">订单即将关闭，建议尽快付款</text>
            </view>
            <view v-else-if="item.statusType == 'wait_send'" class="tips-box daifahuo">
                <image class="tip-icon" src="/static/image/shopping/taobao/daifahuo.png"></image>
                <text class="title">待发货</text>
                <text class="text">{{ item.statusDesc }}</text>
            </view>
            <view v-else-if="item.statusType == 'wait_recv'" class="tips-box yunshuzhong">
                <image class="tip-icon"
                    :src="`/static/image/shopping/taobao/${item.isSignFor ? 'yiqianshou' : 'yunshuzhong'}.png`">
                </image>
                <text class="title">{{ item.isSignFor ? '已签收' : '运输中' }}</text>
                <text class="text flex-1">{{ item.statusDesc2 || item.statusDesc1 }}</text>
                <uni-icons v-if="item.statusDesc2" type="right" size="14" color="#7B7E8C"></uni-icons>
            </view>

            <view v-else-if="item.statusType == 'refunding' && props.currentFilter == 4" class="tips-box yunshuzhong">
                <text class="title">退款成功</text>
                <text class="text">{{ item.statusDesc }}</text>
            </view>

            <!-- 价格合计 -->
            <view class="order-total">
                <text class="total-label" :style="item.orderType === 'waimai' ? 'color: #7B7E8C;' : ''">共{{
                    getTotalCount(item.goodsList) }}件{{ item.orderType === 'waimai' ? ' (含包装/配送费)' : '商品' }}</text>
                <text class="total-label" style="margin-left: 8rpx;">实付款</text>
                <text class="total-symbol wx-font-medium">￥</text>
                <text class="total-price wx-font-medium">{{ Number(
                    item.priceDetail?.actualPay || item.totalPrice || 0).toFixed(2).split(".")[0] }}</text>
                <text class="total-price wx-font-medium" style="font-size: 28rpx;">.{{ Number(
                    item.priceDetail?.actualPay || item.totalPrice || 0).toFixed(2).split(".")[1] }}</text>
            </view>

            <!-- 底部按钮 -->
            <view class="card-footer" v-if="getButtons(item.statusType, item.orderType).buttons.length > 0">
                <view class="more-text" v-if="getButtons(item.statusType, item.orderType).moreText?.isShow"
                    :style="{ color: getButtons(item.statusType, item.orderType).moreText?.color || '#1A1A1A' }">
                    {{ getButtons(item.statusType, item.orderType).moreText?.text || '更多' }}
                </view>
                <view class="btn" :class="{ 'btn-primary': btn.primary }"
                    v-for="(btn, bIdx) in getButtons(item.statusType, item.orderType).buttons" :key="bIdx"
                    @tap.stop="handleAction(btn.action, item)" style="position: relative;">
                    <text v-if="btn.tag"
                        style="position: absolute; top: -18rpx; left: 50%; transform: translateX(-50%); background-color: #FF7824; color: #fff; font-size: 16rpx; padding: 2rpx 8rpx; border-radius: 16rpx; border-bottom-left-radius: 4rpx; white-space: nowrap;">{{
                            btn.tag }}</text>
                    {{ btn.text }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch, nextTick, getCurrentInstance, onMounted } from 'vue';

const props = defineProps({
    list: {
        type: Array,
        default: () => []
    },
    currentFilter: {
        type: String,
        default: ''
    }
});

const emit = defineEmits(['action', 'detail', 'click-item', 'longpress']);


const instance = getCurrentInstance();
const imgHeights = ref({});
const titleMap = ref({});   // key: 'itemIdx-goodsIdx' → 截取后的标题
const longPressTimer = ref(null);
const touchStartPos = ref({ x: 0, y: 0 });

/**
 * 与 shopping-card.vue 对齐的字符权重截断算法
 */
const calcFitTitle = (originalTitle, containerWidth) => {
    const fontSize = uni.upx2px(26);
    let currentWidth = 0;
    let cutIndex = 0;
    let found = false;

    for (let i = 0; i < originalTitle.length; i++) {
        const char = originalTitle[i];
        const charCode = char.charCodeAt(0);
        let weight = 1;

        if (charCode <= 255) {
            if (/[A-Z]/.test(char)) weight = 0.7;
            else if (/[a-z]/.test(char)) weight = 0.5;
            else if (/[0-9]/.test(char)) weight = 0.55;
            else if (char === ' ') weight = 0.25;
            else weight = 0.5;
        }

        currentWidth += weight * fontSize;

        if (currentWidth > containerWidth - uni.upx2px(4)) {
            cutIndex = i;
            found = true;
            break;
        }
    }

    return found ? originalTitle.slice(0, cutIndex - 2) + '...' : originalTitle;
};

/**
 * 供模板调用：返回截取后的标题
 */
const getTruncatedTitle = (item, index, goods, gIdx) => {
    const key = index + '-' + gIdx;
    return titleMap.value[key] !== undefined ? titleMap.value[key] : (goods.title || '');
};

const calculateHeights = () => {
    nextTick(() => {
        setTimeout(() => {
            if (!instance || !instance.proxy) return;

            if (!props.list || props.list.length === 0) return;

            const heightQuery = uni.createSelectorQuery().in(instance.proxy);
            const titleQuery = uni.createSelectorQuery().in(instance.proxy);
            let keys = [];

            props.list.forEach((item, index) => {
                if (!item.goodsList) return;
                item.goodsList.forEach((goods, gIdx) => {
                    const key = index + '-' + gIdx;
                    keys.push(key);
                    heightQuery.select('#goods-info-' + key).boundingClientRect();
                    titleQuery.select('#title-box-' + key).boundingClientRect();
                });
            });

            if (keys.length > 0) {
                // 查询商品信息区高度（用于同步图片高度）
                heightQuery.exec((res) => {
                    if (res && res.length > 0) {
                        res.forEach((data, i) => {
                            if (data && data.height) {
                                imgHeights.value[keys[i]] = data.height;
                            }
                        });
                    }
                });

                // 查询标题容器宽度，计算最大字符截取
                titleQuery.exec((res) => {
                    if (res && res.length > 0) {
                        res.forEach((data, i) => {
                            if (data && data.width) {
                                const [li, gi] = keys[i].split('-').map(Number);
                                const goods = props.list[li]?.goodsList?.[gi];
                                if (goods && goods.title) {
                                    titleMap.value[keys[i]] = calcFitTitle(goods.title, data.width);
                                }
                            }
                        });
                    }
                });
            }
        }, 300); // 延迟等待视图渲染稳定
    });
};

watch(() => props.list, () => {
    calculateHeights();
}, { deep: true, immediate: true });

// 首次挂载后再做一次延迟校准，覆盖页面转场动画的干扰
// 与 shopping-card.vue 的 onMounted 调用保持一致
onMounted(() => {
    setTimeout(calculateHeights, 500);
});

// 状态文案映射
const getStatusText = (status) => {
    const map = {
        'wait_pay': '待付款',
        'wait_send': '待发货',
        'wait_recv': '卖家已发货',
        'success': '交易成功',
        'closed': '交易关闭',
        'refunding': '交易关闭'
    };
    if (status == 'refunding' && props.currentFilter == 4) {
        map[status] = '退款'
    }
    return map[status] || status;
};

// 状态对应的按钮配置
const getButtons = (status, orderType) => {
    if (orderType === 'waimai') {
        const waimaiMap = {
            'wait_pay': {
                moreText: { isShow: false },
                buttons: [
                    { text: '继续付款', action: 'pay', primary: true }
                ]
            },
            'wait_recv': {
                moreText: { isShow: false },
                buttons: [
                    { text: '查看订单', action: 'view_order' },
                    { text: '查看物流', action: 'view_logistics' }
                ]
            },
            'success': {
                moreText: { isShow: false },
                buttons: [
                    { text: '删除订单', action: 'delete' },
                    { text: '评价', action: 'comment' },
                    { text: '再买一单', action: 'buy_again', primary: false }
                ]
            },
            'closed': {
                moreText: { isShow: false },
                buttons: [
                    { text: '删除订单', action: 'delete' },
                    { text: '再买一单', action: 'buy_again', primary: false }
                ]
            }
        };
        return waimaiMap[status] || { moreText: { isShow: false }, buttons: [] };
    }

    const map = {
        'wait_pay': {
            moreText: {
                text: "",
                isShow: true,
                color: "#1a1a1a"
            },
            buttons: [
                { text: '修改地址', action: 'edit_address' },
                { text: '找朋友付', action: 'cancel' },
                { text: '继续付款', action: 'pay', primary: true }
            ]
        },
        'wait_send': {
            moreText: {
                text: "",
                isShow: false,
                color: "#1a1a1a"
            },
            buttons: [
                { text: '催发货', action: 'remind' },
                { text: '查看物流', action: 'view_logistics' },
                { text: '修改地址', action: 'edit_address' }
            ]
        },
        'wait_recv': {
            moreText: {
                text: "",
                isShow: true,
                color: "#1a1a1a"
            },
            buttons: [
                { text: '加入购物车', action: 'add_cart' },
                { text: '查看物流', action: 'view_logistics' },
                { text: '确认收货', action: 'confirm', primary: true }
            ]
        },
        'success': {
            moreText: {
                text: "",
                isShow: true,
                color: "#1a1a1a"
            },
            buttons: [
                { text: '加入购物车', action: 'add_cart' },
                { text: '再买一单', action: 'buy_again' },
                { text: '评价', action: 'comment', primary: true }
            ]
        },
        'closed': {
            moreText: {
                text: "",
                isShow: false,
                color: "#1a1a1a"
            },
            buttons: [
                { text: '删除订单', action: 'delete' },
                { text: '加入购物车', action: 'add_cart' },
                { text: '再买一单', action: 'buy_again', primary: true }
            ]
        },
        'refunding': {
            moreText: {
                text: "",
                isShow: true,
                color: "#7C8495"
            },
            buttons: [
                { text: '加入购物车', action: 'add_cart' },
                { text: '钱款去向', action: 'query_money' },
                { text: '联系商家', action: 'contact_merchant', primary: true }
            ]
        }
    };
    return map[status] || [];
};

const clickItem = (item) => {
    emit('click-item', item);
}

const handleTouchStart = (e, item) => {
    const touch = e.touches[0];
    touchStartPos.value = { x: touch.clientX, y: touch.clientY };

    // 清除之前的计时器
    if (longPressTimer.value) clearTimeout(longPressTimer.value);

    // 开启 800ms 计时器 (可根据需求调整时长)
    longPressTimer.value = setTimeout(() => {
        // 触发震动反馈
        uni.vibrateShort();
        emit('longpress', {
            item,
            x: touch.clientX,
            y: touch.clientY
        });
        longPressTimer.value = null;
    }, 800);
}

const handleTouchMove = (e) => {
    const touch = e.touches[0];
    const offsetX = Math.abs(touch.clientX - touchStartPos.value.x);
    const offsetY = Math.abs(touch.clientY - touchStartPos.value.y);

    // 如果手指移动距离超过 10px，认为是在滑动，取消长按计时
    if (offsetX > 10 || offsetY > 10) {
        if (longPressTimer.value) {
            clearTimeout(longPressTimer.value);
            longPressTimer.value = null;
        }
    }
}

const handleTouchEnd = () => {
    if (longPressTimer.value) {
        clearTimeout(longPressTimer.value);
        longPressTimer.value = null;
    }
}

const getTotalCount = (goodsList) => {
    if (!goodsList || !goodsList.length) return 0;
    return goodsList.reduce((sum, item) => sum + (Number(item.count) || 1), 0);
};

const handleAction = (action, item) => {
    emit('action', { action, item });
};

const goToDetail = (item) => {
    emit('detail', item);
};
</script>

<style lang="less" scoped>
.card-wrapper {
    width: 100%;
}

.card-container {
    margin: 16rpx 0;
    background-color: #FFFFFF;
    padding: 24rpx;
    box-sizing: border-box;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;

        .shop-info {
            display: flex;
            align-items: center;

            .taobao-logo {
                height: 28rpx;
                margin-right: 6rpx;

                &.shangou {
                    height: 36rpx;
                }
            }

            .shop-name {
                font-size: 28rpx;
                line-height: 28rpx;
                color: #333333;
                font-weight: bold;
            }

            .waimai-shop-name {
                display: inline-block;
                max-width: 220rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .arrow-icon {
                font-size: 24rpx;
                color: #999;
                margin-left: 8rpx;
            }
        }

        .order-status {
            font-size: 26rpx;
            color: #FF7824;
            font-weight: 500;
        }
    }

    .goods-list {
        .goods-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 18rpx;

            .goods-img {
                height: 92px;
                width: 92px;
                min-width: 178rpx;
                min-height: 178rpx;
                border-radius: 12rpx;
                background-color: #F5F5F5;
                flex-shrink: 0;

                &.refunding {
                    width: 74px;
                    height: 74px;
                    min-width: 142rpx;
                    min-height: 142rpx;
                }
            }

            .goods-info {
                flex: 1;
                margin-left: 24rpx;
                display: flex;
                flex-direction: column;

                .goods-title-row {
                    display: flex;
                    justify-content: space-between;


                    .good-info-box {
                        flex: 1;
                        width: 100px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        // margin-right: 8px;

                    }

                    .goods-title {
                        font-size: 26rpx;
                        color: #00032A;
                        line-height: 36rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        flex: 1;
                        margin-right: 18rpx;
                        font-weight: 500;
                    }

                    .goods-price-box {
                        text-align: right;


                        .price-symbol {
                            font-size: 30rpx;
                            color: #1A1A1A;
                            font-weight: 500;
                        }

                        .price-val {
                            font-size: 30rpx;
                            color: #1A1A1A;
                            font-weight: 500;
                        }

                        .goods-count {
                            display: block;
                            font-size: 22rpx;
                            line-height: 22rpx;
                            color: #999999;
                            margin-top: 14rpx;
                        }
                    }
                }

                .goods-spec {
                    font-size: 22rpx;
                    line-height: 22rpx;
                    color: #7C8495;
                    border-radius: 8rpx;
                    align-self: flex-start;
                    margin-top: 22rpx;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    width: 100%;
                }

                .goods-tags {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 16rpx;

                    .tag {
                        font-size: 24rpx;
                        line-height: 24rpx;
                        color: #35A156;
                    }
                }

                .goods-refund-status {
                    font-size: 24rpx;
                    color: #FF5000;
                    margin-top: 12rpx;
                }

                .goods-evaluation {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    background-color: #F4F5F7;
                    border-radius: 8rpx 8rpx 8rpx 8rpx;
                    height: 46rpx;
                    padding: 0 12rpx;
                    margin-top: 20rpx;

                    .left {
                        display: flex;
                        align-items: center;

                        text {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }

                    .right {
                        display: flex;
                        align-items: center;

                        text {
                            color: #CACFD4;
                            font-size: 20rpx;
                            margin-right: 8rpx;
                        }
                    }

                    text {
                        font-size: 24rpx;
                        color: #1A1A1A;
                        font-weight: 500;
                        line-height: 24rpx;
                    }

                    .desc {
                        flex: 1;
                        width: 100px;
                        font-size: 24rpx;
                        color: #7C8495;
                        line-height: 24rpx;
                        margin-left: 20rpx;
                    }
                }
            }
        }
    }

    .tips-box {
        background-color: #F4F5F7;
        border-radius: 12rpx;
        padding: 20rpx 24rpx;
        margin-top: 16rpx;
        height: 68rpx;
        display: flex;
        align-items: center;

        .title {
            flex-shrink: 0;
            color: #1A1A1A;
            margin-left: 8rpx;
            margin-right: 20rpx;
            font-weight: 500;
            white-space: nowrap;
        }

        .tip-icon {
            flex-shrink: 0;
            width: 30rpx;
            height: 30rpx;
            margin-right: 12rpx;
        }

        .text {
            font-size: 26rpx;
            color: #7C8495;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &.daifukuan {
            .tip-icon {
                width: 30rpx;
                height: 30rpx;
                margin-right: 12rpx;
            }

            .text {
                font-size: 26rpx;
                color: #F37120;
                font-weight: 500;
            }
        }

        &.daifahuo {}
    }

    .order-total {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10rpx;
        margin-bottom: 24rpx;

        .total-label {
            font-size: 24rpx;
            color: #1A1A1A;
            margin-right: 8rpx;
        }

        .total-symbol {
            font-size: 28rpx;
            color: #1A1A1A;
            font-weight: 500;
        }

        .total-price {
            font-size: 32rpx;
            color: #1A1A1A;
            font-weight: 500;
        }
    }

    .card-footer {
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .more-text {
            position: absolute;
            left: 0;
            top: 50%;
            font-size: 26rpx;
            line-height: 26rpx;
            color: #1A1A1A;
            transform: translateY(-50%);
        }

        .btn {
            padding: 0 24rpx;
            height: 64rpx;
            line-height: 64rpx;
            font-size: 26rpx;
            color: #1A1A1A;
            margin-left: 16rpx;
            background-color: #F4F5F7;
            border-radius: 12rpx;

            &.btn-primary {
                color: #F37120;
                background-color: #FFECE5;
            }
        }
    }
}
</style>
<style>
@import '@/common/main.css';
</style>