@extends('common.layout')
@section('commostyle')
    <link rel="stylesheet" type="text/css" href="{{asset('css/mm.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{asset('css/nt.css') }}" />
@endsection('commostyle')
@section('content')

    <div class="container">
        <section id="sec01" class="sec01">
            <ul class="breadCrumb">
                <li>홈</li>
                <li>고객언어사전</li>
            </ul>
            <div class="title titleSelect">
                <h2 class="txt23_700">고객언어사전</h2>
                <div class="searchWrap">
                    <select name="searchSelect" id="searchSelect" class="searchSelect txt12_400" onchange="nSearch();">
                        <!--<option value="전체">전체</option>-->
                        <option value="TXCloud">TXCloud</option>
                        <option value="타금융사">타금융사</option>
                    </select>
                    <input type="text" id="searchName" name="searchName" class="searchName" placeholder="검색어를 입력해주세요" onkeypress="enterEvent()">
                    <button id="searchBtn" type="button" class="searchBtn" onclick="nSearch();"><img src="../images/search_small.svg" alt="검색 icon"></button>
                </div>
            </div>
            <div>
                <div class="contWrap feedWrap">
                    <div class="topArea">
                        <p class="btn_box">
                            <button class="viewbtn tile active" data-count="8" onclick="clickview(this);"></button>
                            <button class="viewbtn list" data-count="20" onclick="clickview(this);"></button>
                        </p>
                        <p class="txt13_500 colorGray total" style="120px;">
                            총<span id="totalNum" class="colorBlue"></span>건
                            <span class="menu_label label txt11_500 add" onclick="plusWord();">표현추가신청</span>
                        </p>
                    </div>
                    <ul class="ds_li ds_li2 listBody"> <!--대시보드 리스트-->
                    </ul>
                    <div class="pageWrap">
                        <ul class="pageNum"></ul>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        var gLoadCall = 0;
        var myList= '<li class="">' +
            '<p class="fv_icon">'+
            '<button type="button" class="star {isFavorite}" data-id={0} data-type={8} onclick="addClassFnc(event)"></button>'+
            '</p>'+
            '<a href="javascript:{100}">'+
            '<div class="itemtop">'+
            '<div class="labelBox">'+
            '<p class="menu_label label txt11_500">고객언어사전</p>'+
            '</div>'+
            '</div>'+
            '<div class="itemcont">'+
            '<div class="explain">'+
            '<p class="bed"><img class="tit_icon" src="../images/non_check.png" alt="이렇게 쓰지마세요 아이콘">'+
            '<span class="txt14_400 textReduce">{2}</span>'+
            '</p>'+
            '{goodWord}'+
            '</div>'+
            '<div class="txt12_400 clamp_3 clamp_txt itemtext">'+
            '<p>개선 이유: {3}</p>'+
            '{Example}'+
            '</div>'+
            '</div>'+
            '</a>'+
            '</li>';

        function setInitData(){
            if (clsTmsClass.getParams("keyword")) {
                document.querySelector("#searchName").value = clsTmsClass.getParams("keyword");
            }

            if (clsTmsClass.getParams("keyfield")) {
                document.querySelector("#searchSelect").value = clsTmsClass.getParams("keyfield");
            }

            if (clsTmsClass.getParams("viewtype")) {

                var obj      =  document.querySelectorAll(".btn_box button");
                var element  = '';
                for(var i=0;i<obj.length;i++){
                    element   = obj[i];
                    if (element.dataset.count == clsTmsClass.getParams("viewtype")) {
                        element.classList.add("active");
                        if (element.classList.contains("list")){
                            document.querySelector('.ds_li').classList.add('listv');
                        }
                    } else {
                        if (element.classList.contains("active")) {
                            element.classList.remove("active")
                        }
                        if (!element.classList.contains("list")){
                            document.querySelector('.ds_li').classList.remove('listv')
                        }
                    }
                }
            }
            getData();
        }



        //보기형식 변경 이벤트
        function clickview(e){
            clsUrlSearchParam.set('viewtype', e.dataset.count);
            clsUrlSearchParam.set('page', clsUrlSearchParam.get("page") ?  clsUrlSearchParam.get("page") : 1);
            clsUrlSearchParam.set('keyword', document.querySelector("#searchName").value);
            clsUrlSearchParam.set('keyfield', document.querySelector("#searchSelect option:checked").value);
            location.href = location.pathname + '?' + clsUrlSearchParam.toString();
        }

        function nSearch(){
            clsUrlSearchParam.set('page', 1);
            clsUrlSearchParam.set('keyword', document.querySelector("#searchName").value);
            clsUrlSearchParam.set('keyfield', document.querySelector("#searchSelect option:checked").value);
            location.href = location.pathname + '?' + clsUrlSearchParam.toString();
        }

        function getData(getPage) {
            if(typeof getPage == 'undefined'){
                getPage = 0;
            }

            var keyfield = "";
            if (document.querySelector("#searchSelect option:checked").value) {
                keyfield = document.querySelector("#searchSelect option:checked").value;
            }

            var keyword  = document.querySelector("#searchName").value;

            getPage = getPage == 0 ? getPage : 1;
            var dispmd = document.querySelector(".viewbtn.active").dataset.count;
            var showCnt = dispmd;

            switch(keyfield) {
                case "전체" :
                    keyfield = "app";
                    break;
                case "TXCloud" :
                    keyfield = "company";
                    break;
                case "타금융사" :
                    keyfield = "other";
                    break;
            }

            switch(dispmd) {
                case "8":
                    dispmd = 'card';
                    break;
                case "20":
                    dispmd = 'label';
                    break;
            }

            try {
                const initJson = { apiUrl : "/frn/api/wd/sr", method: "GET", data: {"keyword": keyword, "keyfield": keyfield, "page" : getPage, "dispmd" : dispmd} }
                const listType = { type: "pull", listCount: showCnt }
                clsListClass.setSimpleInit(initJson, setCallBackFnc, myList, listType,clsTmsClass);

            }catch (error) {

            }
        }

        function setCallBackFnc(json){

            try {
                // clsTmsClass.setRefresPop();
                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, myList);

                if (clsListClass.currentSetData.data.total_num == 0) {
                    document.querySelector(".listBody").classList.add("noList");
                }

            } catch(e){
                //clsTmsClass.setRefresPop();
                if ( gLoadCall  < 1){
                    gLoadCall++;
                    window.setTimeout(setInitData,500);
                }
            }
        }

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


        function plusWord(){
            clsListClass.openItemView("", "/frn/ct/ardpop", "", "", "");
        }

        function enterEvent(){
            if (window.event.keyCode == 13) {
                nSearch()
            }
        }

    </script>

@endsection