var SjNavigation = document.getElementById('navigation-external');
var NavigationContainer = document.getElementById('navigation-container');
var Navigation = document.getElementById('navigation-bgc');
var LogoImg1 = document.getElementById('logo-img1');
var LogoImg2 = document.getElementById('logo-img2');
var NavigationDropDown = document.getElementById('navigation-drop-down');
// 搜索
var InputSearch = document.getElementById('navigation-search');
var SearchInput = document.getElementById('search-input');
var ItemLeft = document.getElementsByClassName('item-left');
var NavigationLine = document.getElementById('navigation-line');
var sonNavigationLine = document.getElementById('SubNavigation-line');
var IconfontSearch = document.getElementById('iconfont-search');
// 搜索鼠标移入
InputSearch.onmouseenter = function () {
    SearchInput.style.width = '250px'
    IconfontSearch.style.fontSize = '25px';
    for (var i = 0; i < ItemLeft.length; i++) {
        ItemLeft[i].style.transition = 'left 0.4s';
        ItemLeft[i].style.left = '-260px';
    }
    switch (navLineID) {
        case 'item1': NavigationLine.style.left = '277px'; break;
        case 'item2': NavigationLine.style.left = '367px'; break;
        case 'item3': NavigationLine.style.left = '457px'; break;
        case 'item4': NavigationLine.style.left = '547px'; break;
        case 'item5': NavigationLine.style.left = '637px'; break;
        case 'item6': NavigationLine.style.left = '727px'; break;
        case 'item7': NavigationLine.style.left = '817px'; break;
    }
}
// 搜索鼠标移出
InputSearch.onmouseleave = function () {
    SearchInput.style.width = '0px'
    IconfontSearch.style.fontSize = '18px';
    for (var i = 0; i < ItemLeft.length; i++) {
        ItemLeft[i].style.left = '0px';
    }
    getNavigationLine()
}
// 滚动导航条背景过渡变色
window.addEventListener("scroll", this.handY, false);
function handY() {
    let scrollTop = document.documentElement.scrollTop;
    // var BackgroundHeight = document.getElementById('navigation-background');
    // var b = BackgroundHeight.offsetHeight - 87;
    // var Navigation = document.getElementById('navigation-bgc');
    // var LogoImg1 = document.getElementById('logo-img1');
    // var LogoImg2 = document.getElementById('logo-img2');
    // if (b > 500) {
    // 设置主导航背景颜色
    if (scrollTop > 0 && scrollTop <= 50) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0)";
    }
    if (scrollTop > 50 && scrollTop <= 100) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0.1)";
    }
    if (scrollTop > 100 && scrollTop <= 150) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0.2)";
    }
    if (scrollTop > 150 && scrollTop <= 200) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0.3)";
    }
    if (scrollTop > 200 && scrollTop <= 250) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0.4)";
    }
    if (scrollTop > 250 && scrollTop <= 300) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0.5)";
    }
    if (scrollTop > 300 && scrollTop <= 350) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0.6)";
    }
    if (scrollTop > 350 && scrollTop <= 400) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0.7)";
    }
    if (scrollTop > 400 && scrollTop <= 450) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0.8)";
    }
    if (scrollTop > 450 && scrollTop <= 500) {
        Navigation.style.backgroundColor = "rgba(255,255,255, 0.9)";
    }
    if (scrollTop > 500) {
        Navigation.style.backgroundColor = "rgba(255,255,255, 1)";
    }
    // 设置logo和手机导航开关
    if (scrollTop < 300) {
        LogoImg1.className = '';
        LogoImg2.className = 'no-display';
        NavigationDropDown.style.color = "#fff";
    } else {
        LogoImg1.className = 'no-display';
        LogoImg2.className = '';
        NavigationDropDown.style.color = "rgb(0,0,0)"
    }
    // 关闭手机导航
    close_nav();
}
// 导航线滑动
var Item = document.getElementsByClassName('item');
var sonItem = document.getElementsByClassName('sonItem');
var navLineA = document.getElementsByClassName('navLineA');
var navLineB = document.getElementsByClassName('navLineB');
var navLineID = navLineA[0].id
if(navLineB.length>0){
    var sonNavLineID = navLineB[0].id
}
// 初始页面设置导航线位置
function getNavigationLine(){
    switch (navLineID) {
        case 'item1': NavigationLine.style.left = '546px'; break;
        case 'item2': NavigationLine.style.left = '634px'; break;
        case 'item3': NavigationLine.style.left = '725px'; break;
        case 'item4': NavigationLine.style.left = '814px'; break;
        case 'item5': NavigationLine.style.left = '904px'; break;
        case 'item6': NavigationLine.style.left = '995px'; break;
        case 'item7': NavigationLine.style.left = '1085px'; break;
    }
}
function getSonNavigationLine(){
    switch (sonNavLineID) {
        case 'sonItem1': sonNavigationLine.style.left = '1125px'; break;
        case 'sonItem2': sonNavigationLine.style.left = '1050px'; break;
        case 'sonItem3': sonNavigationLine.style.left = '975px'; break;
    }
}
getNavigationLine()
if(navLineB.length>0 && sonNavigationLine.offsetWidth){
    getSonNavigationLine()
}
// 主导航鼠标移入
Item[0].onmouseenter = function () {
    NavigationLine.style.left = '546px';
}
Item[1].onmouseenter = function () {
    NavigationLine.style.left = '634px';
}
Item[2].onmouseenter = function () {
    NavigationLine.style.left = '725px';
}
Item[3].onmouseenter = function () {
    NavigationLine.style.left = '814px';
}
Item[4].onmouseenter = function () {
    NavigationLine.style.left = '904px';
}
Item[5].onmouseenter = function () {
    NavigationLine.style.left = '995px';
}
Item[6].onmouseenter = function () {
    NavigationLine.style.left = '1085px';
}
// 主导航鼠标移出
for (var i = 0; i < Item.length; i++) {
    Item[i].onmouseleave = function () {
        getNavigationLine()
    }
}
// 子导航鼠标移入
if(navLineB.length>0 && sonNavigationLine.offsetWidth){
    sonItem[0].onmouseenter = function () {
        sonNavigationLine.style.left = '1125px';
    }
    if(sonItem[1]){
        sonItem[1].onmouseenter = function () {
            sonNavigationLine.style.left = '1050px';
        }
    }
    if(sonItem[2]){
        sonItem[2].onmouseenter = function () {
            sonNavigationLine.style.left = '975px';
        }
    }
}
// 子导航鼠标移出
if(navLineB.length>0 && sonNavigationLine.offsetWidth){
    for (var j = 0; j < sonItem.length; j++) {
        sonItem[j].onmouseleave = function () {
            getSonNavigationLine()
        }
    }
}
// 手机端导航
var Open = document.getElementById('drop-down-open');
var Close = document.getElementById('drop-down-close');
// 打开
Open.onclick = function () {
    open_nav();
}
function open_nav(){
    Open.style.display = "none";
    Close.style.display = "block";
    SjNavigation.style.transition = "height 0.3s";
    SjNavigation.style.height = '270px';
    NavigationContainer.style.display = "block";
    Navigation.style.backgroundColor = "rgb(255,255,255)";
    LogoImg1.className = 'no-display';
    LogoImg2.className = '';
    NavigationDropDown.style.color = "rgb(0,0,0)"
}
// 关闭
Close.onclick = function () {
    close_nav();
}
function close_nav(){
    var ScrollTop = document.documentElement.scrollTop;
    Open.style.display = "block";
    Close.style.display = "none";
    SjNavigation.style.transition = "height 0.3s";
    SjNavigation.style.height = '0';
    NavigationContainer.style.display = "none";
    if (ScrollTop < 20) {
        Navigation.style.backgroundColor = "rgba(255,255,255,0)";
    }    if(ScrollTop < 100){
        LogoImg1.className = '';
        LogoImg2.className = 'no-display';
        NavigationDropDown.style.color = "#fff"
    }
}