@extends('common.layout')

<link rel="stylesheet" type="text/css" href="{{asset('css/list.css') }}">
<script defer type="text/javascript" src="{{asset('cmm/calender.js') }}"></script>

@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>

        <div class="dateWrap">
          <div class="dateBox">
            <div class="dateButtonBox">
              <button type="button" data-day="0" class="calendarOneDay">1일</button>
              <button type="button" data-day="7" class="calendarOneWeek">1주일</button>
              <button type="button" data-months="1" class="calendarOneMonth">1개월</button>
              <button type="button" data-months="3" class="calendarThreeMonth">3개월</button>
            </div>
            <div class="datepickerBox">
              <input class="startDate" readonly/>
              <input class="endDate" readonly/>
            </div>
            <button id="searchBtn" class="btn01 btnBlue" type="button" onclick="nSend()">조회</button>
          </div>
          <div class="downloadBox">
            <button id="exelDownBtn" class="btn01" onclick="dwnExcel()">
              <span class="txt14_600">엑셀 파일 내려받기</span>
              <img src="{{asset('images/download_small.svg') }}" alt="다운로드 아이콘" />
            </button>
          </div>
        </div>

        <div class="tableWrap">
          <table>
            <colgroup>
              <col width="108px">
              <col width="*">
              <col width="*">
              <col width="120px">
            </colgroup>
            <thead>
              <tr>
                <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 textBlue">
            </tbody>
          </table>
        </div>

        <div class="pageWrap">
          <ul class="pageNum"></ul>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  var gLoadCall = 0;
  var mode      = "fav";
  var startDate = ""; // 날짜 검색 시작일
  var endDate   = ""; // 날짜 검색 종료일
  var exelType  = ""; // 빈값이 기본, 다운로드인 경우 excel
  clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);
  const ntList = '<tr>' +
                  '<td><p class="txt14_400" style="width:108px;">{listNo}</p></td>' +
                  '<td><p class="txt14_400" style="width:100%;">{0}</p></td>' +
                  '<td><p class="txt14_400" style="width:100%;">{1}</p></td>' +
                  '<td><p class="txt14_400" style="width:120px;">{2}</p></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(getListData , 500);
            }
          }
    }

  function getListData() {
      var qSdate      = clsUrlSearchParam.get("startDate");
      var qEdate      = clsUrlSearchParam.get("endDate");
      var qSelMonth   = clsUrlSearchParam.get("btnSelMonth");
      if ( typeof qSdate !='undefined' && parseInt(qSdate,10) > 100 )document.querySelector('.startDate').value = qSdate;
      if ( typeof qEdate !='undefined' && parseInt(qEdate,10) > 100 )document.querySelector('.endDate').value = qEdate;
      if ( typeof qSelMonth !='undefined' && parseInt(qSelMonth,10) > -1 ){
          qSelMonth = parseInt(qSelMonth,10);
          for (var i = 0; i < dateButtons.length; i++) {
              dateButtons[i].classList.remove("active");
          }
      }
      startDate   = document.querySelector('.startDate').value;
      endDate     = document.querySelector('.endDate').value;
      asMonthsV1();

    var exelType = "";
    if (arguments[0] !='' && typeof arguments[0] !='undefined')exelType = arguments[0];
    var data = {
      "mode" :  mode,
      "sdate" : startDate,
      "edate" : endDate,
      "type" : exelType
    }

    try {
        var initJson = { "apiUrl" : "/mda/api/ds/fv", "method": "GET", "data":data }
        var listType = { "type": "pull", "listCount": 10 }

	console.log("initJson:",initJson);
        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) {
        console.log(error);
    }
  }

  function setCmmParam(){
      startDate           = document.querySelector('.startDate').value;
      endDate             = document.querySelector('.endDate').value;
      var nSelMonth       = window.btnSelMonth;
      var activeButton    = document.querySelector(".dateButtonBox button.active");
      if (activeButton){
          if ( activeButton.classList.contains("calendarOneDay")){
              nSelMonth = 0;
          } else if ( activeButton.classList.contains("calendarOneWeek")){
              nSelMonth = 7;
          } else if ( activeButton.classList.contains("calendarOneMonth")){
              nSelMonth = 1;
          } else if ( activeButton.classList.contains("calendarThreeMonth")){
              nSelMonth = 3;
          }
      }
      return nSelMonth;
  }

  function nSend(){
    var nSelMonth = setCmmParam();
    document.location.href="/mda/ds/fav?page=1&startDate=" + startDate + "&endDate="+endDate + "&btnSelMonth=" + nSelMonth;
  }

  // 엑셀 파일 내려받기
  function dwnExcel(){
    var prefix = (location.href.indexOf("mda") >-1) ? "/mda" : "";
      location.href = prefix+"/api/excelRecentRectifyLog?sdate=" + startDate + "&edate=" + endDate;
  }

  window.onload=function(){
    startDate = document.querySelector('.startDate').value;
    endDate = document.querySelector('.endDate').value;
    getListData();
  }
</script>
@endsection