var allWaterfallArr = [
    {
        category: "image",
        title: "舟山",
        imageWebp: "1.jpg",
        imageJpg: "1.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "舟山",
        imageWebp: "2.jpg",
        imageJpg: "2.jpg",
        imageHeight: 562.2,
    },
    {
        category: "video",
        title: "舟山站-拍摄花絮",
        imageWebp: "3.jpg",
        imageJpg: "3.jpg",
        video: "3.mp4",
        poster: "3.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "舟山-港岛大桥",
        imageWebp: "4.jpg",
        imageJpg: "4.jpg",
        imageHeight: 562.2,
    },
    {
        category: "video",
        title: "宁波站-拍摄花絮",
        imageWebp: "5.jpg",
        imageJpg: "5.jpg",
        video: "5.mp4",
        poster: "po_5.jpg",
        imageHeight: 562.2,
    },
    {
        category: "image",
        title: "舟山-秀山大桥",
        imageWebp: "6.jpg",
        imageJpg: "6.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "舟山",
        imageWebp: "7.jpg",
        imageJpg: "7.jpg",
        imageHeight: 210.73,
    },
    {
        category: "video",
        title: "青龙湾站-拍摄花絮",
        imageWebp: "8.jpg",
        imageJpg: "8.jpg",
        video: "8.mp4",
        poster: "8.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "宣城-青龙湾",
        imageWebp: "9.jpg",
        imageJpg: "9.jpg",
        imageHeight: 210.73,
    },
    {
        category: "video",
        title: "红杉林站-拍摄花絮",
        imageWebp: "10.jpg",
        imageJpg: "10.jpg",
        video: "10.mp4",
        poster: "po_10.jpg",
        imageHeight: 562.2,
    },
    {
        category: "image",
        title: "宁国-落雨红杉林",
        imageWebp: "11.jpg",
        imageJpg: "11.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "舟山-秀山大桥",
        imageWebp: "12.jpg",
        imageJpg: "12.jpg",
        imageHeight: 562.2,
    },
    {
        category: "image",
        title: "汉中天坑群",
        imageWebp: "13.jpg",
        imageJpg: "13.jpg",
        imageHeight: 790.32,
    },
    {
        category: "image",
        title: "宁国-落雨红杉林",
        imageWebp: "14.jpg",
        imageJpg: "14.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "宁波-鳌柱塔",
        imageWebp: "15.jpg",
        imageJpg: "15.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "宣城-青龙湾",
        imageWebp: "16.jpg",
        imageJpg: "16.jpg",
        imageHeight: 562.2,
    },
    {
        category: "image",
        title: "安庆-天柱山",
        imageWebp: "17.jpg",
        imageJpg: "17.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "皖南-卢村",
        imageWebp: "18.jpg",
        imageJpg: "18.jpg",
        imageHeight: 562.2,
    },
    {
        category: "image",
        title: "安庆-天柱山",
        imageWebp: "19.jpg",
        imageJpg: "19.jpg",
        imageHeight: 562.2,
    },
    {
        category: "image",
        title: "安庆-天柱山",
        imageWebp: "20.jpg",
        imageJpg: "20.jpg",
        imageHeight: 562.2,
    },
    {
        category: "image",
        title: "舟山",
        imageWebp: "21.jpg",
        imageJpg: "21.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "四川阿坝-莲宝叶则",
        imageWebp: "22.jpg",
        imageJpg: "22.jpg",
        imageHeight: 117.46,
    },
    {
        category: "image",
        title: "甘南阿万仓湿地",
        imageWebp: "23.jpg",
        imageJpg: "23.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "甘南阿万仓湿地",
        imageWebp: "24.jpg",
        imageJpg: "24.jpg",
        imageHeight: 210.73,
    },
    {
        category: "video",
        title: "洋县站-拍摄花絮",
        imageWebp: "25.jpg",
        imageJpg: "25.jpg",
        video: "43.mp4",
        poster: "po_43.jpg",
        imageHeight: 456.09,
    },
    {
        category: "image",
        title: "甘南阿万仓湿地",
        imageWebp: "26.jpg",
        imageJpg: "26.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "甘南阿万仓湿地",
        imageWebp: "27.jpg",
        imageJpg: "27.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "四川阿坝-莲宝叶则",
        imageWebp: "28.jpg",
        imageJpg: "28.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "四川阿坝-莲宝叶则",
        imageWebp: "29.jpg",
        imageJpg: "29.jpg",
        imageHeight: 210.73,
    },
    {
        category: "video",
        title: "汉中天坑站-拍摄花絮",
        imageWebp: "30.jpg",
        imageJpg: "30.jpg",
        video: "44.mp4",
        poster: "44.jpg",
        imageHeight: 210.87,
    },
    {
        category: "image",
        title: "汉中挂壁公路",
        imageWebp: "31.jpg",
        imageJpg: "31jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "汉中挂壁公路",
        imageWebp: "32.jpg",
        imageJpg: "32.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "舟山",
        imageWebp: "33.jpg",
        imageJpg: "33.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "唐家河国家级自然保护区-中华斑羚",
        imageWebp: "34.jpg",
        imageJpg: "34.jpg",
        imageHeight: 210.73,
    },
    {
        category: "video",
        title: "莲宝叶则站-拍摄花絮",
        imageWebp: "35.jpg",
        imageJpg: "35.jpg",
        video: "46.mp4",
        poster: "46.jpg",
        poster: "35.jpg",
        imageHeight: 210.87,
    },
    {
        category: "image",
        title: "唐家河国家级自然保护区-藏酋猴",
        imageWebp: "36.jpg",
        imageJpg: "36.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "汉中天坑群",
        imageWebp: "37.jpg",
        imageJpg: "37.jpg",
        imageHeight: 562.2,
    },
    {
        category: "image",
        title: "汉中天坑群",
        imageWebp: "38.jpg",
        imageJpg: "38.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "皖南卢村",
        imageWebp: "39.jpg",
        imageJpg: "39.jpg",
        imageHeight: 210.73,
    },
    {
        category: "image",
        title: "汉中洋县-朱鹮",
        imageWebp: "40.jpg",
        imageJpg: "40.jpg",
        imageHeight: 562.2,
    },
    {
        category: "video",
        title: "越海向山-拍摄花絮",
        imageWebp: "41.jpg",
        imageJpg: "41.jpg",
        video: "41.mp4",
        poster: "po_41.jpg",
        imageHeight: 456.09,
    },
    {
        category: "video",
        title: "西安站-拍摄花絮",
        imageWebp: "42.jpg",
        imageJpg: "42.jpg",
        video: "42.mp4",
        poster: "42.jpg",
        imageHeight: 210.87,
    },
    {
        category: "image",
        title: "汉中-天坑群",
        imageWebp: "43.jpg",
        imageJpg: "43.jpg",
        imageHeight: 562.2,
    },
    {
        category: "image",
        title: "汉中挂壁公路",
        imageWebp: "44.jpg",
        imageJpg: "44.jpg",
        imageHeight: 210.73,
    },
    {
        category: "video",
        title: "唐家河站-拍摄花絮",
        imageWebp: "45.jpg",
        imageJpg: "45.jpg",
        video: "45.mp4",
        poster: "po_45.jpg",
        imageHeight: 456.09,
    },
    {
        category: "video",
        title: "阿万仓湿地站-拍摄花絮",
        imageWebp: "46.jpg",
        imageJpg: "46.jpg",
        video: "47.mp4",
        poster: "po_47.jpg",
        imageHeight: 456.09,
    },
];
var hiddenImgHeights = [];

