"use strict";

/// <reference path="../layout/jquery-1.11.3.js" />
(function () {
  "use strict";

  var Page = {
    // 鍔ㄦ€佸脊鍑
    pageFade: function pageFade() {
      $(window).scroll(function () {
        var top = $(this).scrollTop();
        //console.log(top);
        if (top >= 0 && top < 300) {
          $(".pageCell_StarProduct").css("opacity", 1).addClass("active");
        }
        if (top >= 700 && top < 1200) {
          $(".pageCell_VideoShow.bg-t").addClass("animated bounceInLeft");
          $(".pageCell_VideoShow.videoBg").addClass("animated bounceInLeft");
          $(".pageCell_VideoShow.thumbsBg").addClass("animated bounceInUp");
          $(".pageCell_VideoShow").css("opacity", 1).addClass("active");
        }
        if (top >= 1200 && top < 1800) {
          $(".pageCell_CoreTechnology .cellTitle").addClass("animated bounceInLeft");
          $(".pageCell_CoreTechnology").css("opacity", 1).addClass("active");
        }
        if (top >= 1800 && top < 2400) {
          $(".pageCell_ClassicCase").css("opacity", 1).addClass("animated fadeInUp");
        }
        if (top >= 2400 && top < 3000) {
          $(" .pageCell_UsereEvaluation .cellTitle").addClass("animated bounceInLeft");
          $(".pageCell_UsereEvaluation").css("opacity", 1);
          $(".pageCell_UsereEvaluation .evaluateArea ul li").addClass("animated bounceIn");
        }
        if (top >= 3000 && top < 3600) {
          $(".pageCell_AboutBoLang").css("opacity", 1).addClass("animated bounceInLeft");
        }
        if (top >= 3600) {
          $(".pageCell_NewsCenter").css("opacity", 1).addClass("animated bounceInRight");
        }
      });
    }
  };
  Page.pageFade();
})();
//棣栭〉杞挱
ajax({
  url: "/customer/index/rotationChart",
  complete: function complete(xhr) {
    // console.log(xhr);
    var _list = xhr.responseJSON.data.list;
    var _listStr1 = '<dl class="imgs">';
    var _listStr2 = '</dl><dl class="dots">';

    console.log("骞垮憡杞挱:", _list);
    for (var i in _list) {
      if (_list[i].linkUrl.trim().length > 0) {
        _listStr1 += "\n                <dd class=\"none\">\n                    <div class=\"imgPanel\">\n                        <a href=\"" + _list[i].linkUrl + "\";style=\"cursor:point;\" target=\"_blank\">\n                            <img src=\"" + (_list[i].imgPath || "") + "\" alt=\"" + (_list[i].alt || "") + "\" />\n                        </a>\n                    </div>\n                </dd>";
      } else {
        _listStr1 += "\n                <dd class=\"none\">\n                    <div class=\"imgPanel\">\n                            <img src=\"" + (_list[i].imgPath || "") + "\" alt=\"" + (_list[i].alt || "") + "\" />\n                    </div>\n                </dd>";
      }

      _listStr2 += "<dd></dd>";
    }
    $(".mainBanner").html(_listStr1 + _listStr2 + "</dl>");
    $(".mainBanner .dots dd").eq(0).addClass("active");
    banner();
    //鏄庢槦浜у搧
    $(".ProductsContainer").html("\n                 <div class=\"pro_left\">\n                    <a href=\"/Home/ProductDetail.html?ID=1010\">\n                        <img src=\"https://nbwave.oss-cn-hangzhou.aliyuncs.com/kongqinengreshuiqi.jpg?x-oss-process=image/resize,m_mfit,h_400,w_400\" alt=\"\u5BB6\u7528\u70ED\u6C34\">\n                        <div class=\"cover\">\n                            <div class=\"proName\">\n                                <div class=\"text\">\u5BB6\u7528\u70ED\u6C34</div>\n                            </div>\n                        </div>\n                    </a>\n                </div>\n                <div class=\"pro_right\">\n                    <ul class=\"col3\">\n                        <li>\n                            <a href=\"/Home/ProductDetail.html?ID=1060\">\n                                <img class=\"proImg\" src=\"https://nbwave.oss-cn-hangzhou.aliyuncs.com/caodiwen.jpg?x-oss-process=image/resize,m_mfit,h_400,w_400\" alt=\"\u7A7A\u6C14\u80FD\u8D85\u4F4E\u6E29\u91C7\u6696\u673A\">\n                                <div class=\"cover\">\n                                    <div class=\"proName\">\n                                        <div class=\"text\">\u7A7A\u6C14\u80FD\u8D85\u4F4E\u6E29\u91C7\u6696\u673A</div>\n                                    </div>\n                                </div>\n                            </a>\n                        </li>\n                        <li>\n                            <a href=\"/Home/ProductDetail.html?ID=1050\">\n                                <img class=\"proImg\" src=\"https://nbwave.oss-cn-hangzhou.aliyuncs.com/kongqiyiti.jpg?x-oss-process=image/resize,m_mfit,h_400,w_400\" alt=\"\u7A7A\u6C14\u80FD\u4E00\u4F53\u673A\">\n                                <div class=\"cover\">\n                                    <div class=\"proName\">\n                                        <div class=\"text\">\u7A7A\u6C14\u80FD\u4E00\u4F53\u673A</div>\n                                    </div>\n                                </div>\n                            </a>\n                        </li>\n                        <li>\n                            <a href=\"/Home/ProductDetail.html?ID=1040\">\n                                <img class=\"proImg\" src=\"https://nbwave.oss-cn-hangzhou.aliyuncs.com/dinuanlenqi.jpg?x-oss-process=image/resize,m_mfit,h_400,w_400\" alt=\"\u7A7A\u6C14\u80FD\u5730\u6696\u51B7\u6C14\u673A\">\n                                <div class=\"cover\">\n                                    <div class=\"proName\">\n                                        <div class=\"text\">\u7A7A\u6C14\u80FD\u5730\u6696\u51B7\u6C14\u673A</div>\n                                    </div>\n                                </div>\n                            </a>\n                        </li>\n                    </ul>\n                    <ul class=\"col2\">\n                        <li>\n                            <a href=\"/Home/ProductDetail.html?ID=1020\">\n                                <img class=\"proImg\" src=\"https://nbwave.oss-cn-hangzhou.aliyuncs.com/mokuancenya.jpg?x-oss-process=image/resize,m_mfit,h_400,w_400\" alt=\"\u7A7A\u6C14\u80FD\u6A21\u5757\u627F\u538B\u70ED\u6C34\u673A\">\n                                <div class=\"cover\">\n                                    <div class=\"proName\">\n                                        <div class=\"text\">\u7A7A\u6C14\u80FD\u6A21\u5757\u627F\u538B\u70ED\u6C34\u673A</div>\n                                    </div>\n                                </div>\n                            </a>\n                        </li>\n                        <li>\n                            <a href=\"/Home/ProductDetail.html?ID=1030\">\n                                <img class=\"proImg\" src=\"https://nbwave.oss-cn-hangzhou.aliyuncs.com/shangyongreshui.jpg?x-oss-process=image/resize,m_mfit,h_400,w_400\" alt=\"\u5546\u7528\u70ED\u6C34\">\n                                <div class=\"cover\">\n                                    <div class=\"proName\">\n                                        <div class=\"text\">\u5546\u7528\u70ED\u6C34</div>\n                                    </div>\n                                </div>\n                            </a>\n                        </li>\n                    </ul>\n                </div>");
    setTimeout(function () {
      $(".pageCell_StarProduct").css("opacity", 1).addClass("active");
    }, 1500);
  }
});

