<template>
    <view :style="warpCss" class="overflow-hidden relative "
        v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
        <view class="px-[24rpx] pt-[30rpx] px-[20rpx]">
            <view class="flex items-center justify-between pb-[20rpx]" @click="navToPintuan">
                <view class="font-medium" :style="titleCss">
                    可直接参与以下拼团
                </view>
                <view :style="moreCss" class="flex items-center justify-center">
                  
                    <text :style="{ color: diyComponent.diyInfo.moreStyle.numberColor }">{{ pingtuanglisttotal }}人在拼</text>
                    <text class="iconfont iconarrow-right text-[24rpx]"></text>
                    
                </view>
            </view>

            <!-- 拼团列表 -->
            <view class="scroll-container pb-[30rpx]" style="overflow: hidden; position: relative;">
                <!-- :class="pingtuanglist2.length == 1 ? 'h-[110rpx]' : pingtuanglist2.length == 2 ? 'h-[220rpx]' : ''" -->
                <swiper 
                    :circular="swiperGroups?.length > 1" 
                    vertical 
                    :autoplay="swiperGroups?.length > 1"
                    :interval="3000"
                    :duration="500"
                  
                    easing-function="easeInOutCubic"
                    class="swiper-container"
                    :class="pingtuanglist2.length == 1 ? '!h-[110rpx]' : pingtuanglist2.length == 2 ? '!h-[210rpx]' : '!h-[310rpx]'"
                    :style="pingtuanglist2.length == 1 ? 'height: 110rpx;' : pingtuanglist2.length == 2 ? 'height: 220rpx;' : 'height: 310rpx;'"
                    disable-touch>
                    <swiper-item :item-id="groupIndex + ''" v-for="(group, groupIndex) in swiperGroups" :key="groupIndex">
                        <view v-for="(item, itemIndex) in group" :key="item.supplementKey || item.id || itemIndex"
                            class="flex items-center justify-between h-[100rpx] border-[0] border-b-[2rpx] border-solid border-[#F5F5F5] scroll-item"
                            :class="{ '!border-[0]': itemIndex === group.length - 1 }"
                            @click="addpingtuan(item)">
                        <view class="flex items-center flex-1">
                            <!-- 头像组 -->
                            <view class="relative flex items-center justify-center mr-[20rpx] max-w-[140rpx]">

                                <template v-for="(member, memberIndex) in item.member_list" :key="memberIndex" v-if="item.member_list.length>0">
                                    <template
                                        v-if="item.member_list.length > 3 && memberIndex < 2 || item.member_list.length <= 3">
                                        <image v-if="member.member.headimg" :src="img(member.member.headimg)"
                                            mode="scaleToFill"
                                            class="w-[60rpx] h-[60rpx] rounded-[50%] border-2 border-[red] relative z-1"
                                            @error="member.member.headimg = 'static/resource/images/default_headimg.png'"
                                            :class="{ '-ml-[20rpx]': memberIndex > 0 }" />
                                        <image v-else :src="img('static/resource/images/default_headimg.png')"
                                            mode="scaleToFill"
                                            class="w-[60rpx] h-[60rpx] rounded-[50%] border-2 border-[red] relative z-1"
                                            :class="{ '-ml-[20rpx]': memberIndex > 0 }" />
                                    </template>
                                    <text v-if="memberIndex > 3"
                                        class="z-1 w-[60rpx] h-[60rpx] flex items-center justify-center rounded-[50%] bg-[#FFF1F1] text-[red] iconfont icona-gengduoV6xx-28 -ml-[20rpx]"></text>
                                </template>
                                <template v-else>
                                    <image  :src="img('static/resource/images/default_headimg.png')"
                                            mode="scaleToFill"
                                            class="w-[60rpx] h-[60rpx] rounded-[50%] border-2 border-[red] relative z-1"
                                             />
                                </template>
                            </view>
                            <!-- 拼团信息 -->
                            <view class="flex-1">
                                <view class="flex items-center mb-[8rpx]">
                                    <text
                                        class="text-[#333333] text-[26rpx] max-w-[200rpx] mr-[10rpx] using-hidden leading-[1.5]">
                                        {{
                                            item.member_list
                                                .slice(0, 3)
                                                .map((member: any) => member.member.nickname)
                                        .join("、")
                                        }}{{ item.member_list.length > 3 ? "..." : "" }}
                                    </text>
                                    <text class="text-[#999999] text-[24rpx]  leading-[1.5]">还差
                                        <text class="text-[#FF000D]">{{
                                            item.target_num - item.current_num
                                            }}</text>
                                        人</text>
                                </view>
                                <view class="text-[#999999] text-[24rpx] flex items-center">
                                    <text class="mr-[4rpx]">剩余</text>
                                    <!-- 自定义倒计时组件 -->
                                    <view v-if="diyStore.mode != 'decorate'" class="flex items-center text-[#999]"
                                        :style="{ willChange: isAnimating ? 'auto' : 'transform' }">
                                        <view v-if="getTimeData(item, index).days > 0"
                                            class="text-[24rpx] flex items-center justify-center h-[32rpx]">
                                            <text class="text-center">{{ getTimeData(item, index).days }}</text>
                                        </view>
                                        <text v-if="getTimeData(item, index).days > 0">天</text>
                                        <view class="text-[24rpx] flex items-center justify-center h-[32rpx]">
                                            <text class="text-center">{{ formatTime(getTimeData(item, index).hours)
                                                }}</text>
                                        </view>
                                        <text>:</text>
                                        <view class="text-[24rpx] flex items-center justify-center h-[32rpx]">
                                            <text class="text-center">{{ formatTime(getTimeData(item, index).minutes)
                                                }}</text>
                                        </view>
                                        <text>:</text>
                                        <view class="text-[24rpx] flex items-center justify-center h-[32rpx]">
                                            <text class="text-center">{{ formatTime(getTimeData(item, index).seconds)
                                                }}</text>
                                        </view>
                                    </view>
                                    <!-- 装修模式下显示静态时间 -->
                                    <view v-else class="flex items-center text-[#999]">
                                        <view class="text-[24rpx] flex items-center justify-center h-[32rpx]">
                                            <text class="text-center">02</text>
                                        </view>
                                        <text>:</text>
                                        <view class="text-[24rpx] flex items-center justify-center h-[32rpx]">
                                            <text class="text-center">30</text>
                                        </view>
                                        <text>:</text>
                                        <view class="text-[24rpx] flex items-center justify-center h-[32rpx]">
                                            <text class="text-center">45</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>

                        <view class="w-[130rpx] h-[54rpx] flex items-center justify-center !bg-[red] !text-[24rpx]" :style="btnCss">
                            {{(item.is_me==1 || item.is_join==1) ? '邀请好友' : (item.target_num - item.current_num) == 1 ? '直接拼成' : '参与拼团' }}
                        </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        <!-- 装修时，防止点击 -->
        <view v-if="diyStore.mode == 'decorate'" class="absolute z-10 top-0 right-0 bottom-0 left-0"></view>
        <!-- 拼团SKU选择器 -->
        <ns-pintuan-sku ref="pintuanSkuRef" v-if="Object.keys(diyComponent).length && diyComponent.goods"
            :goods-detail="{ ...diyComponent, pintuan_id: (diyComponent as any)?.pintuan_id || (diyComponent as any)?.id }"
            @change="addpingtuan" />
        <!-- 分享 -->
        <share-poster ref="sharePosterRef"  :isPreload="false" v-if="Object.keys(pintuanGoodsData).length" posterType="pintuan_goods" :posterId="pintuanGoodsData.goods?.poster_id" :posterParam="posterParam" :copyUrlParam="copyUrlParam" :copyUrl="copyUrl"  @close="posterClose" />

    </view>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import { img, timeTurnTimeStamp, redirect } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import usePintuanGoodsDetailStore from '@/addon/pintuan/stores/goodsDetail';
