<template>
    <view class="list-card-container" v-if="item" @click="handleCardClick(item.id)" @touchstart="handleTouchStart"
        @touchmove="handleTouchMove" @touchend="handleTouchEnd" @touchcancel="handleTouchEnd">
        <!-- 头部店铺信息和状态 -->
        <view class="header-box flex-between flex-align-center">
            <view class="shop-info flex-align-center">
                <view class="shop-logo-placeholder flex-center" v-if="item.shop.logo">
                    <image class="brand-img" :src="item.shop.logo">
                    </image>
                </view>
                <text class="shop-name">{{ item.shop?.name }}</text>
                <image v-if="item.shop?.hasBrandAuth" class="brand-img"
                    src="/static/image/shopping/pdd/pinpairenzheng.png">
                </image>
                <image class="flag-img" v-if="item.shop?.hasFlagship" src="/static/image/shopping/pdd/qijiandian.png">
                </image>
                <image v-if="item.shop?.has618" style="margin-left: 8rpx;height: 28rpx;" class="flagship-tag"
                    src="/static/image/shopping/pdd/618.png" mode="heightFix"></image>
                <uni-icons style="margin-top: 4rpx;" type="right" color="#999999" size="12"></uni-icons>
            </view>
            <view class="status-text" v-if="item.orderType === 'wait_pay'">待支付</view>
            <view class="status-text" v-if="item.orderType === 'wait_recv'">待收货</view>
            <view class="status-text" v-if="item.orderType === 'received'">交易成功</view>
        </view>

        <!-- 商品主要内容 -->
        <view class="product-box flex" v-for="(product, pIndex) in item.products" :key="pIndex">
            <view class="product-img-box">
                <image class="product-img" :src="product.img" mode="aspectFill"></image>
            </view>
            <view class="product-content flex-1">
                <view class="title-box">
                    <text class="brand-tag" v-if="item.shop?.hasBrandAuth">品牌</text>
                    <text class="title-text">{{ product.title }}</text>
                </view>
                <view class="spec-text text-ellipsis">{{ product.spec }}</view>
                <view class="tags-box flex-align-center">
                    <view class="green-tag" v-for="(tag, index) in product.serviceTags" :key="index">{{ tag }}</view>
                </view>
            </view>
            <view class="price-box flex-column align-end">
                <text class="price">¥
                    <text style="font-size: 30rpx;">{{ Number(product.price).toFixed(1).split('.')[0] + '.' }}</text>
                    <text style="font-size: 22rpx;">{{ Number(product.price).toFixed(1).split('.')[1] }}</text>
                </text>
                <text class="count">x{{ product.count }}</text>
            </view>
        </view>

        <view>
            <!-- 价格汇总 -->
            <view class="summary-box flex-between flex-align-center">
                <view class="avatar-group flex-align-center">
                    <image class="avatar" v-for="(avatar, idx) in item.avatars" :key="idx" :src="avatar"
                        mode="aspectFill">
                    </image>
                </view>
                <view class="total-price flex-align-center">
                    <text class="label">{{ item.orderType === 'wait_pay' ? '应付' : '实付' }}:</text>
                    <text class="symbol">¥</text>
                    <text class="amount">{{ item.payment.totalAmount }}</text>
                    <text class="freight">{{ item.payment.freightDesc }}</text>
                </view>
            </view>

            <!-- 按钮组 -->
            <view class="action-box flex-end flex-align-center">
                <template v-if="item.orderType === 'wait_pay'">
                    <view class="btn plain">取消订单</view>
                    <view class="btn primary">去支付</view>
                </template>
                <template v-if="item.orderType === 'wait_recv'">
                    <text class="more-btn">更多</text>
                    <view class="btn plain">申请退款</view>
                    <view class="btn plain">追加评价</view>
                    <view class="btn primary with-badge">
                        确认收货
                        <!-- <view class="badge" v-if="item.collectCount">{{ item.collectCount }}人收藏</view> -->
                    </view>
                </template>
                <template v-if="item.orderType === 'received'">
                    <text class="more-btn">更多</text>
                    <view class="btn plain">申请退款</view>
                    <view class="btn plain">追加评价</view>
                    <view class="btn primary with-badge">
                        再次拼单
                        <!-- <view class="badge" v-if="item.collectCount">{{ item.collectCount }}人收藏</view> -->
                    </view>
                </template>
            </view>

            <!-- 物流状态栏 -->
            <view class="delivery-box flex-align-center" v-if="item.deliveryStatus && item.orderType !== 'received'">
                <view class="truck-icon flex-center">
                    <image style="width:32rpx;height: 32rpx;" src="/static/image/shopping/pdd/yunshuzhong.png"></image>
                </view>
                <view class="delivery-content text-ellipsis flex-1">
                    <template v-if="item.orderType === 'wait_pay'">
                        <text class="green-text">{{ item.deliveryStatus }}</text>
                        <text class="green-text">{{ item.statusDesc }}</text>
                    </template>
                    <template v-if="item.orderType === 'wait_recv'">
                        <text class="green-text">{{ item.deliveryStatus }}</text>
                        <text class="gray-text">{{ item.logistics.desc }}</text>
                    </template>
                </view>
            </view>
        </view>

    </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    }
});

