@extends('common.layout')

<link rel="stylesheet" type="text/css" href="{{asset('css/list.css') }}" />

@section('content')
<div class="container">
  <section id="sec01" class="sec01">
    <div class="contWrap">
      <div class="listWrap">
        <div class="titleWrap">
          <h2 class="title txt23_700">TXCloud 권장 표현</h2>
          <div class="searchWrap">
            <input type="text" id="search" name="search" class="search" placeholder="검색어를 입력해주세요" onkeydown="if (event.keyCode == 13) {nSearch();return false;}">
            <button type="button" id="searchBtn" class="searchBtn" onclick="nSearch()">
              <img src="{{asset('images/search_small.svg') }}" alt="검색 icon">
            </button>
          </div>
        </div>

        <div class="tableWrap">
          <table>
            <colgroup>
              <col width="108px">
              <col width="414px">
              <col width="414px">
              <col width="158px">
              <col width="158px">
              <col width="108px">
              <col width="108px">
            </colgroup>
            <thead>
              <tr>
                <th><p class="txt13_400">No</p></th>
                <th><p class="txt13_400">기존 표현</p></th>
                <th><p class="txt13_400">권장 표현</p></th>
                <th><p class="txt13_400">등록일</p></th>
                <th><p class="txt13_400">수정일</p></th>
                <th><p class="txt13_400">사용여부</p></th>
                <th><p class="txt13_400">관리</p></th>
              </tr>
            </thead>
            <tbody class="tbodyWrap">
            </tbody>
          </table>
        </div>

        <div class="buttonWrap">
          <button class="btn01 btnBlue" onclick="location.href='wr'">등록</button>
        </div>

        <div class="pageWrap">
          <ul class="pageNum"></ul>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  var gLoadCall = 0;
  clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);
  var keyword = ""; // 검색어
  var mode = "sf" // 분류 (sf :TXCloud , bk:금융권)
  let ntList = '<tr><td><p class="txt14_400" style="width:100px;">{listNo}</p></td><td><p class="txt14_400" style="width:406px;">{1}</p></td>';
  ntList += '       <td><p class="txt14_400" style="width:406px;">{2}</p></td>';
  ntList += '       <td><p class="txt14_400" style="width:150px;">{3}</p></td>';
  ntList += '       <td><p class="txt14_400" style="width:150px;">{4}</p></td>';
  ntList += '       <td>';
  ntList += '         <div class="toggleSwitch {toggleActive}" data-no="{0}" onclick="btnToggleSwitch(this)">';
  ntList += '           <span class="toggleButton"></span>';
  ntList += '         </div>';
  ntList += '        </td>';
  ntList += '        <td><button type="button" class="btn03 btnGray" onclick="{100}">상세 보기</button></td>';
  ntList += '   </tr>';

  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);
          } catch(e){
            if ( gLoadCall < 1){
                gLoadCall++
                window.setTimeout(setInitData , 500);
            }
          }
    }

  function setInitData(){


    if (clsUrlSearchParam.get("stx")) {
        document.querySelector("#search").value = clsUrlSearchParam.get("stx");
        keyword = clsUrlSearchParam.get("stx");
    }
    var data = { "keyword": keyword,"mode": mode};

    try {

      var initJson      = { "apiUrl" : "/mda/api/db/lt", "method": "GET", "data": data }
      var listType      = { "type": "link", "listCount": 10 };

      clsListClass.setTmsClass(clsTmsClass);
      clsListClass.setSimpleInit(initJson, setCallBackFnc , ntList, listType ,clsTmsClass);

      if (document.querySelector(".tbodyWrap").children.length < 1) {
          var tdLength = document.querySelectorAll("thead tr th").length;
          document.querySelector(".tbodyWrap").innerHTML ='<tr><td colspan="'+ tdLength +'"><p class="txt14_400">데이터가 없습니다.</p></td></tr>';
      }
    } catch (error) {

    }

  }

  function nSearch(){
    keyword = document.querySelector("#search").value;
    clsUrlSearchParam.set("stx", keyword);
    clsUrlSearchParam.set("page", 1);
    location.href = location.pathname + '?' + clsUrlSearchParam.toString();
  };

  function btnToggleSwitch(obj){
    if (obj.classList.contains("active")) {
      if ( !confirm("표현을 숨김 하시겠습니까?"))return;

      var shData = {
                    "no" : obj.dataset.no,
                    "mode" : "hide",
                    "type" : "S"
                                 }
      var listData = clsTmsClass.setDataInformation("/mda/api/db/sh", "GET", shData , function(){
             obj.classList.remove('active');
      });
    } else {
      if ( !confirm("표현을 사용 하시겠습니까?"))return;
                var shData =  {
                          "no" : obj.dataset.no,
                          "mode" : "show",
                          "type" : "S"
                        }
        var listData = clsTmsClass.setDataInformation("/mda/api/db/sh", "GET", shData , function(){
          obj.classList.add('active');
        });
    }
  }

  window.onload = function(){
    setInitData();
  };
</script>
@endsection