@extends('common.layout')
<link rel="stylesheet" type="text/css" href="{{asset('css/mm.css') }}" />
<script defer type="text/javascript" src="{{asset('js/chart@2.8.0.min.js') }}"></script>
<script type="text/javascript" src="{{asset('cmm/clsUrlSearchParam.js') }}"></script>
@section('content')
<div id="mainContainer" class="container">
  <section id="sec01" class="sec01">
    <div class="contWrap">
      <!-- 콘텐츠 시작 -->
      <div class="mainContWrap">
        <div class="leftCont">
          <div class="leftTop">
            <p class="contTitle txt18_600">피드 콘텐츠</p>
            <div>
              <img src="{{asset('images/mainFeed.png') }}" alt="피드 이미지" />
              <p class="feedResult">총 <span id="feedData"></span>건</p>
            </div>
          </div>

          <div class="leftBot">
            <a href="/mda/ds/fav" class="contArrowBtn txt18_600">자주 교정한 표현 <img src="{{asset('images/arrow10x19.svg')}}" alt="화살표 아이콘" /></a>
            <div class="tableWrap scroll">
              <table>
                <colgroup>
                  <col width="142px" />
                  <col width="142px" />
                  <col width="70px" />
                </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 id="prfData">
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="cenCont">
          <div class="cenTop">
            <p class="contTitle txt18_600">고객언어사전</p>
            <div class="termBox">
              <img src="{{asset('images/mainBook.png')}}" alt="책 이미지" />
              <div>
                <p>
                  <span class="txt14_400">타금융사</span>
                  <span class="termResult"><span id="wlwordData"></span> 건</span>
                </p>
                <p>
                  <span class="txt14_400">TXCloud</span>
                  <span class="termResult"><span id="sfwordData"></span> 건</span>
                </p>
              </div>
            </div>
          </div>
          <div class="cenBot">
            <a href="/mda/ds/sr" class="contArrowBtn txt18_600">자주 검색한 표현 <img src="{{asset('images/arrow10x19.svg')}}" alt="화살표 아이콘" /></a>
            <div class="tableWrap scroll">
              <table>
                <colgroup>
                  <col width="292px" />
                  <col width="70px" />
                </colgroup>
                <thead>
                  <tr>
                    <th><p class="txt13_400">항목</p></th>
                    <th><p class="txt13_400">검색 횟수</p></th>
                  </tr>
                </thead>
                <tbody id="wdData">
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!--  -->
        <!-- 차트 -->
        <div class="chartWrap">
          <div class="chartTop">
            <div class="chartUtilsBox">
              <a href="/mda/ds/pg/lt" class="contArrowBtn txt18_600">페이지별 접속 통계 <img src="{{asset('images/arrow10x19.svg')}}" alt="화살표 아이콘" /></a>
              <div class="dateWrap">
                <div class="dateBox">
                  <div class="dateButtonBox">
                    <button data-months="1" class="active pgDateBtn" type="button" onclick="btnCal01(1)">1개월</button>
                    <button data-months="3" class="pgDateBtn" type="button" onclick="btnCal01(3)">3개월</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="chartBox">
              <canvas id="myChartTop" width="760" height="272"></canvas>
            </div>
          </div>
          <div class="chartBot">
            <div class="chartUtilsBox">
              <a href="/mda/ds/prf/lt" class="contArrowBtn txt18_600">교정 횟수 통계 <img src="{{asset('images/arrow10x19.svg')}}" alt="화살표 아이콘" /></a>
              <div class="dateWrap">
                <div class="dateBox">
                  <div class="dateButtonBox">
                    <button data-months="1" class="active wdDateBtn" type="button" onclick="btnCal02(1)">1개월</button>
                    <button data-months="3" class="wdDateBtn" ype="button" onclick="btnCal02(3)">3개월</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="chartBox">
              <canvas id="myChartBot" width="760" height="272"></canvas>
            </div>
          </div>
          <!-- <canvas id="myChart" width="400" height="400"></canvas> -->
        </div>
      </div>
    </div>
    <!-- 콘텐츠 끝 -->
  </section>
</div>
<script>
var gLoadCall = 0;
var pgMonth = 1; // 페이지통계 개월수
var wdMonth = 1; // 교정횟수 통계 개월수