//瑙嗛灞曠ず
var galleryTop = void 0;
ajax({
  url: "/customer/index/vedioList",
  complete: function complete(xhr) {
    var _list = xhr.responseJSON.data.list;
    var videoList = _list.map(function (item) {
      return {
        id: item.id,
        title: item.imgName,
        info: item.subject,
        coverUrl: item.imgPath,
        videoUrl: item.vedioPath,
        orderNum: item.orderNum
      };
    });
    console.log("瑙嗛灞曠ず", videoList);
    var videoShowSwiperTopStr = '<div  class="swiper-wrapper">';
    var videoShowSwiperThumbsStr = '<div  class="swiper-wrapper">';
    for (var i in videoList) {
      videoShowSwiperTopStr += "<div class=\"swiper-slide\" >\n                                    <div class=\"msgBox\">\n                                        <div class=\"title\">" + videoList[i].title + "</div>\n                                        <p class=\"info\">" + videoList[i].info + "</p>\n                                    </div>\n                                    <div class=\"videoBox\">\n                                        <video  src='" + videoList[i].videoUrl + "'   controls=\"controls\" controlslist=\"nodownload  noremoteplayback\" ></video>\n                                        <img src=\"../Content/images/videoPlay.png\" style=\"border-radius: 50%; background-color: rgba(0, 0, 0, 0.42);\">\n                                        <img class=\"videoPhoto\" src=\"" + videoList[i].coverUrl + "\">\n                                    </div>\n                                </div>";
      videoShowSwiperThumbsStr += "<div class=\"swiper-slide\" style=\"background-image:url(" + videoList[i].coverUrl + ")\">\n                                            <div class=\"title\">" + videoList[i].title + "</div>\n                                        </div>";
    }
    videoShowSwiperTopStr += "</div><div class=\"swiper-button-next swiper-button-white\"></div>\n                                <div class=\"swiper-button-prev swiper-button-white\"></div>\n                            </div>";

    videoShowSwiperThumbsStr += "</div>";
    $("#videoShowSwiperTop").html(videoShowSwiperTopStr);
    $("#videoShowSwiperThumbs").html(videoShowSwiperThumbsStr);
    $(".videoBox").bind("contextmenu", function () {
      return false;
    });
    var galleryThumbs = new Swiper(".gallery-thumbs", {
      spaceBetween: 10,
      slidesPerView: 5,
      // loop: true,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true
    });
    galleryTop = new Swiper(".gallery-top", {
      // autoplay: true,
      loop: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      },
      thumbs: {
        swiper: galleryThumbs
      },
      on: {
        slideChangeTransitionStart: function slideChangeTransitionStart() {
          //瑙嗛鍏ㄦ殏鍋
          closeAllVideo();
        }
      }
    });
  }
});

