@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 searchView">
  <section id="sec01" class="sec01">
    <div class="title titleSelect">
      <h2 class="txt23_700">통합 검색</h2>
      <div class="searchWrap">
        <select name="searchSelect" id="searchSelect" class="searchSelect txt12_400">
          <option value="">전체</option>
          <option value="gd">가이드라인</option>
          <option value="wd">고객언어사전</option>
          <option value="fd">피드</option>
        </select>
        <input type="text" id="searchName" name="searchName" class="searchName" placeholder="검색어를 입력해주세요" onkeypress="sendBtn()" />
        <button type="button" class="searchBtn" onclick="searchBtn();"><img src="{{asset('images/search_small.svg')}}" alt="검색 icon" /></button>
      </div>
    </div>
    <div class="contWrap searchResult">
      <div class="scrollWrap">
        <div class="scroll">
          <div class="top">
            <p class="txt15_600"><span id="searchWord"></span> 검색 결과</p>
            <p class="txt13_500 colorGray">총 <span class="colorBlue srTotal"></span>건</p>
          </div>
          <div class="content">
            <div class="contBoxWrap">
              <div class="contBox guide">
                <div class="contTit"></div>
              </div>

              <div class="contBox word">
                <div class="contTit"></div>
              </div>

              <div class="contBox feed">
                <div class="contTit"></div>
              </div>
            </div>
            <!-- <div class="moreBtn">
              <button type="button" class="btn01">결과 더 보기</button>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  var   srSum         = 0;
  var   getKeyfield   = clsTmsClass.getParams('keyfield');
  var   getKeyword    = clsTmsClass.getParams('keyword');
  var   searchSelect  = document.getElementById('searchSelect');
  var   searchName    = document.getElementById('searchName');
  var   srTotal       = document.querySelector('.srTotal');
  var   contBoxWrap   = document.querySelector('.contBoxWrap');
  var   page          = 1;
  var   guideData     = [];
  var   wordData      = [];
  var   feedData      = [];
  var   resKey        = [["Guide", "guide", "고객중심 글쓰기 가이드라인", "guideData"], ["Feed", "feed", "콘텐츠 피드", "feedData"], ["Word", "word", "고객언어사전", "wordData"]];
  var   resData       = [[], [], []];
  var   listPageNum   = 6;

  clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);
  clsTmsClass.setTmsPop(clsPopClass);
  clsListClass.setTmsClass(clsTmsClass);

 function setInitData(){
    searchName.value    = getKeyword;
    searchSelect.value  = getKeyfield;
    getInitData();
 }
  function getInitData(){
      var PrefixLink = (location.pathname.indexOf("/frn") < 0) ? "" : "/frn";
    clsTmsClass.setDataInformation(PrefixLink+"/api/sr/sr", "GET", {"keyword" : getKeyword, "keyfield" : getKeyfield} , function(json){
      var data = JSON.parse(json);
      document.querySelector("#searchWord").textContent = "'"+getKeyword+"'";
      var totalCnt = data.data.Guide.total_num + data.data.Word.total_num + data.data.Feed.total_num;
      srTotal.textContent = totalCnt;

      for (var i = 0; i < resKey.length; i++) {
        var element = data.data[resKey[i][0]];
        console.log(element.total_num)
        if (element.total_num == 0) {
          document.querySelector('.' + resKey[i][1]).style.display = "none";
        } else {
          var ulWrap = document.createElement('ul');
          ulWrap.classList.add('serchContent');

          if (resKey[i][0] == "Guide") {
            guideData = element.list;
          } else if (resKey[i][0] == "Feed" ) {
            feedData = element.list;
          } else {
            wordData = element.list;
          }

          resData[i] = element.list;

          document.querySelector('.' + resKey[i][1] + ' .contTit').innerHTML=
            '<p class="txt15_600">' + resKey[i][2] + '</p>'+
            '<p class="txt13_500 cnt"><span class="colorBlue">'+ element.total_num + '</span>건</p>';

          if (element.total_num > listPageNum) {
            document.querySelector('.' + resKey[i][1]).insertAdjacentHTML('afterend', '<div class="moreBtn"><button type="button" class="btn01" onclick="moreFunc(this)" data-type="' + resKey[i][1] + '" data-page="1">결과 더 보기</button></div>');
          }
        }

        setData(resKey[i][1], 1);
      }

      if(totalCnt == 0){
        var searchNone = document.createElement('div');
        searchNone.classList.add('searchNone');
        searchNone.innerHTML = '<p class="noData txt14_400">검색 결과가 없습니다.</p>';
        document.querySelector('.contBoxWrap').classList.add('searchNoneWrap')
        document.querySelector('.contBoxWrap').appendChild(searchNone);
      }

    });
  }

  function moreFunc(e) {
    var pageValue = parseInt(e.dataset.page, 10);
    pageValue += 1;
    e.dataset.page = pageValue;
    setData(e.dataset.type, e.dataset.page);
  }

  function setData(type, page) {
    var  start = (page - 1) * 6;
    var  end = (page - 1) * 6 + 6;

    var linkPrefix = (location.pathname.indexOf("/frn") < 0) ? "" : "/frn";
    if (type == "guide") {
      var  guideEnd = guideData.length < end ? guideData.length : end;
      var  ulWrap = "";
      if (document.querySelector(".guide .serchContent") === null) {
          ulWrap = document.createElement('ul');
          ulWrap.classList.add('serchContent');
      } else {
          ulWrap = document.querySelector(".guide .serchContent");
      }

      var   innerHTML = "";
      for (start; start < guideEnd; start++) {
          element = guideData[start];

          var regExp = new RegExp(getKeyword, 'g');
          var   tag = element.GuidelineTitle.replace(regExp, '<span style="color:#003CDC">'+getKeyword+'</span>');
          innerHTML += '<li>'+
              '<a href="'+linkPrefix+'/gd/tv/?id='+element.GuidelineMenuID+'"><p class="txt14_400">'+tag+'</p></a>'+
          '</li>';
      }

      ulWrap.innerHTML += innerHTML;
      document.querySelector('.guide').appendChild(ulWrap);

      if (end >= guideEnd && page != 1) {
        document.querySelector(".contBoxWrap").removeChild(document.querySelector('.guide').nextElementSibling)
      }

    } else if (type == "word") {

      var   wordEnd = wordData.length < end ? wordData.length : end;

      console.log(wordData);

      ulWrap = "";
      if (document.querySelector(".word .serchContent") === null) {
          ulWrap = document.createElement('ul');
          ulWrap.classList.add('serchContent');
      } else {
          ulWrap = document.querySelector(".word .serchContent");
      }

      start = (page - 1) * 6;

      innerHTML = "";
      var popLink01 = linkPrefix + "/wd/rd?&id=";
      var tmpLink01 = '';
      for (start; start < wordEnd; start++) {
          tmpLink01 = popLink01;
          element = wordData[start];
          var regExp = new RegExp(getKeyword, 'g');
          var   word = element.word.replace(regExp, '<span style="color:#003CDC">'+getKeyword+'</span>');
          var   rword = element.rword.replace(regExp, '<span style="color:#003CDC">'+getKeyword+'</span>');

          tmpLink01 += element.id + "&type=" + element.types;
          innerHTML += '<li>'+
              //'<a href="'+linkPrefix+'/wd/sr?id='+element.id+'&keyfield='+getKeyfield+'&keyword='+getKeyword+'">'+
              '<a href="javascript:pOpenItemView(\'' + element.id +'\',\''+tmpLink01+'\',\''+ element.types +'\',\'N\')">' +
              '<p class="txt14_400">'+word+'</p>'+
              '<p class="txt14_400">권장 표현: '+rword+'</p>'+
              '</a>'+
          '</li>';
      }

      ulWrap.innerHTML += innerHTML;
      document.querySelector('.word').appendChild(ulWrap);
      if (end >= wordEnd && page != 1) {
        document.querySelector(".contBoxWrap").removeChild(document.querySelector('.word').nextElementSibling)
      }

    } else {
      start = (page - 1) * 6;
    var   feedEnd = feedData.length < end ? feedData.length : end;
    ulWrap = document.createElement('ul');
    ulWrap.classList.add('serchContent');

    var popLink = linkPrefix + "/mm/fvpop?feedNo=";
    var tmpLik = "";
    innerHTML = "";
    for (start; start < feedEnd; start++) {
        tmpLik = popLink;
        element = feedData[start];
        var regExp = new RegExp(getKeyword, 'g');
        var   FeedTemp = element.FeedTemp.replace(regExp, '<span style="color:#003CDC">'+getKeyword+'</span>');
        /*innerHTML += '<li>'+
            '<a href="/frn/fd/sr?id='+element.FeedID+'&keyfield='+getKeyfield+'&keyword='+getKeyword+'"><p class="txt14_400 clamp_txt clamp_2">'+FeedTemp+'</p></a>'+
        '</li>';*/
        tmpLik += element.FeedID;
        innerHTML += '<li><a href="javascript:pOpenItemView(\'' + element.FeedID+'\',\''+tmpLik+'\',\'F\',\'N\')"><p class="txt14_400 clamp_txt clamp_2">'+FeedTemp+'</p></a></li>';
    }

        ulWrap.innerHTML = innerHTML;
        document.querySelector('.feed').appendChild(ulWrap);

      if (end >= feedEnd && page != 1) {
        document.querySelector(".contBoxWrap").removeChild(document.querySelector('.feed').nextElementSibling)
      }
    }
  }

  function pOpenItemView(seq , link ,favorite , ismine){
      clsListClass.openItemView(seq , link , favorite , ismine);
  }



  function searchBtn(){
    var   totalSelect = document.getElementById('searchSelect');
    var   totalSearch = document.getElementById('searchName');
    var   newUrl = '/frn/sr/srview?keyfield='+totalSelect.value+'&keyword='+totalSearch.value
    if ( location.pathname.indexOf("/frn") < 0 ){
         newUrl = newUrl.replace("/frn","");
    }

    if(totalSearch.value === ""){
      alert('검색어 입력');
      totalSearch.focus();
      return false;
    } else {
      window.parent.location.href = newUrl;
    }
  }

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

  function sendBtn(){
    if (window.event.keyCode == 13) {
        searchBtn();
    }
  }
</script>
@endsection