$(function () {
    clickBlowUp() //鐐瑰嚮鍥剧墖鏀惧ぇ
    createBackground($('.circle-animated'))
    scrollNumber()
    cardFadeIn()
    $(document).scroll(function () {
        cardFadeIn()
        animeBackground()
        backGroundScroll()
        scrollNumber()
    })
    initTabs();

    if($('.hd_fixed').offset()){
        var t = $('.hd_fixed').offset().top; 
        $(window).scroll(function (e) { 
            s = $(document).scrollTop(); 
            if (s > t - 153) {
                $('.hd_fixed').css('top',  s - t + 200+'px');
            } else { 
                $('.hd_fixed').css('top',  '53px');
            }
        })
    }
})

//card缁勪欢涓婄Щ鏁堟灉
function cardFadeIn() {
    var winHeight = $(window).height() + $(document).scrollTop();
    $('.card-content:not(.card-content-show)').each(function () {
        if ($(this).offset().top - winHeight < -100) {
            $(this).addClass('card-content-show')
        }
    })
}

function scrollNumber() {
    var winHeight = $(window).height() + $(document).scrollTop();
    $('.number-contain:not(.no-scroll)').each(function () {
        if ($(this).offset().top - winHeight < -100) {
            $('.scrolling_numbers').each(function(){
                numberScroll(this, [0, Number($(this).text())])
            })
            
            $(this).addClass('no-scroll')
        }
    })
}



//鍒涘缓鏋舵瀯鑳屾櫙鍥剧墖锛?涓柟鍧?涓や釜鍦嗭級
function createBackground(className) {
    const imgUrl = '/uploads/p_hzero/'
    const imgList = [
        {name: 'infrastructure-bg1.svg', className: 'square-item1'},
        {name: 'infrastructure-bg2.svg', className: 'square-item2'},
        {name: 'infrastructure-bg3.svg', className: 'square-item3'},
    ]
    imgList.forEach(item => {
        let imgDom = `<img class="${item.className}" src="${imgUrl}${item.name}"/>`
        $(className).append(imgDom)
    })
    $('<div class="item-bg1"></div>').appendTo(className)
    $('<div class="item-bg2"></div>').appendTo(className)
}

//鏋舵瀯閮ㄥ垎鑳屾櫙鍥剧墖婊氬姩鐗规晥()(涓や釜鍦?
function animeBackground() {
    if ($('.circle-animated').length == 0) {
        return
    }
    var scrollValue = ($(window).height() + $(document).scrollTop() - $('.circle-animated').offset().top) / 2
    if (scrollValue > 0 && scrollValue < 700) {
        anime({
            targets: '.item-bg1',
            translateY: scrollValue,
            translateX: scrollValue,
            loop: false,
            duration: 300,
            easing: 'linear'
        });
        anime({
            targets: '.item-bg2',
            translateY: -scrollValue,
            translateX: scrollValue,
            loop: false,
            duration: 300,
            easing: 'linear'
        })
    }
}

//鏋舵瀯鍥剧墖鏀惧ぇ
//骞冲彴鏋舵瀯鍥剧墖鐐瑰嚮鏀惧ぇ
function clickBlowUp() {
    let isBig = false
    $('.blowUp-img').click(function () {
        isBig = !isBig;
        isBig ? $(this).addClass('blowUp-style') : $(this).removeClass('blowUp-style')
    })
}


