// 主要逻辑
$(function () {
    $('.navs>ul>li').on('click', function () {
        if (!$(this).hasClass('active')) {
            $('.navs>ul>li').removeClass('active')
            $(this).addClass('active')
        }
    })

    // 1.包含菜单的li被触发
    // init
    $('.navs .menu .scroll').width($('.navs .menu .scroll .plate').length * $('.navs .menu').width())
    // 获取屏幕可视宽度
    let clientWidth = document.body.clientWidth
    // 下拉菜单设置宽度
    $('.plate').width(clientWidth + 'px')

    // 延时定时器
    let t_delay = null
    let delay_interval = 300
    $('.navs>.main-content>ul>li.hasmenu').on('mouseenter', function () {
        if (t_delay) {
            clearTimeout(t_delay)
        }

        let index = $('.navs>.main-content>ul>li.hasmenu').index($(this))
        let long = $('.navs .menu').width()
        // 切换版块
        $('.navs .menu .scroll').animate({
            left: -index * long + 'px'
        }, 300)
        if (!$('.navs .menu-container').hasClass('open')) {
            $('.navs .menu-container').addClass('open')
        }
        if (!$('.navs .menu-bg').hasClass('open')) {
            $('.navs .menu-bg').addClass('open')
        }

        // 其他模块颜色还原
        clearHoverColorForNav()
        clearHoverColorForSwitchLanguage()
        // 当前模块颜色变红
        addHoverColorForNav(this)
    }).on('mouseleave', function () {
        $('.navs .menu-bg').removeClass('open')

        t_delay = setTimeout(function () {
            $('.navs .menu-container').removeClass('open')
        }, delay_interval)
    })

    $('.navs .menu-container').on('mouseenter', function () {
        if (t_delay) {
            clearTimeout(t_delay)
        }
        if (!$(this).hasClass('open')) {
            $(this).addClass('open')
        }
        if (!$('.navs .menu-bg').hasClass('open')) {
            $('.navs .menu-bg').addClass('open')
        }

    }).on('mouseleave', function () {
        let obj = $(this)
        t_delay = setTimeout(function () {
            obj.removeClass('open')
        }, delay_interval)
        $('.navs .menu-bg').removeClass('open')

        // 移除所有的变色
        clearHoverColorForNav()
    })

    // 2.幻灯片
    // 有loop:true时，11 22 44 33，首先执行的是onSlideChangeEnd
    // 没有loop:true时，22 44 33，onSlideChangeEnd不会被首先执行
    let flag = false
    let swiperFlag = false
    let mySwiper = new Swiper('.banner_index', {
        autoplay: 8000, // 可选选项，自动滑动
        autoHeight: true,
        loop: true,
        pagination: '.banner_index .swiper-pagination',
        prevButton: '.banner_index .swiper-button-prev',
        nextButton: '.banner_index .swiper-button-next',
        paginationClickable: true,
        onSlideChangeEnd: function (swiper) {
            let _this = $('.banner_index .swiper-slide').eq(swiper.activeIndex)
            if (!swiperFlag) {
                swiperFlag = true
            } else {
                videoSelect(_this)
            }
        }
    })
    videoSelect($('.banner_index .swiper-slide.swiper-slide-active'))

    /**
     * 播放视频
     *
     * @param _this
     */
    function videoSelect(_this) {
        let flag = true
        let cc = _this.hasClass('ban_video')
        if (cc) {
            mySwiper.stopAutoplay()
            let videos =
                '<video src="' + _this.data('video') + '" autoplay="autoplay" muted class="vv" style="display:none;"></video>'
            _this.append(videos)

            let aaa = setInterval(function () {
                if (!isNaN($('.vv').get(0).duration) && flag) {
                    clearInterval(aaa)
                    flag = false
                    setTimeout(function () {
                        _this.find('video').css('display', 'block')
                    }, 500)
                }
            }, 10)

            _this.find('video').bind('ended', function () {
                mySwiper.slideNext()
                mySwiper.startAutoplay()
            })
        } else {
            $('.vv').remove()
        }
    }

    // 3.父元素塌陷
    // 手机端
    if (clientWidth < 1100) {
        $('.key-products').find('.flex-item-wrap').each(function () {
            // 取出父级节点
            $(this).parent().css('height', $(this).outerHeight(true) + 60 + 'px')
        })
    }

    /**
     * 菜单显示和隐藏
     */
    $('.language-left').mouseover(function () {
        clearHoverColorForNav()
        addHoverColorForNav(this)
        $(this).children('ul').show()
    })
    $('.language-left').mouseout(function () {
        clearHoverColorForNav()
        clearHoverColorForSwitchLanguage()
        $(this).children('ul').hide()
    })

    // 数字滚动
    if ($('.num-box').length > 0 && $('.world-box').length > 0) {
        let options = {
            useEasing: true,
            useGrouping: false,
            separator: ',',
            decimal: '.'
        }
        let num1 = new CountUp('num1', 1000, 2010, 0, 1.5, options)
        let num2 = new CountUp('num2', 500, 2000, 0, 1.5, options)
        let num3 = new CountUp('num3', 100, 1000, 0, 1.5, options)
        let num4 = new CountUp('num4', 10, 300, 0, 1.5, options)
        let num5 = new CountUp('num5', 500, 300, 0, 1.5, options)
        let num6 = new CountUp('num6', 100, 1000, 0, 1.5, options)
        let num7 = new CountUp('num7', 10, 2000, 0, 2, options)

        $(window).on('scroll', function () {
            if ($(window).scrollTop() > $('.num-box').offset().top - 600) {
                num1.start()
                num2.start()
                num3.start()
                num4.start()
            }
            if ($(window).scrollTop() > $('.world-box').offset().top - 600) {
                num5.start()
                num6.start()
                num7.start()
            }
        })
    }

    // 产品内页, 空白位置补全
    if ($('.inner-content-product-list').length > 0) {
        let imgLen = $('.inner-content-product-list').children('.product-flex-item').length
        let toBeSupplemented = 4 - imgLen % 4
        // 设置空节点
        let blankNode = '<div class="product-flex-item hidden-xs-for-flex">空白</div>'
        for (let i = 0; i < toBeSupplemented; i++) {
            $('.inner-content-product-list').append(blankNode)
        }
    }
})

