let pageNum = "";

function checkAjax() {
  if (location.search.length == 0) {
    getVideoList();
  } else {
    getRecommendFeeds();
  }
}

/**
 * 获取和 photoId 相似的推荐数据
 */
function getRecommendFeeds() {
  Http("/RecommendFeeds", {
    photoId: location.search.split("=")[1]
  }, res => {
    let { list } = res;
    console.log(list);
    list.forEach(function (val, index) {
      RenderList(val);
    })
  })
}

/**
 * 发送ajax请求被收藏的数据
 */
function getVideoList() {
  Http("/list", { page: pageNum }, res => {
    let MMList = res.data;
    pageNum = MMList.pcursor;
    MMList.list.forEach(function (val, index) {
      RenderList(val);
    })
  })
}

function RenderList(val) {
  $("ul").append(`
          <li class="list">
            <div class="back">
              <div class="zz" style="background: url('${val.thumbnailUrl}'); background-position: center center;"></div>
              <img src="${val.thumbnailUrl}"/>
            </div>
            <div class="list-bottom">
              <div class="bottom-info">
                <a target="_blank" title="${val.user.id}" href="https://live.kuaishou.com/profile/${val.user.id}">
                  <img class="avatar" src="${val.user.avatar}"/>
                  <span class="title">${val.caption}</span>
                </a>
              </div>
              <div class="pid">${val.id}</div>
              <div class="action" principalId="${val.user.id}" photoId="${val.id}">
                <a class="down">下载</a>
                <a class="play">播放</a>
              </div>
            </div>
          </li>
  `);

  BindPlayClick();
  BindDownClick();
}

// 播放视频
function BindPlayClick() {
  document.querySelectorAll(".play").forEach((val, index) => {
    val.onclick = function () {
      Http('/play', {
        principalId: $(val).parent().attr("principalId"),
        photoId: $(val).parent().attr("photoId")
      }, url => {
        $(".video video").attr("src", url.playUrl);
        $(".video").slideDown("slow");
      })
    }
  })
}

// 下载视频
function BindDownClick() {

  document.querySelectorAll(".down").forEach((val, index) => {
    val.onclick = function () {
      Http('/play', {
        principalId: $(val).parent().attr("principalId"),
        photoId: $(val).parent().attr("photoId")
      }, url => {
        downMp4(url.playUrl, $(val).parent().attr("photoId"))
      })
    }
  });
}


// 滚动加载数据
$(window).scroll(function () {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  console.log("scrollTop: ", scrollTop);
  console.log("windowHeight: ", windowHeight);
  console.log("scrollHeight: ", scrollHeight);
  console.log("scrollTop + windowHeight: ", scrollTop + windowHeight);
  if (Number((scrollTop + windowHeight).toFixed()) == scrollHeight) {
    console.log("到底了,发起请求")
    checkAjax()
  }
});

// 关闭视频播放弹窗
$(".close").click(function () {
  $("video").get(0).pause();
  $(".video video").attr("src", "");
  $(".video").slideUp("slow");
});

// video 父元素被悬浮就开始视频播放
// 以实现不静音而自动播放
$(".video").mouseover(function () {
  $("video").get(0).play()
});


// 发送ajax请求
function Http(URL, params, callback) {
  $.ajax({
    url: `http://127.0.0.1:8090/api${URL}`,
    type: 'GET',
    data: params,
    success: (res) => {
      callback(res)
    }
  })
}

// 下载MP4视频
function downMp4(urls, photoId) {
  fetch(urls).then(res => res.blob()).then(blob => {
    const a = document.createElement('a');

    document.body.appendChild(a);
    a.style.display = 'none';
    const url = window.URL.createObjectURL(blob);

    a.href = url;
    a.download = `bmy-${photoId}.mp4`;
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  });
}

checkAjax();