var $window = $(window);
var windowWidth = $window.width();
var windowHeight = $window.height();
var bg = $(".bg-container");
var bg1 = $(".bg-container .bg1");
var bg2 = $(".bg-container .bg2");
var bg3 = $(".bg-container .bg3");
var bg4 = $(".bg-container .bg4");
var bg5 = $(".bg-container .bg5");
var waterFallColumn = $(".waterfall").find(".img-column");
var showMoreImg = $(".page-section-03 .show-more");
var imgSwiperWrapper = $(".img-swiper .swiper-wrapper");
var currentIndex = 0;
var columnHeights = [];

for (let i = 0; i < allWaterfallArr.length; i++) {
    hiddenImgHeights.push(allWaterfallArr[i].imageHeight);
    if (allWaterfallArr[i].category === "image") {
        var slide = $("<div class='swiper-slide swiper-no-swiping'><div class='img-box'><picture><source srcset='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" + allWaterfallArr[i].imageWebp + "' type='image/jpg'><source srcset='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" + allWaterfallArr[i].imageJpg + "' type='image/jpg'><img class='lazyload' src='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" + allWaterfallArr[i].imageWebp + "' data-src='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" + allWaterfallArr[i].imageWebp + "' alt='" + allWaterfallArr[i].title + "'></picture><div class='popup-close'></div></div><div class='txt'>" + allWaterfallArr[i].title + "</div></div>");
    } else if (allWaterfallArr[i].category === "video") {
        var slide = $("<div class='swiper-slide swiper-no-swiping'><div class='img-box'><video class='video-js vjs-fluid' controls='controls' preload='auto' webkit-playsinline='true' playsinline='true' x-webkit-airplay='allow' x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-orientation='portraint' style='object-fit:fill' poster='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" + allWaterfallArr[i].poster + "' data-setup='{}'><source src='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/video/" + allWaterfallArr[i].video + "' type='video/mp4'/></video><div class='popup-close'></div></div><div class='txt'>" + allWaterfallArr[i].title + "</div></div>");
    }
    imgSwiperWrapper.append(slide);
}

