$(function(){
  // ==========================================================
  //  影片播放
  // ==========================================================
  $(document).on("click", ".video-cover-wrapper", function(){
    let iframeSrc = $(this).data("iframe-src")
    if(iframeSrc){
      $(this).next(".video-play-wrapper").find("iframe").prop("src", iframeSrc)
      $(this).addClass("hide")
      $(this).next(".video-play-wrapper").removeClass("hide")
    }
  })
  
  
  // ==========================================================
  //  取得資料
  // ==========================================================
  $(".video-carousel-item").on("click", function(){
    getVideoData($(this).data("video-id"))
  })
})


//ajax取得資料
function getVideoData(videoId){
  let param = {
    "video_type": $("#videoType").val(),
    "video_id": videoId
  }
  $.ajax({
    url: "/video/ajax/ajax_get_video.php",
    type: "GET",
    data: param
  }).done((responseData) => {
    setVideoData(responseData)
  })
}

//ajax後渲染資料
function setVideoData(data){
  let jsonData = JSON.parse(data)
  if(jsonData){
    videoHtml = `<div class="video-main-container">
                  <h3 class="webeditor-title">${jsonData.video_data.title}</h3>
                  <div class="webeditor">
                    <div class="video-play-group">
                      <div class="video-cover-wrapper" data-iframe-src="https://www.youtube.com/embed/${jsonData.video_data.iframe}?theme=light;showinfo=0;rel=0;autoplay=1;mute=1;enablejsapi=1">
                        <img src="${jsonData.video_data.cover}" class="video-cover-shadow">
                        <button class="flat-btn video-cover-btn"></button>
                      </div>
                      <div class="video-play-wrapper hide">
                        <div class="video-play-shadow">
                          <iframe src="" frameborder="0" class="video-iframe" allow="autoplay" allowfullscreen></iframe>
                        </div>
                      </div>
                    </div>
                    <br>
                    ${jsonData.video_data.webeditor}
                    <br>
                  </div>
                </div>`
    let renderVideoTarget = $(".video-main-container")
    //渲染列表
    renderVideoTarget.html(videoHtml)
  }
}