import { getPintuanGroupListApi } from '@/addon/pintuan/api/pintuan';
import nsPintuanSku from '@/addon/pintuan/components/ns-pintuan-sku/ns-pintuan-sku.vue';
 import sharePoster from '@/components/share-poster/share-poster.vue';
import useMemberStore from '@/stores/member'

const memberStore = useMemberStore()
const userInfo = computed(() => memberStore.info)
const props = defineProps(['component', 'index', 'value', 'global']);
const diyStore = useDiyStore();
const emits = defineEmits(['loadingFn', 'update:componentIsShow']); //商品数据加载完成之后


// 拼团SKU相关
const pintuanSkuRef: any = ref(null);
const decorateData = ref()
 
const diyComponent = computed(() => {
    if (diyStore.mode == 'decorate') {
        const obj = {
            goods: {
                pintuan_price: '100.00'
            },
            success_group_num: 100,
        }
        emits('update:componentIsShow', diyStore.value[props.index].isShow)
        return Object.assign({}, { diyInfo: diyStore.value[props.index] }, obj);
    } else {
        if (props.component.isShow && Object.keys(pingtuanglist.value).length) {
            emits('update:componentIsShow', true)
        }
        return Object.assign({}, { diyInfo: props.component }, usePintuanGoodsDetailStore().goodsDetail);
    }
})