const emit = defineEmits(['longpress']);

let longPressTimer = null;
let isLongPressTriggered = false;
let startX = 0;
let startY = 0;

const handleTouchStart = (e) => {
    isLongPressTriggered = false;
    const touch = e.touches[0] || e.changedTouches[0];
    if (touch) {
        startX = touch.clientX;
        startY = touch.clientY;
    }
    longPressTimer = setTimeout(() => {
        isLongPressTriggered = true;
        uni.vibrateShort();
        emit('longpress', e);
    }, 1200); // 长按时间 1200ms
};

const handleTouchMove = (e) => {
    if (longPressTimer) {
        const touch = e.touches[0] || e.changedTouches[0];
        if (touch) {
            const moveX = touch.clientX;
            const moveY = touch.clientY;
            // 增加 15px 容错，防止微小抖动取消长按
            if (Math.abs(moveX - startX) > 15 || Math.abs(moveY - startY) > 15) {
                clearTimeout(longPressTimer);
                longPressTimer = null;
            }
        }
    }
};

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

const toDetail = (id) => {
    uni.navigateTo({
        url: `/pages/shopping/pdd/order-detail/order-detail?id=${id}`
    });
};

const handleCardClick = (id) => {
    if (isLongPressTriggered) return;
    toDetail(id);
};
</script>