//浜у搧浼樺娍icon娓叉煋
function renderIcon(list, boxDom, boxType) {
    if (boxType === 'vertical') {
        list.forEach(item => {
            $(`<li class="vertical-icon-box">
            <div class="icon-box">
                 <img src="/uploads/${item.imgUrl}" alt="${item.title}">
            </div>
            <h2>${item.title}</h2>
            <p>${item.description}</p>
        </li>`).appendTo(boxDom)
        })
        $('.vertical-icon-box:gt(3)').css('margin-top', '40px')
    } else if (boxType === 'cross') {
        list.forEach(item => {
            $(`<div class="cross-icon-box">
            <div class="icon-box">
                 <img src="/uploads/${item.imgUrl}" alt="${item.title}">
            </div>
            <div class="icon-content">
                <h2>${item.title}</h2>
                <p>${item.description}</p>
            </div>
        </div>`).appendTo(boxDom)
        })
        $('.cross-icon-box:gt(0)').css('margin-top', '16px')
    } else if (boxType === 'link') {
        list.forEach((item, index) => {
            $(`<div class="link-icon-box">
            <div class="icon-box">
                 <img src="/uploads/${item.imgUrl}" alt="${item.title}">
            </div>
            <div class="icon-content">
                <h2>${item.title}</h2>
                <div id="link-${index}"></div>
            </div>
        </div>`).appendTo(boxDom)
        })
        list.forEach((item, index) => {
            item.descriptionList.forEach(liValue => {
                $(`<span class="content-span">${liValue}</span><span class="symbol-span">銆?/span>`).appendTo($(`.icon-content > #link-${index}`))
            })
        })
        $('.cross-icon-box:gt(0)').css('margin-top', '16px')
    } else if (boxType === 'honour') {
        list.forEach(item => {
            let iconDom = $(`<div class="honour-icon-box animated">
                <div class="icon-box animated">
                     <img src="/uploads/${item.imgUrl}" alt="${item.title}">
                </div>
                <div class="icon-circle animated"><span>${item.number}</span></div>
                <div class="icon-number animated">${item.number}</div>
                <div class="icon-title animated">${item.title}</div>
                <div class="icon-underline animated"></div>
                <div class="icon-content-line"></div>
                <div class="icon-description">${item.description}</div>
            </div>`)
            iconDom.appendTo(boxDom)
        })
    }else if(boxType === 'develop'){
        list.forEach((item,index)=> {
            let iconDom = $(`  <div class="honour-icon-box animated">
            <div class="icon-box animated">
                <img src="/uploads/${item.imgUrl}" alt="${item.title}">
            </div>
            <div class="icon-circle icon-rect animated"><span>${item.number}</span></div>
            <div class="icon-number animated">${item.number}</div>
            <div class="icon-title animated">${item.title}</div>
            <div class="icon-underline animated"></div>
            <div class="icon-content-line"></div>
            <div class="icon-description const${index}">
                <p>${item.description}</p>
                <p><img src="/uploads/introduct/Arrow1.svg"></p>
            </div>
        </div>`)
            iconDom.appendTo(boxDom)

            item.explain.forEach(i=> {
                console.log(i)
                let pDom=$(`
                <p>${i}</p>
                `)
                pDom.appendTo(`.const${index}`)
            }) 
        })
    
    }else if(boxType === 'advantage'){
        list.forEach(item => {
            $(`<div class="tab product_tip clicked">
            <div class="product_tip_img">
                <img src="/uploads/${item.imgUrl}" alt="${item.title}">
            </div>
            <div class="product_tip_tit">${item.title}</div>
        </div>`).appendTo(boxDom)
        })
        $('.vertical-icon-box:gt(3)').css('margin-top', '40px')
    }
}