const timeData = ref<any[]>([]);
const isAnimating = ref(false); // 添加动画状态标识
const currentTime = ref(Date.now()); // 当前时间戳，用于触发响应式更新
let countdownTimer: any = null; // 倒计时定时器

// 格式化时间显示（补零）
const formatTime = (time: number): string => {
    return time < 10 ? `0${time}` : `${time}`;
};

// 缓存时间戳转换结果，避免重复计算
const timeStampCache = new Map<string, number | null>();

// 获取倒计时数据
const getTimeData = (item: any, index: number) => {
    const expireTimeStr = item?.expire_time;
    if (!expireTimeStr) {
        return { days: 0, hours: 0, minutes: 0, seconds: 0 };
    }

    let expireTime = 0;

    // 使用缓存避免重复的时间戳转换
    if (timeStampCache.has(expireTimeStr)) {
        const cachedTimestamp = timeStampCache.get(expireTimeStr);
        if (cachedTimestamp) {
            expireTime = cachedTimestamp * 1000;
        }
    } else {
        if (typeof expireTimeStr === 'string' && expireTimeStr.trim()) {
            const timestamp = timeTurnTimeStamp(expireTimeStr);
            timeStampCache.set(expireTimeStr, timestamp);
            if (timestamp && !isNaN(timestamp)) {
                expireTime = timestamp * 1000;
            }
        } else {
            timeStampCache.set(expireTimeStr, null);
        }
    }

    if (!expireTime) {
        return { days: 0, hours: 0, minutes: 0, seconds: 0 };
    }

    const remainingTime = expireTime - currentTime.value;

    if (remainingTime <= 0) {
        return { days: 0, hours: 0, minutes: 0, seconds: 0 };
    }

    const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

    // 直接返回实时计算结果，不依赖索引缓存
    return { days, hours, minutes, seconds };
};

 
 

