@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="logSearchWrap">
            <div class="selectBox">
              <select name="categoryType1" id="categoryType1" class="txt14_400" onchange="changeLocation()">
                <option value="a" class="txt14_400">전체</option>
                <!--<option value="s" class="txt14_400">승인</option>-->
                <option value="w" class="txt14_400">대기</option>
                <option value="r" class="txt14_400">거절</option>
              </select>
            </div>
            <div class="searchWrap">
              <input type="text" id="search" name="search" class="search" maxlength="30" placeholder="검색어를 입력해주세요" onkeydown="if (event.keyCode == 13) {changeLocation();return false;}">
              <button type="button" id="searchBtn" class="searchBtn" onclick="changeLocation()">
                <img src="{{asset('images/search_small.svg') }}" alt="검색 icon">
              </button>
            </div>
         </div>
        </div>

        <div class="tableWrap">
          <table>
            <colgroup>
              <col width="108px">
              <col width="414px">
              <col width="414px">
              <col width="168px">
              <col width="168px">
              <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 keyfield = "a"; // 검색필드(w:대기,s:승인,r:거절,a:전체)
  var keyword = ""; // 검색어
  // var pageNum = 1; // 페이지 번호
  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:150px;">{6}</p></td>';
      ntList += '<td><p class="txt14_400" style="width:150px;">{4}</p></td>';
      ntList += '<td><p class="txt14_400">{aprovType}</p></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(){
    try {
        if (clsUrlSearchParam.get("keyword")) {
            document.querySelector("#search").value = clsUrlSearchParam.get("keyword");
            keyword = clsUrlSearchParam.get("keyword");
        }
        if (clsUrlSearchParam.get("keyfield")) {
            document.querySelector("#categoryType1").value = clsUrlSearchParam.get("keyfield");
            keyfield = clsUrlSearchParam.get("keyfield");
        }
        var  data = {
          "keyfield" :  keyfield,
          "keyword" : keyword,
        }
      var  initJson = { "apiUrl" : "/mda/api/db/pl", "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 changeLocation() {
    clsUrlSearchParam.set("page", 1);
    clsUrlSearchParam.set("keyword", document.querySelector("#search").value);
    clsUrlSearchParam.set("keyfield", document.querySelector("#categoryType1 option:checked").value);
    location.href = location.pathname + '?' + clsUrlSearchParam.toString();
  }

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

@endsection