@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">타금융사 권장 표현</h2>
          <div class="searchWrap">
            <input type="text" id="search" name="search" class="search"  maxlength="30" placeholder="검색어를 입력해주세요" onkeydown="if (event.keyCode == 13) {nSend();return false;}">
            <button type="button" class="searchBtn" id="searchBtn" onclick="nSend()">
              <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="212px">
              <col width="212px">
              <!--<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="pageWrap">
          <ul class="pageNum"></ul>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);
  var gLoadCall = 0;
  var keyword = ""; // 검색어
  var mode = "bk" // 분류 (sf :TXCloud , bk:금융권)
  var data;

	var ntList = '<tr><td><p class="txt14_400" style="width:100px;">{listNo}</p></td>';
  ntList +='         <td><p class="txt14_400" style="width:408px;">{1}</p></td>';
  ntList +='         <td><p class="txt14_400" style="width:408px;">{2}</p></td>';
  ntList +='         <td><p class="txt14_400" style="width:212px;">{3}</p></td>';
  ntList +='         <td><p class="txt14_400" style="width:212px;">{4}</p></td>';
  //ntList +='        <td><div class="toggleSwitch {toggleActive}" data-no="{0}" onclick="btnToggleSwitch(this)">';
  //ntList +='        <span class="toggleButton"></span>';
  //ntList +='        </div>';
  ntList +=' </td><td><button type="button" class="btn03 btnGray" onclick="{100}">상세 보기</button></td></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("keyword")) {
        document.querySelector("#search").value = clsUrlSearchParam.get("keyword");
        keyword = clsUrlSearchParam.get("keyword");
    }

    data = {
      "keyword": keyword,
      "mode": mode
    }

    try {

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

        //await tmsList.setSimpleInit(initJson, tmsList.setListItemForm, ntList, listType);
       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 btnToggleSwitch(obj){
    if (obj.classList.contains("active")) {
      if ( !confirm("표현을 숨김 하시겠습니까?"))return;
      var shData = {
                    "no" : obj.dataset.no,
                    "mode" : "hide",
                    "type" : "O"
                  }
      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" : "O"
                        }
        var listData = clsTmsClass.setDataInformation("/mda/api/db/sh", "GET", shData , function(){
          obj.classList.add('active');
        });
    }
  }

  function nSend(){
    keyword = document.querySelector("#search").value;
    clsUrlSearchParam.set("page", 1);
    clsUrlSearchParam.set("keyword", keyword);

    location.href = location.pathname + '?' + clsUrlSearchParam.toString();
  }

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