const carouselSlide = document.querySelector('.carousel-slide');
const images = [];

// 生成图片地址列表，调整为114张
for (let i = 1; i <= 114; i++) {
    images.push(`/public/images/qiye/meiti${i.toString().padStart(3, '0')}.jpg`);
}

// 创建并插入带有图片的轮播列
const columns = [];
for (let i = 0; i < Math.ceil(114 / 4); i++) { // 计算列数，114张图片，每列4张
    const column = document.createElement('div');
    column.classList.add('carousel-column');
    for (let j = 0; j < 4; j++) { // 每列4行
        if (i * 4 + j < 114) { // 确保不会超出114张图片
            const item = document.createElement('div');
            item.classList.add('carousel-item');
            const img = document.createElement('img');
            img.src = images[i * 4 + j]; // 直接使用索引获取图片地址
            item.appendChild(img);
            column.appendChild(item);
        }
    }
    columns.push(column);
}

// 克隆第一组以实现无缝效果
const firstColumns = columns.map(col => col.cloneNode(true));
firstColumns.forEach(col => carouselSlide.appendChild(col));

// 将列插入到轮播滑动区
columns.forEach(column => {
    carouselSlide.appendChild(column);
});

let counter = 0;
const columnWidth = columns[0].clientWidth;
const totalColumns = columns.length + firstColumns.length; // 包括克隆的列

const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');

function moveToNext() {
    carouselSlide.style.transition = 'transform 0.5s ease-in-out';
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-columnWidth * counter) + 'px)';
    if (counter >= totalColumns - 9) { // 当达到克隆的第一列时
        setTimeout(() => {
            carouselSlide.style.transition = 'none';
            counter = 0;
            carouselSlide.style.transform = 'translateX(0)';
        }, 500);
    }
}

function moveToPrev() {
    if (counter <= 0) {
        carouselSlide.style.transition = 'none';
        counter = totalColumns - 10; // 调整为从最后一列滚动到前一列
        carouselSlide.style.transform = 'translateX(' + (-columnWidth * counter) + 'px)';
        setTimeout(() => {
            carouselSlide.style.transition = 'transform 0.5s ease-in-out';
            counter--;
            carouselSlide.style.transform = 'translateX(' + (-columnWidth * counter) + 'px)';
        }, 0);
    } else {
        carouselSlide.style.transition = 'transform 0.5s ease-in-out';
        counter--;
        carouselSlide.style.transform = 'translateX(' + (-columnWidth * counter) + 'px)';
    }
}

nextBtn.addEventListener('click', moveToNext);
prevBtn.addEventListener('click', moveToPrev);

let autoSlide = setInterval(moveToNext, 3000);

document.getElementById('carousel').addEventListener('mouseover', () => clearInterval(autoSlide));
document.getElementById('carousel').addEventListener('mouseout', () => autoSlide = setInterval(moveToNext, 3000));