{% extends 'base.html' %}
{% load staticfiles %}
{% load app_filters %}

{% block headscript %}
  <style>
    div.ui.segment.content {
      height: 500px;
      overflow-y: auto;
    }

    div.ui.segment.content {
      height: 500px;
      overflow-y: auto;
    }

    div.ui.segment.today {
      height: 150px;
      overflow-y: auto;
    }

    div.ui.segment.viewer {
      height: 500px;
      overflow-y: auto;
    }
    span.head_link{
      cursor:pointer;
    }
    span.head_link:hover{
      color:blue;
    }
    .head_link_active{
      color:green !important;
    }
  .listitem{
    border:0px;
    text-align: left;
    line-height:1.2em;
    height:1.5em;
    overflow:hidden;
    white-space: nowrap;
    background:transparent;
  }
  .noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
  }
  .inner_viewer{
    width:90%;
    margin-left:5%;
    padding-top:30px;
    padding-bottom: 50px;
  }
  .viewer_text{
  }
  .viewer_media{
    margin-top:40px;
  }
  .viewer_media .viewer_media_item{
    margin-top:20px;
  }
  </style>
{% endblock %}

{% block content %}
<!-- section -->
<div class="section news_wrap">
  <div class="box_left box">
    <div class="news_list">
      <h2>NEWS LIST</h2>
      <ul class="list scrollbar-outer" id="news_list">
        {% for notice in notices %}
        <li {% if forloop.counter0 == 0 %}class="on"{% endif %} name="class_btns" dataid="{{ notice.id }}" onclick="loadNews(this)">
          <span class="no">No.{{ total_count|subtract:forloop.counter0 }}</span>
          <span class="title">{{ notice.content_short }}</span>
          <span class="date">{{ notice.created_at|datetime_format_ap }}</span>
        </li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="box_right box">
    <div class="news_head">
      <span class="no" id="news_head_no"></span>
      <span class="title" id="news_head_title"></span>
      <span class="date" id="news_head_date"></span>
    </div>
    <div class="news_content scrollbar-outer" id="news_content"></div>
  </div>
</div>
<!-- //section -->

<script>
  var totalCount = {{total_count}};

  $(document).ready(function(){
    $("#news_list").bind("scroll", scrolled_list);
    $($("ul.list li")[0]).click()

    $(".scrollbar-outer").scrollbar();
  });

  var isLoading = false;
  var more = true;
  var page = 1;
  function scrolled_list(e){
    var target = $(e.target);
    var scrollBottom = target.get(0).offsetHeight + target.get(0).scrollTop;
    if(scrollBottom > target.get(0).scrollHeight - 20){
      if(!isLoading) {
        loadMore();
      }
    }
  }

  function loadMore(){
    if(more && !isLoading){
      page++;
      isLoading = true;
      $.ajax({
        type: 'POST',
        url: '/api/notice/list',
        data: {
          page:page
        },
        dataType: 'json',
        success: function (data) {
          if (data.result === 1) {
            var list = data.data;
            if (list != null && list.length > 0) {
              for (var i = 0; i < list.length; i++) {
                const no = (page-1)*20+i+1;
                $("#news_list").append(`<li name="class_btns" dataid="${list[i].id}" onclick="loadNews(this)">
                                          <span class="no" ${no > 999 ? 'style="font-size: 14px;"' : ""}>No.${totalCount - ((page-1)*20+i)}</span>
                                          <span class="title">${list[i].content_short}</span>
                                          <span class="date">${list[i].created_at.slice(0, 10).replace(/-/gi, ".")}</span>
                                        </li>`);
              }
            }else{
              more = false;
            }

          } else {
            alert(data.error.message)
          }
          isLoading = false;
        },
        error: function (data) {
          alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")
          isLoading = false;
        }
      });
    }
  }

  function loadNews(dom){
    let newsNo = $(dom).find("span[class=no]")[0].innerText;
    let newsTitle = $(dom).find("span[class=title]")[0].innerText;
    let newsDate = $(dom).find("span[class=date]")[0].innerText;
    $("#news_head_no").html(newsNo);
    $("#news_head_title").html(newsTitle);
    $("#news_head_date").html(newsDate);

    var news_id = $(dom).attr("dataid");
    let newsList = $(dom).siblings();
    for (let i = 0; i < newsList.length; i++) {
      $(newsList[i]).removeClass("on");
    }
    $(dom).addClass("on");

    $("#news_content").html("");
    $.ajax({
      type: 'POST',
      url: '/api/notice/detail',
      data: {
        notice_id:news_id
      },
      dataType: 'json',
      success: function (data) {
        if (data.result === 1) {
          var dt = data.data;
          if (dt != null){
            var d_text = document.createElement("div");
            d_text.className = "viewer_text";
            d_text.innerHTML = nl2br(dt.content);
            var d_media = document.createElement("div");
            d_media.className = "viewer_media";
            for(var i = 0; i < dt.medias.length;i++){
                var d_m_item = document.createElement("div");
                d_m_item.className = "viewer_media_item";
                var img = document.createElement("img");
                $(img).attr("width", "100%");
                img.src = dt.medias[i].image_url;
                d_m_item.appendChild(img);
                d_media.appendChild(d_m_item);
            }
            $("#news_content").append(d_text);
            $("#news_content").append(d_media);
          }else{
            more = false;
          }

        } else {
          alert(data.error.message)
        }
      },
      error: function (data) {
        alert("데이터 로딩에 실패했습니다. 다시 시도해주세요.")

      }
    });
  }
</script>

{% endblock %}