$(function () {
  (function () {
    var scrollt = document.documentelement.scrolltop + document.body.scrolltop; //获取滚动后的高度
    if( scrollt >200 ){  //判断滚动后高度超过200px,就显示
      $("#back-top").fadein(400); //淡入
    }else{
      $("#back-top").stop().fadeout(0); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动

    }

    let mainview = '';
    data.map((item, index) => {
      if (index % 2 !== 0) {
        if (item.times) {
          mainview += `
              <div class="his-div his-item-right">
                <div class="seat"></div>
                <div class="time-axis"></div>
                <div class="data-item">
                  <div class="data-line data-line-left-gold">
                    <div class="line-content line-content-gold"></div>
                  </div>
                  <div class="content-div content-gold">
                    <span class="data-title data-title-gold">${item.year}</span>
                    <span class="data-date">(${item.day})</span>
                    <div class="data-content">
                      <span>${item.content}<div class="times-text">正式进入${item.times}时代</div></span>
                    </div>
                  </div>
                  <div class="polygon-div polygon-div-right">
                    <img src="./img/gold_medal.png" class="gold-medal">
                    <div class="gold-text">${item.times}</div>
                  </div>
                </div>
              </div>
        `
        } else {
          mainview += `
              <div class="his-div his-item-right">
                <div class="seat"></div>
                <div class="time-axis"></div>
                <div class="data-item">
                  <div class="data-line data-line-left-common">
                    <div class="line-content line-content-common"></div>
                  </div>
                  <div class="content-div content-common">
                    <span class="data-title date-title-common">${item.year}</span>
                    <span class="data-date">(${item.day})</span>
                    <div class="data-content">
                      <span>${item.content}</span>
                    </div>
                  </div>
                  <div class="polygon-div polygon-div-right">
                    <img src="./img/polygon.png" class="polygon">
                  </div>
                </div>
              </div>
        `
        }
      } else {
        if (item.times) {
          mainview += `
            <div class="his-div his-item-left">
              <div class="data-item">
                <div class="content-div content-gold">
                  <span class="data-title data-title-gold">${item.year}</span>
                  <span class="data-date">(${item.day})</span>
                  <div class="data-content">
                    <span>${item.content}<div class="times-text">正式进入${item.times}时代</div></span>
                  </div>
                </div>
                <div class="data-line data-line-right-gold">
                  <div class="line-content line-content-gold"></div>
                </div>
                 <div class="polygon-div polygon-div-left">
                  <img src="./img/gold_medal.png" class="gold-medal">
                  <div class="gold-text">${item.times}</div>
                </div>
              </div>
              <div class="time-axis"></div>
              <div class="seat"></div>
            </div>
          `
        } else {
          mainview += `
              <div class="his-div his-item-left">
                <div class="data-item">
                  <div class="content-div content-common">
                    <span class="data-title date-title-common">${item.year}</span>
                    <span class="data-date">(${item.day})</span>
                    <div class="data-content">
                      <span>${item.content}</span>
                    </div>
                  </div>
                  <div class="data-line data-line-right-common">
                    <div class="line-content line-content-common"></div>
                  </div>
                  <div class="polygon-div polygon-div-left">
                    <img src="./img/polygon.png" class="polygon">
                  </div>
                </div>
                <div class="time-axis"></div>
                <div class="seat"></div>
              </div>
        `
        }
      }
    })

    if (mainview) {
      mainview = `<div id="triangle-up"></div>${mainview}`;
    }

    $('#history').html(mainview);


  })();


  $("#back-top").click(function(){
    $('html,body').animate({scrolltop:"0px"},500);
  });

  $(window).scroll(function(){  //只要窗口滚动,就触发下面代码

    var scrollt = document.documentelement.scrolltop + document.body.scrolltop; //获取滚动后的高度
    if( scrollt >200 ){  //判断滚动后高度超过200px,就显示
      $("#back-top").fadein(400); //淡入
    }else{
      $("#back-top").stop().fadeout(400); //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动

    }
  });

  // 减去底部的一个高度
  // const offsetheight = $(window).height() - 140;  // 底部偏移量
  const offsetheight = $(window).height() + 30;

  function init() {
    let delaytime = 1.6;
    $('.his-div').each(function () {
      let thistop = $(this).offset().top;
      let thisheight = $(this).height();
      if (thistop + thisheight <= ($(window).scrolltop() + offsetheight)) {
        // 可视区域内以及可视区域上面，不包括可视区域最后一个元素
        if ($(this).index() % 2 !== 0) {
          $(this).find('.data-item').removeclass('item-hidden left-move-disappear').addclass('left-move');
        }else{
          $(this).find('.data-item').removeclass('item-hidden right-move-disappear').addclass('right-move');
        }

        $(this).find('span').each(function () {
          switch ($(this).index()) {
            case 0:
              delaytime = 4;
              break;
            case 1:
              delaytime = 4;
              break;
            case 2:
              delaytime = 8;
              break;
          }
          $(this).removeclass('disappear-move');
          $(this).addclass('appear-move');
          $(this).css({
            'animation-duration': delaytime + 's'
          })
        })

        $(this).find('.times-text').removeclass('disappear-move').addclass('appear-move').css({
          'animation-duration': '4s'
        })


      } else if (thistop + thisheight > ($(window).scrolltop() + offsetheight) && thistop < ($(window).scrolltop() + offsetheight)) {
        // 可是区域最后一个元素
        $(this).find('.data-item').addclass('item-hidden')
        $(this).find('span').each(function () {
          $(this).addclass('item-hidden');
        })
      } else {
        // 其他元素
        if ($(this).index() % 2 !== 0) {
          $(this).find('.data-item').removeclass('left-move').addclass('item-hidden left-move-disappear');
        }else{
          $(this).find('.data-item').removeclass('right-move').addclass('item-hidden right-move-disappear');
        }
        $(this).find('span').each(function () {
          switch ($(this).index()) {
            case 0:
              delaytime = 8;
              break;
            case 1:
              delaytime = 6;
              break;
            case 2:
              delaytime = 4;
              break;
          }
          $(this).removeclass('appear-move').addclass('disappear-move item-hidden');
          $(this).css({
            'animation-duration': delaytime + 's'
          })
        })

        $(this).find('.times-text').removeclass('appear-move').addclass('disappear-move item-hidden').css({
          'animation-duration': '4s'
        })
      }
    })
  }
  init();

  let scrolldirection = 'down';
  let scrollyoffset = 'none';

  function judgescrolldirection() {
    if (scrollyoffset === 'none') {
      scrollyoffset = window.pageyoffset;
    }
    scrolldirection = scrollyoffset - window.pageyoffset > 0 ? 'up' : 'down';
    scrollyoffset = window.pageyoffset;
  }

  $(window).scroll(function () {
    judgescrolldirection();
    let delaytime = 1.6;
    if (scrolldirection === 'down') {
      $('.his-div').each(function () {
        let thistop = $(this).offset().top;
        let thisheight = $(this).height();
        if (thistop >= $(window).scrolltop() && thistop + thisheight <= ($(window).scrolltop() + offsetheight)) {
          if ($(this).index() % 2 !== 0) {
            $(this).find('.data-item').removeclass('item-hidden left-move-disappear').addclass('left-move');
          }else{
            $(this).find('.data-item').removeclass('item-hidden right-move-disappear').addclass('right-move');
          }
          $(this).find('span').each(function () {
            switch ($(this).index()) {
              case 0:
                delaytime = 3;
                break;
              case 1:
                delaytime = 3;
                break;
              case 2:
                delaytime = 7;
                break;
            }
            $(this).removeclass('disappear-move item-hidden').addclass('appear-move');
            $(this).css({
              'animation-duration': delaytime + 's'
            })
          })
          $(this).find('.times-text').removeclass('disappear-move item-hidden').addclass('appear-move').css({
            'animation-duration': '4s'
          })
        }
      })
    } else {
      $('.his-div').each(function () {
        let thistop = $(this).offset().top;
        let thisheight = $(this).height();
        if (thistop + thisheight > ($(window).scrolltop() + offsetheight)) {
          if ($(this).index() % 2 !== 0) {
            $(this).find('.data-item').removeclass('left-move').addclass('item-hidden left-move-disappear');
          }else{
            $(this).find('.data-item').removeclass('right-move').addclass('item-hidden right-move-disappear');
          }
          $(this).find('span').each(function () {
            switch ($(this).index()) {
              case 0:
                delaytime = 1.9;
                break;
              case 1:
                delaytime = 1.5;
                break;
              case 2:
                delaytime = 1.1;
                break;
            }
            $(this).removeclass('appear-move').addclass('disappear-move item-hidden');
            $(this).css({
              'animation-duration': delaytime + 's'
            })
          })
          $(this).find('.times-text').removeclass('appear-move').addclass('disappear-move item-hidden').css({
            'animation-duration': '4s'
          })
        }

      })
    }
  })
})