/**
 * 点击搜索
 */
function handleClickSearch() {
    // 逻辑
    $('.fusion-mobile-menu-search').slideToggle()
}

/**
 * 点击展开菜单
 */
function handleClickViewMenu() {
    // 逻辑
    $('.fusion-mobile-nav-holder').slideToggle()
}

/**
 * 点击展开子菜单
 *
 * @param node -当前节点
 */
function handleClickViewSubMenu(node) {
    // 逻辑
    $(node).next('ul').slideToggle()
}

/**
 * 显示导航和搜索模块
 */
function showNavAndSearch() {
    // 隐藏 nav-ul, language
    $('.menu-search').hide()
    $('.nav-ul').show()
    $('.language').show()
}

/**
 * 隐藏导航和搜索模块
 */
function hiddenNavAndSearch() {
    // 隐藏 nav-ul, language
    $('.nav-ul').hide()
    $('.language').hide()
    $('.menu-search').show()
}

/**
 * 所有导航的颜色还原
 */
function clearHoverColorForNav() {
    $('.nav-ul').children('.hasmenu').each(function () {
        $(this).find('i').css('color', '#FFFFFF')
    })
}

/**
 * 当前导航高亮
 *
 * @param node - 默认this
 */
function addHoverColorForNav(node) {
    $(node).find('i').css('color', 'red')
}

/**
 * 切换字体的颜色还原
 */
function clearHoverColorForSwitchLanguage() {
    $('.switch-language').find('i').css('color', '#FFFFFF')
}

/**
 * 跳转
 *
 * @param lang -语言
 * @param url -跳转地址
 */
function goUrl(lang, url) {
    // 逻辑
    window.location.href = '/' + lang + '/' + url
}

/**
 * 头部搜索
 */
function searchFormForHeader(node) {
    console.log('您点击了头部区域的搜索')
    return false
}

/**
 * 整体搜索
 */
function searchForm(node) {
    console.log('您点击了内容区域的搜索')
}

/**
 * 鼠标放上去之后的效果
 *
 * @param node
 */
function handleMouseOver(node) {
    // 切换图片
    // 取出 img 节点
    let imgNode = $(node).find('img').eq(0)
    // 取出 hover-src
    let hoverSrc = imgNode.attr('data-hover-src')
    // 赋值
    imgNode.attr('src', hoverSrc)
}

/**
 * 鼠标移开之后的效果
 *
 * @param node
 */
function handleMouseOut(node) {
    // 取出 img 节点
    let imgNode = $(node).find('img').eq(0)
    // 取出 origin-src
    let originSrc = imgNode.attr('data-origin-src')
    // 赋值
    imgNode.attr('src', originSrc)
}