@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>
<script defer type="text/javascript" src="{{asset('js/chart@2.8.0.min.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="nSearch()">조회</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="chartWrap">
          <!-- 전체보기 - bar형태 chart-->
          <!-- 상세보기 - line형태 chart -->
          <canvas id="myChart" width="1460" height="496"></canvas>
        </div>

        <div class="tableWrap">
          <table>
            <thead class="theadWrap">
            </thead>
            <tbody class="tbodyWrap textLeft">
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);
  var mode= "prf";
  var startDate = "";
  var endDate = "";
  var itemCate = "";
  var exelType = ""; // 빈값이 기본, 다운로드인 경우 excel

  /*
  document.addEventListener("DOMContentLoaded", function() {
    startDate = document.querySelector('.startDate').value;
    endDate = document.querySelector('.endDate').value;
    getListData();
  });
  */
  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();
  }

  window.onload=function(){
      getInitData();
  }

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

    var fetchData = clsTmsClass.setDataInformation("/mda/api/ds/st", "GET", data , setCallBackFnc);
  }

  function setCallBackFnc(data) {
    var objCallback           = JSON.parse(data);

    var inLabel       = [];
    var strLog        = '';

    for(var i=0;i< objCallback.data.chart.labels.length;i++){
        switch(objCallback.data.chart.labels[i]){
            case 0       : strLog = '교정하기';break;
            case 1       : strLog = '교정하기_CR';break;
            case 2       : strLog = '교정 선택(A)';break;
            case 3       : strLog = '교정 선택 취소(B)';break;
            case 4       : strLog = '내용복사';break;
            case 5       : strLog = '교정 적용(A-B)';break;
        }
          inLabel[i] = strLog;
    }
    if( inLabel.length > 1)objCallback.data.chart.labels = inLabel;
    createChart(objCallback.data.chart , 'bar', '교정 횟수 통계', "" , "", "");
    createTable(data);
  }


  // 대시보드 table그리기
  function createTable(data) {

    document.querySelector(".theadWrap").innerHTML = "";
    document.querySelector(".tbodyWrap").innerHTML = "";

    var tableHead =document.createElement("tr");
    tableHead.innerHTML =
      '<th style="width:108px;"><p class="txt13_400">번호</p></th>' +
      '<th><p class="txt13_400">제목</p></th>' +
      '<th style="width:128px;"><p class="txt13_400">페이지뷰</p></th>' +
      '<th style="width:100px;"><p class="txt13_400" style="width:100px;"">비고</p></th>';

    document.querySelector(".theadWrap").appendChild(tableHead);
    var tableData = JSON.parse(data).data.table;
    if(Object.keys(tableData).length === 0) {
      tableData = [
          {
            "pgnm": "intro",
            "view": "0"
          },
          {
            "pgnm": "Correction",
            "view": "0"
          },
          {
            "pgnm": "Guideline",
            "view": "0"
          },
          {
            "pgnm": "Dictionary",
            "view": "0"
          },
          {
            "pgnm": "Feed",
            "view": "0"
          },
          {
            "pgnm": "Mypage",
            "view": "0"
          },
          {
            "pgnm": "Notice",
            "view": "0"
          },
          {
            "pgnm": "Faq",
            "view": "0"
          },
          {
            "pgnm": "Search",
            "view": "0"
          }
        ]
    }

    var txtKor    = '';
    var rowHTML   = '';
    var item      = null;
    var tableBody = null;
    var nSelMonth = setCmmParam();
    var cmmparam  =  "&startDate=" + startDate + "&endDate=" + endDate + "&btnSelMonth=" + nSelMonth;
    for(var i=0;i < tableData.length;i++){
      item      = tableData[i];
      tableBody = document.createElement("tr");
      rowHTML   = ''; // 빈 문자열로 초기화
      rowHTML += '<td><p class="txt14_400">' + (i+1) + '</p></td>';
      // switch(item.LogType){
      //         case "Register"       : txtKor = '등록';break;
      //         case "Edit"           : txtKor = '수정';break;
      //         case "Delete"         : txtKor = '삭제';break;
      //         case "Delete Cancel"  : txtKor = '삭제 취소';break;
      //         case "Use"            : txtKor = '사용';break;
      //         case "Hidden"         : txtKor = '숨김';break;
      // }
        switch(item.RectifyType){
            case 0       : txtKor = '교정하기';break;
            case 1       : txtKor = '교정하기_CR';break;
            case 2       : txtKor = '교정 선택(A)';break;
            case 3       : txtKor = '교정 선택 취소(B)';break;
            case 4       : txtKor = '내용복사';break;
            case 5       : txtKor = '교정 적용(A-B)';break;
        }
      rowHTML += '<td><p class="txt14_400">' + txtKor + '</p></td>';
      rowHTML += '<td><p class="txt14_400">' + item.cnt + '</p></td>';
      rowHTML += '<td><button id="detailBtn' + (i+1) + '" type="button" class="btn03 detailBtn btnGray" onclick="javascript:location.href=\'vw?pgnm=' + item.RectifyType + cmmparam + '\'">일별 보기</button></td>';

      tableBody.innerHTML = rowHTML;
      document.querySelector(".tbodyWrap").appendChild(tableBody);
    }
  }

  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 nSearch(){
    var nSelMonth = setCmmParam();
    document.location.href="/mda/ds/prf/lt?page=1&startDate=" + startDate + "&endDate="+endDate + "&btnSelMonth=" + nSelMonth;
  }

  function nDownExcel(){
    var prefix = (location.href.indexOf("mda") >-1) ? "/mda" : "";
      location.href = prefix+"/api/excelCollection?sdate=" + startDate + "&edate=" + endDate;
      //exelType = "excel";
      //getListData(exelType);
  }
</script>
@endsection