@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">TXCloud 권장 표현</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="isad" class="viewVal txt14_400"></div>
            </div>
            <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>

        <div class="btnBox">
          <button id="backBtn" type="button" class="btn01"  onclick="history.back()">목록으로</button>
          <button id="deleteBtn" type="button" class="btn01" onclick="delFnc()" style="margin-right:12px">삭제</button>
          <button id="modifyBtn" type="button" class="btn01 btnBlue" onclick="editFnc()">수정</button>
        </div>
      </div>
    </div>
  </section>
</div>
<script>
  // 파라미터에서 wdNo가져오기
  clsUrlSearchParam.init(location.search);
  clsTmsClass.setSearchParam(clsUrlSearchParam);
  clsListClass.setSearchParamClass(clsUrlSearchParam);

  var wdNo = clsTmsClass.getParams('no');
  var menuData;
  var reasonData;

  function delFnc(){
    if(!confirm("삭제 하시겠습니까?"))return;
    var formData = {};
    formData.no = wdNo;
    formData.mode = "sf";
    clsTmsClass.setDataInformation('/mda/api/db/de', "POST" ,formData, function(data){
        var fetchData = JSON.parse(data);
        if(fetchData.code == 100 && fetchData.msg === "SUCCESS") {
          alert('삭제 되었습니다.');
          location.href="lt"; // 목록으로 이동
        } else {
          alert("삭제 중 오류가 발생 했습니다. 잠시후 이용하세요");
        }
      });


  }

  function editFnc(){
    location.href = "wr?no="+wdNo;
  }

  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/vw", "GET", {"no":wdNo, "mode": "sf"} , function(data){
      setViewData(JSON.parse(data));
     });
  }

  function setViewData(data) {
	console.log("data : ", data);
      // 상품광고 표현 여부
      document.getElementById("isad").innerText = data.data.isad == "Y" ? "사용" : "미사용";

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

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

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

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

      for(var k=0;k< data.data.exagood.length;k++){
        txtAword  = (data.data.exagood[k] != null) ? data.data.exagood[k] : '';
        if ( txtAword[0] == ',')txtAword = txtAword.substr(1);
        document.getElementById("exagood").innerHTML += '<li class="txt14_400 li_dot"> '+ txtAword+'</li>';
      }
      //개선 이유
      document.getElementById("reason").innerText = 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 = "";
            }

            let inHtmls = ' <li class="gaideLineItem txt14_400 li_dot">';
            inHtmls +='  <span>'+menuData[data.data.guide[g].guide01].title+'&nbsp;&nbsp;</span>';
            inHtmls +=' <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+menuData[data.data.guide[g].guide01].twodepth[data.data.guide[g].guide02].title+'</span>';
            inHtmls += data.data.guide[g].guide03 !=="" ?  '  <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+ 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.data.isuse == "Y" ? "사용" : "숨김";
   }

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