if ($window.width() <= 1000) {
    columnHeights = [0, 0];
} else {
    columnHeights = [0, 0, 0, 0];
}
function newPos(x, windowHeight, pos, adjuster, inertia) {
    return x + "% " + -(windowHeight + pos - adjuster) * inertia + "px";
}

function Move() {
    var pos = $window.scrollTop();
    if (bg.hasClass("inview")) {
        if (windowWidth > 1000) {
            bg.css({ backgroundPosition: newPos(0, windowHeight, pos, 1000, 0) });
            bg1.css({ backgroundPosition: newPos(0, windowHeight, pos, 970, 0.4) });
            bg2.css({ backgroundPosition: newPos(0, windowHeight, pos, 1000, 0.3) });
            bg3.css({ backgroundPosition: newPos(0, windowHeight, pos, 1000, 0.2) });
            bg4.css({ backgroundPosition: newPos(0, windowHeight, pos, 1000, 0.1) });
            bg5.css({ backgroundPosition: newPos(0, windowHeight, pos, 1000, 0.2) });
        } else if (windowWidth > 640 && windowWidth <= 1000) {
            bg.css({ backgroundPosition: newPos(0, windowHeight, pos, 0, 0) });
            bg1.css({ backgroundPosition: newPos(0, windowHeight, pos, 200, 0.4) });
            bg2.css({ backgroundPosition: newPos(0, windowHeight, pos, 50, 0.3) });
            bg3.css({ backgroundPosition: newPos(0, windowHeight, pos, -100, 0.2) });
            bg4.css({ backgroundPosition: newPos(0, windowHeight, pos, -1000, 0.1) });
            bg5.css({ backgroundPosition: newPos(0, windowHeight, pos, 0, 0.2) });
        } else {
            bg.css({ backgroundPosition: newPos(0, windowHeight, pos, 1000, 0) });
            bg1.css({ backgroundPosition: newPos(0, windowHeight, pos, 600, 0.4) });
            bg2.css({ backgroundPosition: newPos(0, windowHeight, pos, 700, 0.3) });
            bg3.css({ backgroundPosition: newPos(0, windowHeight, pos, 850, 0.2) });
            bg4.css({ backgroundPosition: newPos(0, windowHeight, pos, 500, 0.1) });
            bg5.css({ backgroundPosition: newPos(0, windowHeight, pos, 600, 0.2) });
        }
    }
}

