@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">UX Writing 가이드라인 다운로드</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="nDownExcel()">
              <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="108px">
            </colgroup>
            <thead>
              <tr>
                <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">
              <!-- <tr>
                <td><p class="txt14_400">1</p></td>
                <td><p class="txt14_400">전체 파일 다운로드</p></td>
                <td><p class="txt14_400">210</p></td>
              </tr>
              <tr>
                <td><p class="txt14_400">1</p></td>
                <td><p class="txt14_400">전체 파일 다운로드</p></td>
                <td><p class="txt14_400">210</p></td>
              </tr> -->
            </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 mode= "gd";
  var startDate = ""; // 날짜 검색 시작일
  var endDate = ""; // 날짜 검색 종료일
  var exelType = ""; // 빈값이 기본, 다운로드인 경우 excel

  var ntList = '<tr>' +
                  '<td><p class="txt14_400">{listNo}</p></td>' +
                  '<td><p class="txt14_400">{0}</p></td>' +
                  '<td><p class="txt14_400">{1}</p></td>' +
              '</tr>';

  function getInitData(){

    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");
        }
        switch(qSelMonth){
            case 0 : dateButtons[0].classList.add("active");break;
            case 7 : dateButtons[1].classList.add("active");break;
            case 1 : dateButtons[2].classList.add("active");break;
            case 3 : dateButtons[3].classList.add("active");break;
        }
    }
    startDate   = document.querySelector('.startDate').value;
    endDate     = document.querySelector('.endDate').value;
    asMonthsV1();
    getListData();
  }


  function getListData(exelType) {
      var page  = clsUrlSearchParam.get("page");
      page      = parseInt(page,10) > 0 ?  parseInt(page,10) : 1;
      var data = {
        "mode" :  mode,
        "sdate" : startDate,
        "edate" : endDate,
        "type" : exelType,
        "page" : page
      }

			try {
                  var initJson = { "apiUrl" : "/mda/api/ds/fv", "method": "GET", "data" : data }
                  var listType = { "type": "pull", "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) {
				console.log(error);
			}
  }
  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(getInitData , 500);
            }
        }
  }
    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/gd?page=1&startDate=" + startDate + "&endDate="+endDate + "&btnSelMonth=" + nSelMonth;
  }

  function nDownExcel(){
    var prefix = (location.href.indexOf("mda") >-1) ? "/mda" : "";
      location.href = prefix+"/api/excelGuidelineDownload?sdate=" + startDate + "&edate=" + endDate;
  }

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