//鐐瑰嚮瑙嗛鎾斁
$(document).on("click", ".videoBox", function () {
  videoClick(this);
});
//瑙嗛鎾斁
function videoClick(that) {
  //瑙嗛鍏ㄦ殏鍋
  closeAllVideo();
  //鍒ゆ柇鏈夋棤瑙嗛
  if (that.length == 0) {
    return 0;
  }

  //褰撳墠瑙嗛寮€濮
  var video = $(that).children("video").get(0);
  var openFlag = $(that).children("img");
  openFlag.hide();
  // 瑙嗛缁撴潫鏃堕棿
  video.onended = function () {
    openFlag.show();
    // 寮€鍚嚜鍔ㄥ垏鎹
    galleryTop.autoplay.start();
  };
  // 鍘绘帀鐢讳腑鐢伙紝
  video["disablePictureInPicture"] = true;
  video.play();
  // 鍏抽棴鑷姩鍒囨崲
  galleryTop.autoplay.stop();
}

//瑙嗛鍏ㄦ殏鍋
function closeAllVideo() {
  //鍏朵粬鍏ㄦ殏鍋
  var openFlagAll = $("#videoShowSwiperTop").find("img");
  openFlagAll.show();
  var videoAll = $("#videoShowSwiperTop").find("video");
  for (var i = 0; i < videoAll.length; i++) {
    videoAll.eq(i).get(0).pause();
  }
}
// 鎶€鏈垱鏂
ajax({
  url: "/customer/index/technological",
  complete: function complete(xhr) {
    var _list = xhr.responseJSON.data.list;
    var _listStr = "";
    console.log("鎶€鏈垱鏂?", _list);
    for (var i in _list) {
      if (_list[i].linkUrl.trim().length > 0) {
        _listStr += "<li>\n                    <a href=\"" + _list[i].linkUrl + "\"  target=\"_blank\">\n                        <div class=\"Icon\">\n                            <img src=\" " + (_list[i].imgPath || "") + "\" alt=\" " + (_list[i].alt || "") + "\">\n                        </div>\n                        <div class=\"sketch\">\n                            " + (_list[i].imgName || "") + "\n                        </div>\n                        <div class=\"text\">" + (_list[i].subject || "") + "</div>\n                    </a>\n                </li>";
      } else {
        _listStr += "<li>\n                    <a href=\"javascript:;\">\n                        <div class=\"Icon\">\n                            <img src=\" " + (_list[i].imgPath || "") + "\" alt=\" " + (_list[i].alt || "") + "\">\n                        </div>\n                        <div class=\"sketch\">\n                            " + (_list[i].imgName || "") + "\n                        </div>\n                        <div class=\"text\">" + (_list[i].subject || "") + "</div>\n                    </a>\n                </li>";
      }
    }
    $(".TechnologyContainer ul").html(_listStr);
  }
});
//缁忓吀妗堜緥
ajax({
  url: "/customer/index/classic",
  complete: function complete(xhr) {
    var _list = xhr.responseJSON.data.list;
    var _listStr = "";
    console.log("缁忓吀妗堜緥:", _list);
    for (var i in _list) {
      _listStr += "<li class=\"hidden\">\n      \n                            <a href=\"/Home/ClassicCaseDetail.html?ID=" + (_list[i].id || "") + "\"  target=\"_blank\">\n                                <img  src=\"" + (_list[i].photo || "") + "?x-oss-process=image/resize,m_mfit,h_280,w_280\" />\n                                <div class=\"case_cover\">\n                                    <div class=\"icon\">\n                                        <p class=\"fa fa-search\"></p>\n                                    </div>\n                                    <div class=\"caseName\">" + _list[i].name + "</div>\n                                </div>\n                            </a>\n                        </li>";
    }
    $("#slideContainer").html(_listStr);
  }
});
//鐢ㄦ埛璇勪环
ajax({
  url: "/customer/index/userEvaluation",
  complete: function complete(xhr) {
    var _list = xhr.responseJSON.data.list;
    var _listStr = "";
    console.log("鐢ㄦ埛璇勪环:", _list);
    for (var i in _list) {
      var _photo = _list[i].photos.split(",")[0];
      var _photoStr = "";
      if (_photo) {
        _photoStr = '<img src="' + _photo + '?x-oss-process=image/resize,m_mfit,h_280,w_280"></img>';
      } else {
        _photoStr = '<img src="/Content/images/evaluatePicBg.jpg?x-oss-process=image/resize,m_mfit,h_280,w_280"></img>';
      }

      _listStr += "<li class=\"animated bounceIn\">\n                            <div class=\"proName\">" + (_list[i].productName || "") + "</div>\n                            <div class=\"evaluateContent\">\n                                <div class=\"evaluatePic\">\n                                  " + _photoStr + "\n                                </div>\n                                <div class=\"evaluateUser\">\n                                    <p>" + (_list[i].userName || "") + "</p>\n                                    <p class=\"userAddress\">" + (_list[i].userProvince || "") + "-" + (_list[i].userCity || "") + "</p>\n                                </div>\n                                <div class=\"evaluateContext\">\n                                " + (_list[i].context || "") + "\n                                </div>\n                                <a class=\"readDetail\" href=\"/Home/UserEvaluation.html?ID=" + (_list[i].productID || "") + "\">READ MORE</a>\n                            </div>\n                        </li>";
    }
    $(".evaluateArea ul").html(_listStr);
  }
});
//鏂伴椈涓績
ajax({
  url: "/customer/index/newsList",
  complete: function complete(xhr) {
    var _list = xhr.responseJSON.data;
    console.log("鏂伴椈涓績:", _list);
    var _list1 = _list["浼佷笟鏂伴椈"];
    var _list2 = _list["琛屼笟鍔ㄦ€?];
    var _str1 = "";
    var _str2 = "";
    var _other1 = "";
    var _other2 = "";
    var _content1 = "<div class=\"news_content\">\n                            <div class=\"newsDiagram\">\n                                <a href=\"/Home/NewsDetail.html?ID=" + (_list1[0].id || "") + "\" target=\"_blank\">\n                                    <img src=\"" + (_list1[0].displayImg || "") + "?x-oss-process=image/resize,m_mfit,h_400,w_400\">\n                                </a>\n                            </div>\n                            <div class=\"newsContext\">\n                                <p class=\"textTitle\">" + (_list1[0].title || "") + "</p>\n                                <p class=\"newsDate\">" + (_list1[0].showTime || "") + "</p>\n                                <div class=\"newsBrief\">\n                                " + (_list1[0].shortComment || "") + "\n                                </div>\n                                <a href=\"/Home/News.html?Type=" + _list1[0].type + "\" target=\"_blank\"><span>MORE</span></a>\n                            </div>\n                        </div>";
    var _content2 = "<div class=\"news_content\">\n                                <div class=\"newsDiagram\">\n                                    <a href=\"/Home/NewsDetail.html?ID=" + (_list2[0].id || "") + "\" target=\"_blank\">\n                                        <img src=\"" + (_list2[0].displayImg || "") + "?x-oss-process=image/resize,m_mfit,h_400,w_400\">\n                                    </a>\n                                </div>\n                                <div class=\"newsContext\">\n                                    <p class=\"textTitle\">" + (_list2[0].title || "") + "</p>\n                                    <p class=\"newsDate\">" + (_list2[0].showTime || "") + "</p>\n                                    <div class=\"newsBrief\">\n                                    " + (_list2[0].shortComment || "") + "\n                                    </div>\n                                    <a href=\"/Home/News.html?Type=" + _list2[0].type + "\" target=\"_blank\"><span>MORE</span></a>\n                                </div>\n                        </div>";

    for (var i in _list1) {
      if (i > 0) {
        _other1 += "<li>\n                <a href=\"/Home/NewsDetail.html?ID=" + (_list1[i].id || "") + "\" target=\"_blank\">\n                    <p class=\"newsTitle\">" + (_list1[i].title || "") + "</p>\n                    <p class=\"newsDate\">" + (_list1[i].showTime || "") + "</p>\n                </a>\n            </li>";
      }
    }
    for (var _i in _list2) {
      if (_i > 0) {
        _other2 += "<li>\n                <a href=\"/Home/NewsDetail.html?ID=" + (_list2[_i].id || "") + "\" target=\"_blank\">\n                    <p class=\"newsTitle\">" + (_list2[_i].title || "") + "</p>\n                    <p class=\"newsDate\">" + (_list2[_i].showTime || "") + "</p>\n                </a>\n            </li>";
      }
    }
    _str1 = "<li>\n                    <div class=\"news_title\">\u4F01\u4E1A\u65B0\u95FB</div>\n                    <!--\u663E\u793A\u65B0\u95FB\u5217\u8868-->\n                    " + _content1 + "\n                    <!--\u5176\u4ED6\u65B0\u95FB-->\n                    <ul class=\"otherNews\">\n                    " + _other1 + "\n                    </ul>\n                </li>";
    _str2 = "<li>\n                    <div class=\"news_title\">\u884C\u4E1A\u52A8\u6001</div>\n                    <!--\u663E\u793A\u884C\u4E1A\u52A8\u6001-->\n                    " + _content2 + "\n                    <!--\u5176\u4ED6\u52A8\u6001-->\n                    <ul class=\"otherNews\">\n                    " + _other2 + "\n                    </ul>\n                </li>";
    $(".cellInfo").html(_str1 + _str2);
  }
});