@extends('common.layout')

<link rel="stylesheet" type="text/css" href="{{asset('css/view.css') }}" />

@section('content')
<div class="container">
  <section id="sec01" class="sec01">
    <div class="contWrap">
      <div class="vwContWrap">
        <div class="titleWrap">
          <h2 class="title txt23_700">표현 추가 신청</h2>
        </div>

        <div class="viewWrap wordView">
          <div class="viewList viewListMargin">
            <p class="listTitle txt18_600">기본정보</p>

            <div class="viewItem">
              <div class="viewTitle txt13_400">기존 표현</div>
              <div id="bword" class="viewVal txt14_400"></div>
            </div>
            <div class="viewItem">
              <div class="viewTitle txt13_400">권장 표현</div>
              <div class="viewVal txt14_400">
                <ul id="aword" class="dotList">

                </ul>
              </div>
            </div>
            <div class="viewItem">
              <div class="viewTitle txt13_400">허용 표현</div>
              <div id="allowd" class="viewVal txt14_400"></div>
            </div>
          </div>

          <div class="viewList">
            <p class="listTitle txt18_600">활용 예시</p>
            <div class="exBox">
              <div class="iconBox">
                <img class="crossIcon" src="{{asset('images/cross.svg') }}" alt="x아이콘">
                <p class="txt14_600">이렇게 쓰지 마세요</p>
              </div>
              <div class="viewItem">
                <div class="viewTitle txt13_400">예문</div>
                <div class="viewVal txt14_400">
                  <ul id="exabad" class="dotList">
                  </ul>
                </div>
              </div>
            </div>

            <div class="exBox">
              <div class="iconBox">
                <img class="checkIcon" src="{{asset('images/check.svg') }}" alt="체크 아이콘">
                <p class="txt14_600">이렇게 쓰세요</p>
              </div>
              <div class="viewItem">
                <div class="viewTitle txt13_400">예문</div>
                <div class="viewVal txt14_400">
                  <ul id="exagood" class="dotList">
                  </ul>
                </div>
              </div>
            </div>

          </div>

          <div class="viewList">
            <p class="listTitle txt18_600">개선 이유</p>
            <div class="viewItem">
              <div class="viewTitle txt13_400">개선 이유</div>
              <div id="reason" class="viewVal txt14_400"></div>
            </div>
          </div>

          <div class="viewList">
            <p class="listTitle txt18_600">가이드 참고</p>
            <div class="viewItem">
              <div class="viewTitle txt13_400">가이드라인</div>
                <div class="viewVal txt14_400">
                  <ul id="guide" class="dotList">
                  </ul>
                </div>
            </div>
          </div>

          <div class="viewList">
            <p class="listTitle txt18_600">사용여부</p>
            <div class="viewItem">
              <div class="viewTitle txt13_400">사용여부</div>
              <div id="isuse" class="viewVal txt14_400"></div>
            </div>
          </div>

          <div class="viewList">
            <p class="listTitle txt18_600">작성자 사번</p>
            <div class="viewItem">
              <div class="viewTitle txt13_400">작성자 사번</div>
              <div id="uname" class="viewVal txt14_400"></div>
            </div>
          </div>
        </div>

        <div class="btnBox">
          <button id="refuseBtn" type="button" class="btn01" onclick="nCancel()">거절</button>
          <button id="okeyBtn" type="button" class="btn01 btnBlue" onclick="nSuccess()">승인</button>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);

  // 파라미터에서 wdNo가져오기
  var wdNo          = clsTmsClass.getParams('no');
  var reasonData    = [];
  var menuData      = [];

  function nCancel(){
    if (!confirm("표현 추가 신청을 거절 하시겠습니까?"))return false;
    var params = {
        "no": wdNo,
        "mode": "DENY"
      }
     clsTmsClass.setDataInformation("/mda/api/db/pc", "GET", params , function(data){
        document.location.href="/mda/db/ad/lt";
     })
  }

  function nSuccess(){
    if (!confirm("표현 추가 신청을 승인 하시겠습니까?"))return false;
    // 241104 dana
    // 표현 추가 승인 시에 고객언어사전 로그 추가하기 위한 bword,uname 데이터 보냄
    var params = {
        "no": wdNo,
        "mode": "APPROVE",
        "bword": document.getElementById("bword").innerText,
        "uname": document.getElementById("uname").innerText
    }
    clsTmsClass.setDataInformation("/mda/api/db/pc", "GET", params ,function(data){
        document.location.href="/mda/db/ad/lt";
    });
  }

  function setInitData(){
    // 개선이유 데이터
    clsTmsClass.setDataInformation("{{ asset('api/reason.json') }}", "GET", "" , function(data){
      reasonData = JSON.parse(data);
     });

    // 가이드라인 데이터
    clsTmsClass.setDataInformation("{{ asset('api/gaide.json') }}", "GET", "" , function(data){
      menuData = JSON.parse(data).onedepth;
    });

     // 상세 데이터
    clsTmsClass.setDataInformation("/mda/api/db/pv", "GET", {"no":wdNo} , function(data){
      setViewData(JSON.parse(data));
    });
  }


  function setViewData(data) {
     // 기존 표현
     document.getElementById("bword").innerText = data.data.bword;

      // 권장 표현
      for(var i =0 ; i < data.data.aword.length;i++ ){
      document.getElementById("aword").innerHTML += '<li class="txt14_400 li_dot"> '+ data.data.aword[i]+'</li>';
      }

      // 허용 표현
      document.getElementById("allowd").innerText = data.data.allowd;

      // 활용예시
      if ( data.data.exabad.length > 1) {
          for (var j = 0; j < data.data.exabad.length; j++) {
              document.getElementById("exabad").innerHTML += '<li class="txt14_400 li_dot">' + data.data.exabad[j] + '</li>';
          }
      } else {
          document.getElementById("exabad").innerHTML += '<li class="txt14_400 li_dot">' + data.data.exabad.excode + '</li>';
      }

      if ( data.data.exagood.length > 1) {
          for (var k = 0; k < data.data.exagood.length; k++) {
              document.getElementById("exagood").innerHTML += '<li class="txt14_400 li_dot"> ' + data.data.exagood[k] + '</li>';
          }
      } else {
          document.getElementById("exagood").innerHTML += '<li class="txt14_400 li_dot"> ' + data.data.exagood.excode + '</li>';
      }

      console.log(data.data);
      //개선 이유
      document.getElementById("reason").innerText = isNaN(data.data.reason) ? data.data.reason : reasonData[data.data.reason];

      // 가이드참고
      if(Object.keys(data.data.guide).length !== 0) {
      for(var g=0;g < data.data.guide.length;g++){
        if (data.data.guide[g].guide01 == data.data.guide[g].guide02) {
            data.data.guide[g].guide02 = data.data.guide[g].guide03;
            data.data.guide[g].guide03 = "";
        }
        var inHtmls = ' <li class="gaideLineItem txt14_400 li_dot">';
        inHtmls +='  <span>'+menuData[data.data.guide[g].guide01].title+'</span>';
        inHtmls +='<span>'+menuData[data.data.guide[g].guide01].twodepth[data.data.guide[g].guide02].title+'</span>';
        inHtmls += data.data.guide[g].guide03 !=="" ?  '<span>'+ menuData[data.data.guide[g].guide01].twodepth[data.data.guide[g].guide02].threedepth[data.data.guide[g].guide03].title +'</span>' : "";
        inHtmls +='</li>';

        document.getElementById("guide").innerHTML += inHtmls;
      }
      }

       //사용여부
      document.getElementById("isuse").innerText = data.isuse == "Y" ? "사용" : "숨김";

      //작성자사번
       document.getElementById("uname").innerText = data.data.uname;
  }

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

</script>
@endsection