<style lang="less" scoped>
.list-card-container {
    background-color: #ffffff;
    margin-bottom: 16rpx;
    padding: 22rpx 0;
    box-sizing: border-box;
    padding-bottom: 4rpx;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

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

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

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

.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

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

/* Header */
.header-box {
    padding: 0 24rpx;
    margin-bottom: 24rpx;

    .shop-logo-placeholder {
        flex-shrink: 0;
        width: 40rpx;
        height: 40rpx;
        border-radius: 4rpx;
        margin-right: 6rpx;
        overflow: hidden;
    }

    .shop-name {
        font-weight: 400;
        font-size: 28rpx;
        color: #1A1A1A;
        line-height: 24rpx;
        // margin-right: 8rpx;
    }

    .brand-img {
        width: 94rpx;
        height: 28rpx;
        margin-left: 8rpx;
    }

    .flag-img {
        width: 74rpx;
        height: 28rpx;
        margin-left: 8rpx;
    }

    .status-text {
        font-weight: 400;
        font-size: 28rpx;
        color: #DF2E26;
        line-height: 28rpx;
    }
}

/* Product Info */
.product-box {
    padding: 0 24rpx;
    padding-bottom: 14rpx;
    // border-bottom: 1rpx solid #EFEFEF;

    .product-img-box {
        width: 148rpx;
        height: 148rpx;
        margin-right: 14rpx;
        border-radius: 4rpx;
        overflow: hidden;
        background-color: #f5f5f5;
        flex-shrink: 0;

        .product-img {
            width: 100%;
            height: 100%;
        }
    }

    .product-content {
        width: 0;

        .title-box {
            width: 100%;
            font-size: 26rpx;
            color: #1A1A1A;
            line-height: 36rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;

            .brand-tag {
                background-color: #252525;
                color: #fff;
                font-size: 22rpx;
                line-height: 22rpx;
                padding: 2rpx 8rpx;
                border-radius: 4rpx;
                margin-right: 8rpx;
                position: relative;
                top: -2rpx;
            }

            .title-text {}
        }

        .spec-text {
            font-size: 26rpx;
            color: #999999;
            line-height: 26rpx;
            margin-top: 6rpx;
            margin-bottom: 14rpx;
        }

        .tags-box {

            /* Overriding image style */
            .green-tag {
                display: inline-flex;
                align-items: center;
                padding: 0 4rpx;
                border-radius: 4rpx;
                margin: 0 4rpx;
                font-weight: 400;
                height: 30rpx;
                color: #fff;
                background-color: #2BB40C;
                font-size: 22rpx;
                line-height: 22rpx;
                border: none;
            }
        }
    }

    .price-box {
        margin-left: 10rpx;
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-end;

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

        .count {
            font-size: 24rpx;
            color: #999;
            margin-top: 8rpx;
        }

        .align-end {
            align-items: flex-end;
        }
    }
}

/* Summary */
.summary-box {
    position: relative;
    margin-bottom: 16rpx;
    padding: 0 16rpx;
    padding-bottom: 14rpx;
    padding-top: 10rpx;

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        background-color: #EFEFEF;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        transform: scaleY(0.5);
        background-color: #EFEFEF;
    }

    .avatar-group {
        position: relative;
        width: 110rpx;
        height: 44rpx;

        .avatar {
            width: 44rpx;
            height: 44rpx;
            border-radius: 50%;
            border: 2rpx solid #FFFFFF;
            position: absolute;
        }

        .avatar:nth-child(1) {
            left: 0;
            z-index: 4;
        }

        .avatar:nth-child(2) {
            left: 34rpx;
            z-index: 3;
        }

        .avatar:nth-child(3) {
            left: 68rpx;
            z-index: 2;
        }

        .avatar:nth-child(4) {
            left: 102rpx;
            z-index: 1;
        }
    }

    .total-price {
        display: flex;
        align-items: baseline;
        font-size: 24rpx;
        color: #1A1A1A;

        .label {
            margin-right: 4rpx;
        }

        .symbol {
            font-size: 24rpx;
            margin-right: 4rpx;
        }

        .amount {
            font-size: 34rpx;
        }

        .freight {
            font-size: 26rpx;
            margin-left: 8rpx;
        }
    }
}

/* Action Buttons */
.action-box {
    margin-bottom: 16rpx;
    padding: 0 16rpx;

    .more-btn {
        font-weight: 400;
        font-size: 28rpx;
        color: #1A1A1A;
        line-height: 28rpx;
        margin-right: 46rpx;
    }

    .btn {
        min-width: 138rpx;
        height: 58rpx;
        border-radius: 8rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        margin-left: 14rpx;
        padding: 0 12rpx;
        box-sizing: border-box;

        &.plain {
            border: 1rpx solid #9E9E9E;
            color: #1A1A1A;
            background-color: #fff;
        }

        &.primary {
            border: 1rpx solid #DF2E26;
            background-color: #DF2E26;
            color: #fff;
        }

        &.with-badge {
            position: relative;

            .badge {
                position: absolute;
                top: -18rpx;
                right: -12rpx;
                background-color: #FFE669;
                color: #E01B13;
                font-size: 18rpx;
                padding: 2rpx 10rpx;
                border-radius: 20rpx;
                white-space: nowrap;
                transform: scale(0.9);
                z-index: 2;
            }
        }
    }
}

/* Delivery Info */
.delivery-box {
    background-color: #F5F5F5;
    padding: 10rpx 16rpx;
    border-radius: 4rpx;
    margin: 0 16rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 16rpx;

    .truck-icon {
        margin-right: 6rpx;
    }

    .delivery-content {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        white-space: nowrap;

        .green-text {
            color: #2BB40C;
        }

        .gray-text {
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100px;
            color: #595959;
            margin-left: 10rpx;
        }
    }
}
</style>
