(function () {
    var carouselList = [
        {
            imageUrl:
                "/newStatic/home/img/a1.jpg",
            title: "微信用户 海**唐 用户已获取解答",
            location: "广东-广州",
            phone: "155****4208",
            time: "21分钟前",
        },
        {
            imageUrl:
                "/newStatic/home/img/a2.jpg",
            title: "微信用户 平**气 用户已获取解答",
            location: "浙江-杭州",
            phone: "183****4847",
            time: "32分钟前",
        },
        {
            imageUrl:
                "/newStatic/home/img/a3.jpg",
            title: "微信用户 吃**帅 用户已获取解答",
            location: "上海-上海",
            phone: "181****7716",
            time: "36分钟前",
        },
        {
            imageUrl:
                "/newStatic/home/img/a4.jpg",
            title: "微信用户 X** 用户已获取解答",
            location: "广东-深圳",
            phone: "175****9507",
            time: "43分钟前",
        },
        {
            imageUrl:
                "/newStatic/home/img/a5.jpg",
            title: "微信用户 汤**迪 用户已获取解答",
            location: "北京-北京",
            phone: "136****9201",
            time: "58分钟前",
        },
    ];

    // 轮播功能实现
    var currentIndex = 0;
    var carouselInterval;

    function initCarousel() {
        var container = $("#carouselContent");

        // 生成轮播项
        carouselList.forEach(function (item) {
            var itemHtml = `
        <div class="carousel-item">
          <img class="carousel-item-avatar"
               src="${item.imageUrl}" alt="" />
          <div class="carousel-item-content">
            <div>${item.title}</div>
            <div class="carousel-item-location">
                <span>${item.location} ${item.phone}</span>
                <div class="carousel-item-time">
                ${item.time}
                </div>
            </div>
          </div>
        </div>
      `;
            container.append(itemHtml);
        });

        // 在末尾添加第一项的副本，用于无缝循环
        var firstItem = carouselList[0];
        var firstItemHtml = `
      <div class="carousel-item">
        <img class="carousel-item-avatar"
             src="${firstItem.imageUrl}" alt="" />
        <div class="carousel-item-content">
          <div>${firstItem.title}</div>
          <div class="carousel-item-location">
            <span>${firstItem.location} ${firstItem.phone}</span>
            <div class="carousel-item-time">
                ${firstItem.time}
            </div>
          </div>
        </div>
      </div>
    `;
        container.append(firstItemHtml);

        startCarousel();
    }

    function startCarousel() {
        carouselInterval = setInterval(function () {
            currentIndex++;
            var offset = -currentIndex * 68; // 每项高度68px

            $("#carouselContent").css("transform", "translateY(" + offset + "px)");

            // 当滚动到复制的第一项时，无缝跳回真正的第一项
            if (currentIndex === carouselList.length) {
                setTimeout(function () {
                    $("#carouselContent").addClass("no-transition");
                    currentIndex = 0;
                    $("#carouselContent").css("transform", "translateY(0)");

                    // 恢复过渡效果
                    setTimeout(function () {
                        $("#carouselContent").removeClass("no-transition");
                    }, 50);
                }, 500); // 等待滚动动画完成
            }
        }, 3000); // 每3秒切换
    }

    // 页面加载完成后初始化轮播
    $(document).ready(function () {
        initCarousel();
    });
})();