//浜у搧娓呭崟娓叉煋circle
function renderCircle() {
    var circleList = [
        {itemWidth: '104', topValue: '136', leftValue: '3', h2Content: 'HDGP', pContent: '鏁版嵁娌荤悊骞冲彴'},
        {itemWidth: '98', topValue: '262', leftValue: '0', h2Content: 'HSSP', pContent: '璐㈠姟鍏变韩骞冲彴'},
        {itemWidth: '134', topValue: '46', leftValue: '111', h2Content: 'HLS', pContent: '铻嶈祫绉熻祦绠＄悊'},
        {itemWidth: '110', topValue: '193', leftValue: '132', h2Content: 'HALM', pContent: '璧勪骇绠＄悊绯荤粺'},
        {itemWidth: '194', topValue: '325', leftValue: '76', h2Content: 'ZenWay', pContent: '闂绠＄悊/鎸佺画鏀瑰杽绠＄悊骞冲彴'},
        {itemWidth: '96', topValue: '116', leftValue: '258', h2Content: 'HTMS', pContent: '杩愯緭绠＄悊绯荤粺'},
        {itemWidth: '124', topValue: '244', leftValue: '252', h2Content: 'O2', pContent: '鍏ㄦ笭閬撶數鍟嗙郴缁?},
        {itemWidth: '110', topValue: '382', leftValue: '307', h2Content: 'HEC', pContent: '璐规帶绠＄悊绯荤粺'},
        {itemWidth: '80', topValue: '40', leftValue: '361', h2Content: 'HDSP', pContent: '鏁版嵁涓彴'},
        {itemWidth: '188', topValue: '123', leftValue: '364', h2Content: 'OneContract', pContent: '鍚堝悓绠＄悊绯荤粺'},
        {itemWidth: '142', topValue: '318', leftValue: '440', h2Content: 'HSRM', pContent: '渚涘簲鍏崇郴绠＄悊绯荤粺'},
        {itemWidth: '126', topValue: '71', leftValue: '547', h2Content: 'HMDM', pContent: '涓绘暟鎹鐞嗙郴缁?},
        {itemWidth: '106', topValue: '223', leftValue: '563', h2Content: 'HPMS', pContent: '椤圭洰绠＄悊绯荤粺'},
        {itemWidth: '110', topValue: '365', leftValue: '601', h2Content: 'Tarzan', pContent: '鐮斿彂绠＄悊骞冲彴'},
        {itemWidth: '110', topValue: '118', leftValue: '690', h2Content: 'HATC', pContent: '鑷姩鍖栨祴璇曞钩鍙?},
        {itemWidth: '142', topValue: '242', leftValue: '695', h2Content: 'Hi-loT', pContent: '鏅鸿兘鐗╄仈缃戝钩鍙?},
        {itemWidth: '110', topValue: '398', leftValue: '749', h2Content: 'HWMS', pContent: '浠撳偍绠＄悊绯荤粺'},
        {itemWidth: '78', topValue: '65', leftValue: '801', h2Content: 'HNLP', pContent: 'NLP骞冲彴'},
        {itemWidth: '98', topValue: '164', leftValue: '817', h2Content: 'HSCS', pContent: '缁撶畻绠＄悊绯荤粺'},
        {itemWidth: '98', topValue: '312', leftValue: '852', h2Content: 'SPC', pContent: '杩滅▼鎺у埗宸ュ叿'},
    ]
    var circleNodes = [];

    var renderNodes = function renderNodes(index) {
        var _nodes = JSON.parse(JSON.stringify(circleList));

        if (index > -1) {
            _nodes[index].bgColor = ['#4DB7DD', '#3BD5B3', '#4A8BFE', '#FFDB72', '#FF808A'][Math.floor(Math.random() * 5)];

            var list = _nodes.map(function (v) {
                v.xd = _nodes[index].leftValue - v.leftValue;
                v.yd = _nodes[index].topValue - v.topValue;
                v.distance = Math.floor(Math.sqrt(v.xd * v.xd + v.yd * v.yd));

                if (v.distance > 0) {
                    v.leftValue = parseInt(v.leftValue) - v.xd * v.itemWidth * 0.1 / v.distance * _nodes[index].itemWidth * 0.01;
                    v.topValue = parseInt(v.topValue) - v.yd * v.itemWidth * 0.1 / v.distance * _nodes[index].itemWidth * 0.01;
                } else {
                    v.leftValue = v.leftValue - v.itemWidth * 0.1;
                    v.topValue = v.topValue - v.itemWidth * 0.1;
                    v.itemWidth = v.itemWidth * 1.2;
                }

                return v;
            });
        }

        circleNodes.forEach(function (node, i) {
            node.css({
                'background': _nodes[i].bgColor || '#FFFFFF',
                'width': _nodes[i].itemWidth + 'px',
                'left': _nodes[i].leftValue + 'px',
                'height': _nodes[i].itemWidth + 'px',
                'top': _nodes[i].topValue + 'px',
                'z-index': _nodes[i].zIndex || 98
            });
        });
    };

    circleList.forEach(function (item, index) {
        var itemCircle = $("<div class=\"render-circle\" id=\"circle-" + index + "\"><h2>" + item.h2Content + "</h2><p>" + item.pContent + "</p></div>");
        itemCircle.mouseenter(function () {
            renderNodes(index);
        });
        itemCircle.mouseleave(function () {
            renderNodes(-1);
        });
        circleNodes.push(itemCircle);
        itemCircle.appendTo($('.product-content'));
    });
    renderNodes(-1);
}

//鍒濆鍖朣wiper
function reSwiper() {
    var mySwiper = new Swiper('.function-swiper > .swiper-container', {
        autoplay: true,//鍙€夐€夐」锛岃嚜鍔ㄦ粦鍔
        effect: 'coverflow',
        coverflowEffect: {
            rotate: 0,
            stretch: 745,
            depth: 300,
            slideShadows: false
        },
        centeredSlides: true,
        slidesPerView: 'auto',
        loop: true,
        navigation: {
            disabledClass: 'my-button-disabled',
            hideOnClick: true,
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        }
    })
    $('.swiper-slide').mouseenter(function () {
        mySwiper.autoplay.stop();
    })
    $('.swiper-slide').mouseleave(function () {
        mySwiper.autoplay.start();
    })
    $('.swiper-button').mouseenter(function () {
        $(this).addClass('swiper-button-white')
    }).mouseleave(function () {
        $(this).removeClass('swiper-button-white')
    })
}
//闄勫甫杩涘害鏉＄殑杞挱
function renderScheduleSwiper(dom) {
    var newSwiper = new Swiper(dom, {
        direction: 'horizontal',
        loop: true, // 寰幆妯″紡閫夐」
        autoplay: {
            disableOnInteraction: false,
            delay: 5000,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            bulletElement: 'li',
        }
    });
}
//闄勫甫杩涘害鏉＄殑杞挱锛堝彲榧犳爣瑕嗙洊鍒囨崲锛
function renderScheduleSwipermouse(dom) {
    var mouseSwiper = new Swiper(dom, {
        direction: 'horizontal',
        loop: true, // 寰幆妯″紡閫夐」
        autoplay: {
            disableOnInteraction: false,
            delay: 5000,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            bulletElement: 'li',
        }
    });
    for(i=0;i<mouseSwiper.pagination.bullets.length;i++){
        mouseSwiper.pagination.bullets[i].onmouseover=function(){
            this.click();
        };
    }
}
//Tabs鐩稿叧
function initTabs() {
    var nowTab = $('.tab.clicked');
    nowTab.each(function () {
        var index = $(this).index()
        if (index > -1) {
            $(this).closest('.hand_tabs').children('.hand_tabs_content').addClass('selected').children('.tabpanel').eq(index).fadeIn();
        }
    })

    $('.hand_tabs_header .tab').click(function () {
        var self = $(this)
        var index = self.index()
        var isGroup = self.closest('.hand_tabs_group').length > 0
        var isShowContent = self.parent().siblings('.hand_tabs_content').hasClass('selected');
        var panrentNode = isGroup ? self.closest('.hand_tabs_group') : self.closest('.hand_tabs')
        var isSelf = self.hasClass('clicked')
        var isCanHiddenSelf = 'canHidden' in panrentNode.data()

        if (isGroup && !isShowContent) {
            self.closest('.hand_tabs_group').find('.hand_tabs_content').removeClass('selected');
            self.parent().siblings('.hand_tabs_content').addClass('selected');
        }

        panrentNode.find('.tab').removeClass('clicked')
        panrentNode.find('.tabpanel').hide();

        if(!isCanHiddenSelf || !isSelf){
            self.addClass('clicked')
            self.closest('.hand_tabs').find('.tabpanel').eq(index).fadeIn();
        }
    })
}

/* 浜у搧鐗规€?&骞冲彴鎶€鏈爤 Tabs*/
function ProductTab(tab, list) {
    tab.forEach((item, index) => {
        const lis = $(`<li>${tab[index]}</li>
        `)
        $('.technology-type').append(lis)
    })

    list.forEach((item, index) => {
        const dom = $(`<div class="hzero-technology-content hzero_control">
         </div>
    `)
        $('.technology-s').append(dom)
        $(`.hzero_control:eq(0)`).css('display', 'flex')
        $(`.hzero_control:eq(1)`).css('display', 'none')
        $(`.hzero_control:eq(2)`).css('display', 'none')
        $(`.hzero_control:eq(3)`).css('display', 'none')
        $(`.hzero_control:eq(4)`).css('display', 'none')
        $('.technology-type li:eq(0)').addClass('type-light')
        $('.technology-type li').mouseenter(function () {
            let index = $(this).index();
            $(this).siblings().removeClass('type-light');
            $(this).addClass('type-light');
            $(`.hzero_control:eq(${index})`).css('display', 'flex');
            $(`.hzero_control:gt(${index})`).css('display', 'none');
            $(`.hzero_control:lt(${index})`).css('display', 'none')
        });
    })
}

//鑳屾櫙鍥剧墖婊氬姩鐩稿叧
function backGroundScroll() {
    var winHeight = $(window).height() + $(document).scrollTop();
    $('.scroll-background').each(function () {
        var scrollHeight = $(this).offset().top - $(document).scrollTop();
        if ($(this).offset().top - winHeight < -100 && scrollHeight > 0) {
            anime({
                targets: '.scroll-background .bg-img1,.scroll-background .bg-img3',
                translateY: scrollHeight / 6,
                loop: false,
                duration: 300,
                easing: 'linear'
            });
            anime({
                targets: '.scroll-background .bg-img4',
                translateY: scrollHeight / 6,
                loop: false,
                duration: 300,
                easing: 'linear'
            });
        }
    })
}

//鏁板瓧婊氬姩鐗规晥
function numberScroll(dom, range) {
    anime({
        targets: dom,
        innerHTML: range,
        easing: 'linear',
        duration: 1000,
        round: 1
    });
}