function createItem(startIndex, endIndex) {
    for (let i = startIndex; i < endIndex; i++) {
        var minHeight = Math.min(...columnHeights);
        var minIndex = columnHeights.indexOf(minHeight);
        if (allWaterfallArr[i].category === "image") {
            var imageElement = $("<div class='img-wrapper' data-index='" + i + "'><picture><source srcset='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" + allWaterfallArr[i].imageWebp + "' type='image/jpg'><source srcset='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" + allWaterfallArr[i].imageJpg + "' type='image/jpg'><img class='' src='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" + allWaterfallArr[i].imageWebp + "' data-src='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" + allWaterfallArr[i].imageWebp + "' alt='" + allWaterfallArr[i].title + "'></picture><div class='mask-txt'>" + allWaterfallArr[i].title + "</div></div>");
        } else if (allWaterfallArr[i].category === "video") {
            var imageElement = $(
                "<div class='img-wrapper' data-index='" +
                i +
                "'><picture><source srcset='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" +
                allWaterfallArr[i].imageWebp +
                "' type='image/jpg'><source srcset='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" +
                allWaterfallArr[i].imageJpg +
                "' type='image/jpg'><img class='' src='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" +
                allWaterfallArr[i].imageWebp +
                "' data-src='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/" +
                allWaterfallArr[i].imageWebp +
                "' alt='" +
                allWaterfallArr[i].title +
                "'></picture><picture><source srcset='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/play_btn.png' type='image/png'><source srcset='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/play_btn.png' type='image/png'><img alt='播放' src='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/play_btn.png' data-src='https://auto.huawei.com/marketingcloud/pep/asset//20000004/campaign/travelog/img/play_btn.png' class='play-btn lazyload' /></picture><div class='mask-txt'>" +
                allWaterfallArr[i].title +
                "</div></div>"
            );
        }
        waterFallColumn.eq(minIndex).append(imageElement);
        columnHeights[minIndex] += hiddenImgHeights[i];
    }
}

