@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="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="*">
              <col width="250px">
            </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>
              </tr>
            </thead>
            <tbody class="tbodyWrap">
              <!-- 임의로 디자인보려고 추가 -->
              <tr>
                <td><p class="txt14_400">1</p></td>
                <td><p class="txt14_400">123456</p></td>
                <td><p class="txt14_400">123456</p></td>
                <td><p class="txt14_400">2024-05-06 02:31:11</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= "";
  var startDate = ""; // 날짜 검색 시작일
  var endDate = ""; // 날짜 검색 종료일
  var exelType = ""; // 빈값이 기본, 다운로드인 경우 excel


  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");
          }
      }
      startDate   = document.querySelector('.startDate').value;
      endDate     = document.querySelector('.endDate').value;
      asMonthsV1();
      getListData();
  }

  var 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%">{3}</p></td>' +
                  '<td><p class="txt14_400" style="width:250px">{2}</p></td>' +
                '</tr>';

  function getListData(exelType) {
    var data = {
      "mode" :  "us",
      "sdate" : startDate,
      "edate" : endDate,
      "type" : exelType
    }


			try {
				var initJson = { "apiUrl" : "/mda/api/ds/us", "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/us?page=1&startDate=" + startDate + "&endDate="+endDate + "&btnSelMonth=" + nSelMonth;
  }

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

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