function setMainData(sjson) {
  var fetchData = null;
    try {
        if ( sjson == null || typeof sjson == 'undefined')return false;
        fetchData = JSON.parse(sjson);
    } catch(e){
      fetchData = null;
    }

    if ( fetchData == null){
      alert("정보를 불러오는 중 오류가 발생했습니다. 잠시후 이용하세요.");
      return;
    }

    try{
        // 피드 콘텐츠 건 수
        var feedData = fetchData.data.feed;
        document.querySelector("#feedData").innerText =  parseInt(feedData).toLocaleString();

        // 용어사전 건 수 (wlword:타금융사 , sfword:TXCloud)
        var wordChartData = fetchData.data.word;
        document.querySelector("#wlwordData").innerText =  parseInt(wordChartData.wlword).toLocaleString();
        document.querySelector("#sfwordData").innerText =  parseInt(wordChartData.sfword).toLocaleString();

        // 자주 교정한 표현 테이블
        var prfData = fetchData.data.prf;
         if(prfData.length > 0) {
          var prfList = null;
          var item = null;
          var i = 0;
          var nlen =prfData.length;
         for(i; i < nlen; i++){
              item    = prfData[i];
              prfList = document.createElement("tr");
              prfList.innerHTML = '<td><p class="txt14_400">' + item.beforwd + '</p></td>';
              prfList.innerHTML += '<td><p class="txt14_400 blue">' + item.afterwd +'</p></td>';
              prfList.innerHTML += '<td><p class="txt14_400">' + item.cnt + '</p></td>';
              document.querySelector("#prfData").appendChild(prfList);
          }
        }

        // 자주 검색한 용어 테이블
        var wdData = fetchData.data.wd;
        nlen = wdData.length;
        if(wdData.length > 0) {
          var wdList = null;
          var item = null;
          for(i=0; i < nlen; i++){
            item    = wdData[i];
            wdList = document.createElement("tr");
            wdList.innerHTML = '<td><p class="txt14_400">' + item.beforwd + '</p></td>';
            wdList.innerHTML += '<td><p class="txt14_400">' + item.cnt +'</p></td>';
            document.querySelector("#wdData").appendChild(wdList);
          }
        }
   } catch(e){
        if ( gLoadCall < 1){
            gLoadCall++
            window.setTimeout(setInitData,500);
        }
    }
}

// 페이지별 접속통계 차트 뿌리기
function setPgChartData(sjson) {
  var chartData = JSON.parse(sjson);
  //var topChartData = chartData.data.stc;
  var topChartData = getChartData(chartData.data);
  createChart(topChartData, 'bar', '페이지별 접속 통계', 'barTop', "", "");
}


function getChartData(data, type="pg"){
   var inLabel = [];
   var inData  = [];
   var labelName = "페이지별 접속 통계";

   if(type == "wd") {
       data = Object.values(data);
       labelName = "교정 횟수 통계";
       for(var i=0;i<data.length;i++){
           inLabel[i] = data[i].RectifyType;
           inData[i]  = data[i].cnt;
       }
   } else {
       for(var i=0;i<data.length;i++){
           for(var key in data[i]){
               if ( key !='cnt'){
                   inLabel[i] = data[i][key];
               } else {
                   inData[i]  = data[i].cnt;
               }
           }
       }
   }
  var chartData = {
        labels: inLabel,
        datasets : [
          {
            "label" : labelName,
            "data" : inData,
            "fill" : false,
            "backgroundColor": "#003CDC",
            "tension": 0.1,
          }
        ]
      }

  return chartData;
}

// 교정 횟수 통계 차트 뿌리기
function setWdChartData(sjson) {
  var chartData     = JSON.parse(sjson);
  //var botChartData = chartData.data.stc;
  var botChartData  = getChartData(chartData.data, "wd");
  var botChartLabel =  botChartData.labels;
  var strLog        = '';
  var arLabels      = [];
  for(var i=0;i< botChartLabel.length;i++){
        // switch(botChartLabel[i]){
        //     case "Register"       : strLog = '등록';break;
        //     case "Edit"           : strLog = '수정';break;
        //     case "Delete"         : strLog = '삭제';break;
        //     case "Delete Cancel"  : strLog = '삭제 취소';break;
        //     case "Use"            : strLog = '사용';break;
        //     case "Hidden"         : strLog = '숨김';break;
        //   }
          switch(botChartLabel[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;
          }
        arLabels[i] = strLog;
  }
  botChartData.labels = arLabels;
  createChart(botChartData, 'bar', '교정 횟수 통계', 'barBot', "", "");
}

 function btnCal01(pgMonth){
      clsTmsClass.setDataInformation("/mda/api/hm/st", "GET", {"cate":"pg", nmonth:pgMonth} , setPgChartData);
 }

 function btnCal02(pgMonth){
      clsTmsClass.setDataInformation("/mda/api/hm/st", "GET", {"cate":"wd", nmonth:pgMonth} , setWdChartData);
 }

function setInitData(){
    clsTmsClass.setDataInformation("/mda/api/hm/hm", "GET", {"nmonth":"1"} , setMainData);
    clsTmsClass.setDataInformation("/mda/api/hm/st", "GET", {"cate":"pg", nmonth:pgMonth} , setPgChartData);
    clsTmsClass.setDataInformation("/mda/api/hm/st", "GET", {"cate":"wd", nmonth:wdMonth} , setWdChartData);
}

function setIntResize(){
  if (document.referrer.indexOf("uxw") == -1) {
      /*var screenWidth     = window.screen.width;
      var screenHeight    = window.screen.height;
      window.resizeTo(screenWidth, screenHeight);

      var popupLeft       = (screenWidth - window.outerWidth) / 2;
      var popupTop        = (screenHeight - window.outerHeight) / 2;
      window.moveTo(popupLeft, popupTop);  */
      // 변경 소스
      window.moveTo(0, 0);
      window.resizeTo(window.screen.availWidth, window.screen.availHeight);
  }
}
window.onload = function(){
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  setIntResize();
  setInitData();
}

</script>
@endsection