$(document).ready(function () {
    if (windowWidth > 1000) {
        bg.css({ backgroundPosition: newPos(0, windowHeight, 0, 1000, 0) });
        bg1.css({ backgroundPosition: newPos(0, windowHeight, 0, 970, 0.4) });
        bg2.css({ backgroundPosition: newPos(0, windowHeight, 0, 1000, 0.3) });
        bg3.css({ backgroundPosition: newPos(0, windowHeight, 0, 1000, 0.2) });
        bg4.css({ backgroundPosition: newPos(0, windowHeight, 0, 1000, 0.1) });
        bg5.css({ backgroundPosition: newPos(0, windowHeight, 0, 1000, 0.2) });
    } else if (windowWidth > 640 && windowWidth <= 1000) {
        bg.css({ backgroundPosition: newPos(0, windowHeight, 0, 0, 0) });
        bg1.css({ backgroundPosition: newPos(0, windowHeight, 0, 200, 0.4) });
        bg2.css({ backgroundPosition: newPos(0, windowHeight, 0, 50, 0.3) });
        bg3.css({ backgroundPosition: newPos(0, windowHeight, 0, -100, 0.2) });
        bg4.css({ backgroundPosition: newPos(0, windowHeight, 0, -1000, 0.1) });
        bg5.css({ backgroundPosition: newPos(0, windowHeight, 0, 0, 0.2) });
    } else {
        bg.css({ backgroundPosition: newPos(0, windowHeight, 0, 1000, 0) });
        bg1.css({ backgroundPosition: newPos(0, windowHeight, 0, 600, 0.4) });
        bg2.css({ backgroundPosition: newPos(0, windowHeight, 0, 700, 0.3) });
        bg3.css({ backgroundPosition: newPos(0, windowHeight, 0, 850, 0.2) });
        bg4.css({ backgroundPosition: newPos(0, windowHeight, 0, 500, 0.1) });
        bg5.css({ backgroundPosition: newPos(0, windowHeight, 0, 600, 0.2) });
    }

    $window.resize(function () {
        // Move();
    });

    $window.on("scroll", function () {
        if ($window.scrollTop() < $(".page-banner").height()) {
            bg.addClass("inview");
        } else {
            bg.removeClass("inview");
        }
        // Move();
    });

    $(".page-section-02 .items-box .item").on("click", function () {
        var index = $(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        videoSwiper.slideTo(index, 1000, false);
    });

    var videoSwiper = new Swiper(".video-swiper", {
        slidesPerView: 1,
        slidesPerGroup: 1,
        initialSlide: 3,
        spaceBetween: 20,
        pagination: {
            el: ".video-pagination-swiper",
            clickable: true,
        },
        navigation: {
            nextEl: ".video-button-next",
            prevEl: ".video-button-prev",
        },
        breakpoints: {
            992: {},
        },
        on: {
            slideChangeTransitionEnd: function () {
                $(".page-section-02 .items-box .item").eq(this.activeIndex).addClass("active").siblings().removeClass("active");
            },
        },
    });

    var imgSwiper = new Swiper(".img-swiper", {
        noSwiping: true,
        navigation: {
            nextEl: ".img-swiper-button-next",
            prevEl: ".img-swiper-button-prev",
        },
        on: {
            slideChangeTransitionEnd: function () {
                $(".bu-geography-popup .img-swiper .swiper-slide").eq(this.activeIndex).siblings().find("video").trigger("pause");
                setTimeout(function () {
                    $(".bu-geography-popup .img-swiper .swiper-slide").eq(this.activeIndex).find("video").trigger("play");
                    $(".bu-geography-popup .img-swiper .swiper-slide").eq(this.activeIndex).find("video").trigger("play");
                }, 1000);
            },
        },
    });

    setTimeout(function () {
        createItem(0, 12);
        currentIndex = 2;
    }, 1000);

    waterFallColumn.on("click", ".img-wrapper", function () {
        var clickedIndex = $(this).data("index");
        $("body").css("overflow", "hidden");
        $(".page-section-03 .img-wrapper").css("pointer-events", "none");
        imgSwiper.slideTo(clickedIndex, 100, false);
        $(".bu-geography-popup").addClass("on");
        setTimeout(function () {
            $(".bu-geography-popup .img-swiper .swiper-slide").eq(clickedIndex).find("video").trigger("play");
        }, 100);
    });

    $(".page-section-03 .img-wrapper").hover(
        function () {
            $(this).find(".mask-txt").fadeIn();
        },
        function () {
            $(this).find(".mask-txt").fadeOut();
        }
    );

    showMoreImg.on("click", function () {
        var nextStartIndex = currentIndex * 6;
        var nextEndIndex = nextStartIndex + 6;
        if (nextStartIndex < allWaterfallArr.length) {
            if (nextStartIndex + 6 > allWaterfallArr.length) {
                nextEndIndex = allWaterfallArr.length;
            }
            createItem(nextStartIndex, nextEndIndex);
            currentIndex++;
        }
        if (currentIndex * 6 >= allWaterfallArr.length) {
            $(this).addClass("no-more").text("更多精彩 敬请期待").css("cursor", "inherit");
        }
    });

    $(".popup-close").on("click", function (e) {
        e.stopPropagation();
        e.preventDefault();
        $("body").css("overflow", "scroll");
        $(".bu-geography-popup").removeClass("on");
        $(".bu-geography-popup .img-swiper .swiper-slide").find("video").trigger("pause");
        setTimeout(function () {
            $(".page-section-03 .img-wrapper").css("pointer-events", "inherit");
        }, 500);
    });
});