@extends('common.layout')
@section('commostyle')
<link rel="stylesheet" type="text/css" href="{{asset('css/mm.css') }}" />
<link rel="stylesheet" type="text/css" href="{{asset('css/nt.css') }}" />
@endsection('commostyle')
@section('content')
<div class="container">
  <section id="sec01" class="sec01">
    <ul class="breadCrumb">
      <li>홈</li>
      <li>콘텐츠 피드</li>
    </ul>
    <div class="title titleSelect">
      <h2 class="txt23_700">콘텐츠 피드</h2>
      <div class="searchWrap">
        <select name="searchSelect" id="searchSelect" class="searchSelect txt12_400" onchange="nSend()">
          <option value="">전체</option>
          <option value="1">일반</option>
          <option value="2">알림톡</option>
          <option value="3">LMS</option>
          <option value="4">안내장</option>
          <option value="5">버튼</option>
          <option value="6">팝업, 바텀시트</option>
          <option value="7">텍스트 입력필드</option>
          <option value="8">헤드메시지</option>
          <option value="9">완료메시지</option>
          <option value="10">오류메시지</option>
          <option value="11">유의사항</option>
          <option value="12">자주 하는 질문</option>
          <option value="13">상품광고(CR)</option>
        </select>
        <input type="text" id="searchName" name="searchName" class="searchName" placeholder="검색어를 입력해주세요" onkeypress="enterEvent()">
        <button id="searchBtn" type="button" class="searchBtn" onclick="nSend()"><img src="{{asset('images/search_small.svg')}}" alt="검색 icon"></button>
      </div>
    </div>
    <div>
      <div class="contWrap feedWrap">
        <div class="topArea">
          <ul class="tabBox">
            <li class="active all" onclick="tabButton(this)">
              <a href="javascript:void(0);" class="active txt11_500" onclick="tabButton(1)">전체</a>
            </li>
            <li class="my" onclick="tabButton(this)">
              <a href="javascript:void(0);" class="txt11_500" onclick="tabButton(2)">내 피드</a>
            </li>
            <li class="favorites" onclick="tabButton(this)">
              <a href="javascript:void(0);" class="txt11_500" onclick="tabButton(3)">즐겨찾기</a>
            </li>
          </ul>
          <p class="txt13_500 colorGray">총 <span id="totalNum" class="txt13_500 colorBlue"></span>건</p>
        </div>
        <ul class="ds_li ds_li2 listBody"></ul>
        <div class="pageWrap">
          <ul class="pageNum" onclick=""></ul>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  var gLoadCall   = 0;
  var tabBtn      = document.querySelectorAll('.tabBox li');
  var pagefield   = document.querySelector('#searchSelect');
  var keyword     = "";
  var keyfield    = "";
  var page        = 1;
  var myfeed      ='';
  var ntList      = '<li>'+
    '<p class="fv_icon">'+
    '  <button type="button" class="star {isFavoriteFd}" data-id="{0}" data-type="F" onclick="addClassFnc(event)"></button>'+
    '</p>'+
    '<a href="javascript:{100};">'+
    '  <div class="itemtop">'+
    '    <div class="labelBox">'+
    '      <p class="menu_label label txt11_500">콘텐츠 교정</p>'+
    '      <p class="feed_label label txt11_500">{1}</p>'+
    '    </div>'+

      '</div>'+
      '<div class="itemcont">'+
      '  <p class="txt12_400 clamp_txt clamp_5 inText">{2}</p>'+
      '</div>'+
    '</a>'+
  '</li>';

  function setCallBackFnc(json){


        try {
              clsListClass.currentSetData = JSON.parse(json);
              clsListClass.setInitPage(clsListClass.currentSetData.data , '');
              clsListClass.setPaging(clsListClass.pagingTarget, clsListClass.pageClassName);
              clsListClass.getPaging();
              clsListClass.getList(clsListClass.listTarget, clsListClass.currentSetData.data, ntList);

              if (clsListClass.currentSetData.data.total_num == 0) {
                document.querySelector(".listBody").classList.add("noList");
              }

              window.setTimeout(setNl2br,500);
          } catch(e){
            // alert('처리 중 오류 발생' + e);
            //clsTmsClass.setRefresPop();
            if ( gLoadCall  < 1){
                gLoadCall++
                window.setTimeout(setInitData,500);
            }
          }
    }

  function setNl2br(){
      var itemCard = document.querySelectorAll(".inText");
      var inText   = "";
      for(var item in itemCard){
          inText = itemCard[item].innerHTML;
          inText =  inText.replace(/\n/g,"<br/>");
          itemCard[item].innerHTML = inText;
      }
  }
  function setInitData(){
    try {

        if (clsTmsClass.getParams("keyword")) {
            document.querySelector("#searchName").value = clsTmsClass.getParams("keyword");
        }

        if (clsTmsClass.getParams("keyfield")) {
            document.querySelector("#searchSelect").value = clsTmsClass.getParams("keyfield");
        }

        if (clsTmsClass.getParams("category")) {
            var obj     = document.querySelectorAll('.tabBox li');
            var element = null;
            for(var i=0;i<obj.length;i++){
              element = obj[i];
              if (element.classList.contains(clsTmsClass.getParams("category"))) {
                    element.classList.add("active");
                } else {
                    if (element.classList.contains("active")) {
                        element.classList.remove("active");
                    }
                }
            }
        }
        getData();
    } catch (error) {

    }
  }
  function tabButton(idx){

    for(var i=0;i<tabBtn.length;i++){
      tabBtn[i].classList.remove('active');
    }
    tabBtn[idx-1].classList.add('active');
    changeLocation();
  };

  // 검색버튼 클릭 시
  function nSend(){
    try {
        changeLocation();
    } catch (error) {

    }
  }

  function changeLocation() {
      clsUrlSearchParam.set('page', 1);
      clsUrlSearchParam.set('keyword', document.querySelector("#searchName").value);
      clsUrlSearchParam.set('keyfield', document.querySelector("#searchSelect option:checked").value);
      clsUrlSearchParam.set('category', document.querySelector(".tabBox li.active").classList[0]);
      location.href = location.pathname + '?' + clsUrlSearchParam.toString();
  }

  function getData(getPage) {
		try {
      getPage = getPage = 0 ? page : 1;
      var   keyword = document.querySelector('#searchName').value;
      var   keyfield = document.querySelector('#searchSelect option:checked').value;
      var   category = document.querySelector('.tabBox li.active a').textContent;

      var   myfeed = category == "내 피드" ? "Y" : "N";
      var   bookmark = category == "즐겨찾기" ? "Y" : "N";
      keyfield = keyfield == "전체" ? "" : keyfield;
      var initJson = { apiUrl : "/frn/api/feeds", method: "GET", data: {"keyword": keyword, "keyfield": keyfield, "page" : getPage, "myfeed":myfeed, "bookmark": bookmark} }
      var listType = { type: "pull", listCount: 8 }
      clsListClass.setSimpleInit(initJson, setCallBackFnc, ntList, listType , clsTmsClass);
    } catch (error) {
    }
  };

  function enterEvent(){
    if (window.event.keyCode == 13) {
        nSend()
    }
   }


window.onload=function(){
  setInitData();
}

function popCloseFnc() {
    location.reload()
}
</script>
@endsection