const warpCss = computed(() => {
    let style = '';
    style += 'position:relative;';
    if (diyComponent.value.diyInfo.componentStartBgColor && diyComponent.value.diyInfo.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.diyInfo.componentGradientAngle},${diyComponent.value.diyInfo.componentStartBgColor},${diyComponent.value.diyInfo.componentEndBgColor});`;
    else style += 'background-color:' + (diyComponent.value.diyInfo.componentStartBgColor || diyComponent.value.diyInfo.componentEndBgColor) + ';';

    if (diyComponent.value.diyInfo.componentBgUrl) {
        style += `background-image:url('${img(diyComponent.value.diyInfo.componentBgUrl)}');`;
        style += 'background-size: cover;background-repeat: no-repeat;';
    }

    if (diyComponent.value.diyInfo.topRounded) style += 'border-top-left-radius:' + diyComponent.value.diyInfo.topRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.topRounded) style += 'border-top-right-radius:' + diyComponent.value.diyInfo.topRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.diyInfo.bottomRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.diyInfo.bottomRounded * 2 + 'rpx;';
    return style;
})

const titleCss = computed(() => {
    let style = '';
    style += `color:${diyComponent.value.diyInfo.titleStyle.textColor};`;
    style += 'font-size:' + diyComponent.value.diyInfo.titleStyle.fontSize * 2 + 'rpx;';
    return style;
})

const moreCss = computed(() => {
    let style = '';
    style += `color:${diyComponent.value.diyInfo.moreStyle.textColor};`;
    style += 'font-size:' + diyComponent.value.diyInfo.moreStyle.fontSize * 2 + 'rpx;';
    return style;
})

const btnCss = computed(() => {
    let style = '';
    style += `color:${diyComponent.value.diyInfo.btnStyle.textColor};`;
    style += `background-color:${diyComponent.value.diyInfo.btnStyle.bgColor};`;
    style += 'font-size:' + diyComponent.value.diyInfo.btnStyle.fontSize * 2 + 'rpx;';
    style += 'border-radius:' + diyComponent.value.diyInfo.btnStyle.rounded * 2 + 'rpx;';
    return style;
})

// 将数据按每3条分组，每个组作为一个 swiper-item
const swiperGroups = computed(() => {
    if (diyStore.mode == 'decorate') {
        return decorateData.value
    }

    if (!pingtuanglist2.value || pingtuanglist2.value.length === 0) {
        return [];
    }
    
    const originalList = pingtuanglist2.value;
    const groups = [];
    
    // 如果数据不足3条，只创建一个组
    if (originalList.length <= 3) {
        return [originalList];
    }
    
    // 按每3条分组
    for (let i = 0; i < originalList.length; i += 3) {
        const group = originalList.slice(i, i + 3);
        
        // 如果最后一组不足3条，从头部补齐
        while (group.length < 3) {
            const supplementIndex = (group.length + i) % originalList.length;
            group.push({
                ...originalList[supplementIndex],
                supplementKey: `supplement-${i}-${group.length}` // 标记补充的数据
            });
        }
        
        groups.push(group);
    }
    return groups;
})

// 创建显示列表，确保有足够的数据进行循环滚动
const displayList = computed(() => {
    if (!pingtuanglist2.value || pingtuanglist2.value.length === 0) {
        return [];
    }
    
    const originalList = pingtuanglist2.value;
    
    // 如果数据少于等于3条，直接返回原数据
    if (originalList.length <= 3) {
        return originalList;
    }
    
    // 如果数据超过3条，需要创建足够的数据来支持循环滚动
    // 为了确保滚动流畅，我们需要至少6条数据（2轮循环）
    const displayData = [];
    const minItems = Math.max(6, originalList.length);
    
    for (let i = 0; i < minItems; i++) {
        const dataIndex = i % originalList.length;
        displayData.push({
            ...originalList[dataIndex],
            displayKey: `display-${i}-${dataIndex}` // 添加唯一标识
        });
    }
    
    return displayData;
})

const scrollDisplayList = ref<any[]>([]);
const currentDisplayIndex = ref(0);
const scrollOffset = ref(0);
const scrollTransition = ref("transform 0.5s ease-in-out");
let scrollTimer: any = null;
const pingtuanglist = ref<any[]>([]);
const pingtuanglist2 = ref<any[]>([]);
const pingtuanglisttotal = ref(0)
// 获取拼团列表
const getPintuanGroupListfu = () => {

    // 从 diyComponent.value 中获取 pintuan_id
    const pintuanId = (diyComponent.value as any)?.pintuan_id || (diyComponent.value as any)?.id;

    if (!pintuanId) {
        pingtuanglist.value = [];
        startScrollAnimation();
        return;
    }

    getPintuanGroupListApi({ pintuan_id: pintuanId })
        .then((res: any) => {
            pingtuanglist2.value = res.data.data;
            if (props.component.isShow && Object.keys(pingtuanglist2.value).length==0) {
                emits('update:componentIsShow', false)
            }
            pingtuanglisttotal.value = res.data.total;
            // 处理分页数据结构
            if (res.data && res.data.data && Array.isArray(res.data.data)) {
                pingtuanglist.value = res.data.data;
            } else if (
                res.data &&
                res.data.data &&
                res.data.data.data &&
                Array.isArray(res.data.data.data)
            ) {
                // 处理分页格式：{data: {data: [...], current_page: 1, last_page: 1, total: 0}}
                pingtuanglist.value = res.data.data.data;
            } else {
                pingtuanglist.value = [];
            }
            startScrollAnimation();
        })
        .catch((err: any) => {
            pingtuanglist.value = [];
            startScrollAnimation();
        });
};

// 开始滚动动画
const startScrollAnimation = () => {
    // 清除现有定时器
    if (scrollTimer) {
        clearInterval(scrollTimer);
    }

    // 如果没有数据或数据少于等于3条，直接显示全部
    if (pingtuanglist.value.length <= 3) {
        scrollDisplayList.value = pingtuanglist.value.map((item, index) => ({
            ...item,
            scrollKey: `static-${index}`,
        }));
        scrollOffset.value = 0;
        return;
    }

    // 初始化滚动显示列表，创建循环显示的数据
    initScrollDisplayList();

    // 设置定时器，每3秒向上滚动一条
    scrollTimer = setInterval(() => {
        scrollToNext();
    }, 3000);
};

// 初始化滚动显示列表
const initScrollDisplayList = () => {
    if (pingtuanglist.value.length === 0) return;

    // 创建一个包含足够多条数据的列表，确保向上滚动的连续性
    const displayList: any[] = [];

    // 添加足够的数据项以支持连续滚动
    // 我们需要至少9条数据：3条在视窗上方（隐藏），3条在视窗内（显示），3条在视窗下方（预备）
    for (let i = 0; i < 9; i++) {
        const dataIndex = i % pingtuanglist.value.length;
        displayList.push({
            ...pingtuanglist.value[dataIndex],
            scrollKey: `scroll-${i}-${Date.now()}`,
        });
    }

    scrollDisplayList.value = displayList;
    currentDisplayIndex.value = 0;
    // 初始位置：向上偏移300rpx，这样前3条数据在视窗上方（隐藏）
    // 用户看到的是第4、5、6条数据
    scrollOffset.value = -300;
};

// 滚动到下一组（3个为一组向上滚动）
const scrollToNext = () => {
    if (pingtuanglist.value.length <= 3) return;

    // 设置动画状态
    isAnimating.value = true;

    // 向上滚动3个项目的高度（约300rpx）
    scrollOffset.value -= 300;

    // 滚动完成后，更新数据并调整位置
    setTimeout(() => {
        // 移动3个位置
        currentDisplayIndex.value =
            (currentDisplayIndex.value + 3) % pingtuanglist.value.length;

        // 批量计算新添加的项目，减少循环开销
        const newItems = pingtuanglist.value.slice(
            (currentDisplayIndex.value + 6) % pingtuanglist.value.length,
            (currentDisplayIndex.value + 9) % pingtuanglist.value.length
        ).map((item, i) => ({
            ...item,
            scrollKey: `scroll-${Date.now()}-${i}`,
        }));

        // 如果切片跨越数组边界，需要特殊处理
        if (newItems.length < 3) {
            const remainingCount = 3 - newItems.length;
            const additionalItems = pingtuanglist.value.slice(0, remainingCount).map((item, i) => ({
                ...item,
                scrollKey: `scroll-${Date.now()}-${newItems.length + i}`,
            }));
            newItems.push(...additionalItems);
        }

        // 关闭动画过渡，瞬间更新数据
        scrollTransition.value = "none";

        // 更新显示列表：移除底部3项，在顶部添加新的3项
        scrollDisplayList.value = [...newItems, ...scrollDisplayList.value.slice(0, -3)];


        // 调整滚动位置，保持视觉连续性（向下调整300rpx）
        scrollOffset.value += 300;

        // 恢复动画状态
        isAnimating.value = false;

        // 下一帧重新启用动画过渡
        setTimeout(() => {
            scrollTransition.value = "transform 0.5s ease-in-out";
        }, 16); // 使用requestAnimationFrame的时间间隔
    }, 500); // 等待CSS动画完成
};
const pintuanGoodsData = ref<any>([]);
const posterParam = ref<any>({});
const copyUrlParam = ref<any>({});
const copyUrl= ref<any>("");
const posterClose = () => {
    usePintuanGoodsDetailStore().setGoodsDetail({ isOpenSharePoster: false })
}
const sharePosterRef = ref(null);
// 参与拼团 - 处理来自滚动列表的点击和SKU组件的事件
const addpingtuan = (item: any) => {
    // 如果是来自滚动列表的点击（有id属性）
    if (item && item.id) {
        if (item.is_me == 1 || item.is_join==1) {
            console.log(pintuanGoodsData.value,'拼团数据')
             // 打开分享海报
            posterParam.value.pintuan_id = pintuanGoodsData.value.pintuan_id;
            posterParam.value.group_id = item.id;
            // if (pintuanGoodsData.value.userInfo && pintuanGoodsData.value.userInfo.member_id) {
            //     posterParam.value.member_id = pintuanGoodsData.value.userInfo.member_id;
            // }
              if(userInfo.value && userInfo.value.member_id){
                        posterParam.value.member_id =  userInfo.value.member_id;
                }
            copyUrl.value = '/addon/pintuan/pages/goods/detail';
            copyUrlParam.value = `?pintuan_id=${pintuanGoodsData.value.pintuan_id}&group_id=${item.id}`;
            // usePintuanGoodsDetailStore().setGoodsDetail({ isOpenSharePoster: true });
            console.log('sharePosterRef.value',sharePosterRef.value)
             sharePosterRef.value.openShare()
            return
        }

        // 设置拼团信息到store
        usePintuanGoodsDetailStore().setGoodsDetail({
            is_single_buy: 0,
            skuBuyType: 'buy_now',
            isSingle: 0,
            join_type: 'join_group',
            group_id: item.id,
            is_need_recalculate: 1,
            check_ladder: item.check_ladder,
            isOpenSkuBuy: true
        });
    }  
};

const navToPintuan = (type: any = 'open_group') => {
    // 调用拼团SKU选择器
    if (pintuanSkuRef.value) {
        pintuanSkuRef.value.open(type);
    }
};

onMounted(() => {
     // 初始化拼团商品数据
    pintuanGoodsData.value = usePintuanGoodsDetailStore().goodsDetail;
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
    
        pingtuanglisttotal.value = 3
        decorateData.value = [
            [
                {
                    member_list: [
                        {
                            member: {
                                headimg: 'static/resource/images/default_headimg.png',
                                nickname: '小红'
                            }
                        },
                        {
                            member: {
                                headimg: 'static/resource/images/default_headimg.png',
                                nickname: '小明'
                            }
                        }
                    ],
                    target_num: 5,
                    current_num: 2
                }, {
                    member_list: [
                        {
                            member: {
                                headimg: 'static/resource/images/default_headimg.png',
                                nickname: '小红'
                            }
                        },
                        {
                            member: {
                                headimg: 'static/resource/images/default_headimg.png',
                                nickname: '小李'
                            }
                        }
                    ],
                    expire_time: '2025-09-17 17:22:48',
                    target_num: 5,
                    current_num: 2
                }, {
                    member_list: [
                        {
                            member: {
                                headimg: 'static/resource/images/default_headimg.png',
                                nickname: '小王'
                            }
                        },
                        {
                            member: {
                                headimg: 'static/resource/images/default_headimg.png',
                                nickname: '小张'
                            }
                        }
                    ],
                    expire_time: '2025-09-17 18:22:48',
                    target_num: 5,
                    current_num: 2
                }
            ]
        ]
    } else {
        // 当组件数据更新时，重新获取拼团列表
        getPintuanGroupListfu();
    }

    // 启动倒计时
    countdownTimer = setInterval(() => {
        currentTime.value = Date.now();
    }, 1000);
    
    // 监听页面显示事件
    uni.$on('pageShow', () => {
        getPintuanGroupListfu()
    })
    
    // 监听页面返回事件
    uni.$on('pageReturn', () => {
        getPintuanGroupListfu()
    })
});

watch(()=>diyComponent.value.is_recalculate,(newVal,oldVal)=>{
    getPintuanGroupListfu()
})

// 组件卸载时清理定时器和缓存
onUnmounted(() => {
    if (scrollTimer) {
        clearInterval(scrollTimer);
        scrollTimer = null;
    }
    if (countdownTimer) {
        clearInterval(countdownTimer);
        countdownTimer = null;
    }
    // 清理时间戳缓存，释放内存
    timeStampCache.clear();
    // 清理时间数据
    timeData.value = [];
    
    // 清理事件监听
    uni.$off('pageShow')
    uni.$off('pageReturn')
});
</script>
<style lang="scss" scoped>
.arrow-left {
    background: rgba(153, 153, 153, 0.1);
    border: 1rpx solid rgba(221, 221, 221, 0.3);
}

/* 滚动动画样式 */
.scroll-container {
    position: relative;
    overflow: hidden;
}

.scroll-content {
    transition: transform 0.5s ease-in-out;
}

.scroll-item {
    height: 100rpx;
    /* 固定每个项目的高度 */
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* 平滑向上滚动动画 */
@keyframes smoothScrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100rpx);
    }
}

/* 平滑向下滚动动画（用于数据更新时的位置调整） */
@keyframes smoothScrollDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100rpx);
    }
}
</style>
