<template>
    <div class="gd-10 Bi001-page container">
        <div class="wrap pd2">
            <div class="wrap-title pb1 mb1 flex justify-between">
                <h1>(회계) 공동 코드 등록</h1>
                <div class="flex justify-end  gd-5">

                    <div class="flex justify-between button-wrap">
                        <button class="rest-btn">초기화</button>
                        <button class="save-btn">저장</button>
                    </div>


                </div>
            </div>
            <div class="content  flex">
                <div class=" gd-2 list-wrap   ">
                    <div class="content-title flex justify-between mb1">
                        분류목록
                    </div>
                    <div class="content-table pd4 ">
                        <div style="border-top: 1px solid var(--borderlightgray);">

                            <table class="list-table">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 30%;">
                                    <col style="width: 70%;">

                                </colgroup>
                                <thead>
                                    <tr class="table-header"
                                        style="background-color: var(--tableblue); color: var(--navbarblue); ">
                                        <th>
                                            <select v-model="selectedOption">
                                                <option v-for="option in options" :value="option.id" :key="option.id">
                                                    {{ option.text }}
                                                </option>
                                            </select>

                                        </th>
                                        <th>
                                            <select v-model="selectedOption">
                                                <option class="text-lf" v-for="name in names" :value="name.id"
                                                    :key="name.id">
                                                    {{ name.text }}
                                                </option>
                                            </select>

                                        </th>


                                    </tr>
                                </thead>
                                <tbody class="table-border">
                                      <!-- <tr v-for="codeNum in filteredCodeList" :key="codeNum.id">
                                        <td :class="{ 'selected': selectedId === codeNum.id }">{{ codeNum.pathNum }}
                                        </td>
                                        <td @click="clickCodeName(codeNum.id)"
                                            :class="{ 'selected': selectedId === codeNum.id }" class="wrap-text">
                                            {{ codeNum.pathName }}
                                        </td>
                                    </tr> -->
                                    <tr v-for="(commonCode, idx) in commonCodeList" :key="idx">
                                        <td :class="{ 'selected': selectedId === idx }">{{ commonCode.rcodex }}
                                        </td>
                                        <td @click="clickCodeName(commonCode, idx)"
                                            :class="{ 'selected': selectedId === idx }" class="wrap-text">
                                            {{ commonCode.nmcodx }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="content gd-10 " style="width: 100%; height: 100%; padding-left: 30px;">
                    <div>

                        <div class="flex justify-between">
                            <div class="content-title mb1 list-box">코드등록</div>
                            <div><button class="blue-small-btn" style="color:var(--navbarblue);">등록하기</button></div>
                        </div>
                        <div class=" flex justify-between section-wrap pd1 mb2 height">
                            <table class="Bi001-table" style=" width: 100%;">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 5%;">
                                    <col style="width: 19%;">
                                    <col style="width: 5%;">
                                    <col style="width: 19%;">
                                    <col style="width: 10%;">
                                    <col style="width: 10%;">
                                    <col style="width: 10%;">
                                    <col style="width: 20%;">
                                    <!-- <col style="width: 12%;"> -->

                                </colgroup>
                                <!-- <tbody v-for="(codeInput, id) in filteredCodeBox" :key="id" class="filter-table">
                                    <tr>
                                        <th>분류코드</th>
                                        <td><input type="text"></td>
                                        <th>분류명</th>
                                        <td><input type="text"></td>
                                        <th>코드</th>
                                        <td><input type="text" class="input-wrap"  ></td>
                                        <td colspan="2">
                                        <th >정렬순서</th>
                                        <td><input type="text" class="input-wrap" style="width: 100%;"></td>
                                        <th>사용여부</th>
                                        <td><input type="checkbox" class="ui-checkbox"></td>
                                        </td>


                                    </tr>
                                    <tr v-show="activeItemId === codeInput.id">
                                        <th>코드명</th>
                                        <td><input type="text"></td>
                                        <th>코드약명</th>
                                        <td><input type="text"  ></td>
                                        <th>{{ codeInput.pathName1 }}</th>
                                        <td><input type="text"></td>
                                        <th>{{ codeInput.pathName2 }}</th>
                                        <td><input type="text"></td>
                                    </tr>
                                    <template v-if="showClass1">
                                        <tr>
                                            <th>{{ codeInput.pathName7 }}</th>
                                            <td><input type="text" name="" id=""></td>
                                            <th>{{ codeInput.pathName8 }}</th>
                                            <td><input type="text" name="" id=""></td>
                                            <th>{{ codeInput.pathName9 }}</th>
                                            <td><input type="text" name="" id=""></td>
                                            <th>{{ codeInput.pathName10 }}</th>
                                            <td><input type="text" name="" id=""></td>

                                        </tr>
                                    </template>
                                    <template v-else>
                                        <tr>
                                            <th>{{ codeInput.pathName7 }}</th>
                                            <td><input type="text" name="" id=""></td>
                                            <th>{{ codeInput.pathName8 }}</th>
                                            <td><input type="text" name="" id=""></td>
                                            <th>{{ codeInput.pathName9 }}</th>
                                            <td><input type="text" name="" id="" style="width: 100%;"></td>
                                            <th>{{ codeInput.pathName10 }}</th>
                                            <td class="flex " style="flex-wrap: nowrap;">
                                            <td class="mr1" style="width:80%;"><input type="text" name="" id=""></td>
                                            <td style="width:20%;"> <button @click="openModal" class="blue-btn search-btn"></button>
                                            </td>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody> -->
                                <tbody class="filter-table">
                                    <tr>
                                        <th>분류코드</th>
                                        <td><input type="text" :value="commonCodeOne.gbncod"></td>
                                        <th>분류명</th>
                                        <td><input type="text" :value="bunnam"></td>
                                        <th>코드</th>
                                        <td><input type="text" class="input-wrap"  style="width: 100%;"></td>
                                        <td colspan="2">
                                            <th >정렬순서</th>
                                            <td><input type="text" class="input-wrap" style="width: 100%;" :value="commonCodeOne.ordsor"></td>
                                            <th>사용여부</th>
                                            <td><input type="checkbox" class="ui-checkbox" v-model="isChecked"></td>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>코드명</th>
                                        <td><input type="text" v-model="commonCodeOne.nmcodx"></td>
                                        <th>코드약명</th>
                                        <td><input type="text" v-model="commonCodeOne.shncod"></td>
                                        <th>{{ category.rref1x == null ? '관리항목1' : category.rref1x }}</th>
                                        <td><input type="text" v-model="commonCodeOne.rref1x"></td>
                                        <th>{{ category.rref2x == null ? '관리항목2' : category.rref2x }}</th>
                                        <td><input type="text" v-model="commonCodeOne.rref2x"></td>
                                    </tr>
                                    <tr>
                                        <th>{{ category.rref3x == null ? '관리항목3' : category.rref3x }}</th>
                                        <td><input type="text" style="width: 100%;" v-model="commonCodeOne.rref3x"></td>
                                        <th>{{ category.rref4x == null ? '관리항목4' : category.rref4x }}</th>
                                        <td><input type="text" v-model="commonCodeOne.rref4x"></td>
                                        <th>{{ category.rref5x == null ? '관리항목5' : category.rref5x }}</th>
                                        <td><input type="text" v-model="commonCodeOne.rref5x"></td>
                                        <th>{{ category.rref6x == null ? '관리항목6' : category.rref6x }}</th>
                                        <td><input type="text" v-model="commonCodeOne.rref6x"></td>
                                    </tr>
                                    <tr>
                                        <th>{{ category.rref7x == null ? '관리항목7' : category.rref7x }}</th>
                                        <td><input type="text" v-model="commonCodeOne.rref7x"></td>
                                        <th>{{ category.rref8x == null ? '관리항목8' : category.rref8x }}</th>
                                        <td><input type="text" v-model="commonCodeOne.rref8x"></td>
                                        <th>{{ category.rref9x == null ? '관리항목9' : category.rref9x }}</th>
                                        <td><input type="text" v-model="commonCodeOne.rref9x"></td>
                                        <th>{{ category.rref10 == null ? '관리항목10' : category.rref10 }}</th>
                                        <td><input type="text" v-model="commonCodeOne.rref10"></td>
                                        <td v-if="category.rcodex === '003'" class="flex " style="flex-wrap: nowrap;">
                                            <td class="mr1" style="width:80%;">
                                                <input type="text" name="" id="">
                                            </td>
                                            <td style="width:20%;"> 
                                                <button @click="openModal" class="blue-btn search-btn"></button>
                                            </td>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>
                    <!-- 검색버튼 클릭시에 나타나는 모달 -->
                    <div v-show="searchModal" class="modal-wrapper">
                        <div class="modal-container flex flex-column">
                            <div>
                                <div class=" mb2">

                                    <div class="flex justify-between modal-title mb2">
                                        <h1>사원찾기</h1>
                                        <div>
                                            <button class="close-btn " @click="closeModal"></button>
                                        </div>
                                    </div>
                                    <div class="mb2" style="border-bottom: 1px solid var(--borderlightgray);">
                                        <div class="flex justify-between mb2">
                                            <div class="content-title mr3 ">
                                                조회조건
                                            </div>
                                            <div class="flex " style="flex-wrap: nowrap;">
                                                <p class="text-rg mr1" style=" width: 100px;">사번 및 성명</p>
                                                <input type="text" class="mr1">
                                                <button class="blue-btn"
                                                    style="padding-top: 7px ; padding-bottom: 7px; width: 24%;">조회</button>
                                            </div>

                                            <div class="flex " style="flex-wrap: nowrap;">
                                                <p class="text-rg mr1" style=" width: 100px;">담당자/부서장</p>
                                                <input type="text" class="mr1">
                                                <button class="blue-btn"
                                                    style="padding-top: 7px ; padding-bottom: 7px; width: 24%; word-break: keep-all;">적용</button>
                                            </div>

                                        </div>

                                    </div>


                                    <div class="flex-column ">
                                        <div>
                                            <div class="content-title mb2">
                                                사원목록
                                            </div>
                                            <div style="width: 100%;" class="flex justify-between">
                                                <div>
                                                    <p>☛ 선택할 사원을 아래 목록에서 마우스로 더블 클릭하세요.</p>
                                                </div>

                                                <div class="flex justify-between align-center"
                                                    style="flex-wrap: nowrap;">
                                                    <input type="checkbox" id="a" class="ui-checkbox mr3">
                                                    <label for="a"
                                                        style=" width: 70px; font-size: 1.3rem;">퇴직사원포함</label>
                                                </div>
                                            </div>

                                        </div>
                                        <div style="border-top: 1px solid var(--borderlightgray);">
                                            <table class="list-table">
                                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->

                                                <thead>
                                                    <tr class="table-header">
                                                        <th>사원번호</th>
                                                        <th>성명</th>
                                                        <th>부서</th>
                                                        <th>직위</th>
                                                        <th>입사일</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="table-border">
                                                    <tr v-for="(modalPath) in modalList">
                                                        <td>{{ modalPath.no }}</td>
                                                        <td>{{ modalPath.name }}</td>
                                                        <td>{{ modalPath.time }}</td>
                                                        <td>{{ modalPath.spot }}</td>
                                                        <td>{{ modalPath.date }}</td>

                                                    </tr>

                                                    <tr v-if="postList === 0">
                                                        <td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="table-border" style="    height: calc(100% - 251px);">
                        <div class="content-title mb1">코드목록</div>
                        <div class="" style="height: 100%; overflow-y: auto;">


                            <table class="list-table" style="overflow-y: auto;">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 5%;">
                                    <col style="width: 10%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 3%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 6%;">
                                    <col style="width: 6%;">
                                    <col style="width: 5%;">



                                </colgroup>
                                <!-- <thead class="list-table">
                                    <tr v-for="(codeInput, id) in filteredCodeBox" :key="id"
                                        style="background-color: var(--tableblue);">
                                        <th>코드</th>
                                        <th>코드명칭</th>
                                        <th>코드약칭</th>
                                        <th>정렬순서</th>
                                        <th>사용</th>
                                        <th class="wrap-text">{{ codeInput.pathName1 }}</th>
                                        <th>{{ codeInput.pathName2 }}</th>
                                        <th>{{ codeInput.pathName3 }}</th>
                                        <th>{{ codeInput.pathName4 }}</th>
                                        <th>{{ codeInput.pathName5 }}</th>
                                        <th>{{ codeInput.pathName6 }}</th>
                                        <th>{{ codeInput.pathName7 }}</th>
                                        <th>{{ codeInput.pathName8 }}</th>
                                        <th>{{ codeInput.pathName9 }}</th>
                                        <th>{{ codeInput.pathName10 }}</th>
                                        <th>{{ codeInput.pathName11 }}</th>
                                        <th class="wrap-text">{{ codeInput.pathName12 }}</th>



                                    </tr>
                                </thead> -->
                                <thead class="list-table">
                                    <tr style="background-color: var(--tableblue);">
                                        <th>코드</th>
                                        <th>코드명칭</th>
                                        <th>코드약칭</th>
                                        <th>정렬순서</th>
                                        <th>사용</th>
                                        <th class="wrap-text">{{ category.rref1x == null ? '관리항목1' : category.rref1x }}</th>
                                        <th>{{ category.rref2x == null ? '관리항목2' : category.rref2x }}</th>
                                        <th>{{ category.rref3x == null ? '관리항목3' : category.rref3x }}</th>
                                        <th>{{ category.rref4x == null ? '관리항목4' : category.rref4x }}</th>
                                        <th>{{ category.rref5x == null ? '관리항목5' : category.rref5x }}</th>
                                        <th>{{ category.rref6x == null ? '관리항목6' : category.rref6x }}</th>
                                        <th>{{ category.rref7x == null ? '관리항목7' : category.rref7x }}</th>
                                        <th>{{ category.rref8x == null ? '관리항목8' : category.rref8x }}</th>
                                        <th>{{ category.rref9x == null ? '관리항목9' : category.rref9x }}</th>
                                        <th>{{ category.rref10 == null ? '관리항목10' : category.rref10 }}</th>
                                    </tr>
                                </thead>
                                <!-- <tbody style="height: 100%; ">
                                    <tr v-for="(codePath) in listName">
                                        <td>{{ codePath.code }}</td>
                                        <td>{{ codePath.name }}</td>
                                        <td>{{ codePath.colName }}</td>
                                        <td>{{ codePath.order }}</td>
                                        <td><input type="checkbox" checked name="" id="" class="ui-checkbox"></td>
                                        <td>{{ codePath.list1 }}</td>
                                        <td>{{ codePath.list2 }}</td>
                                        <td>{{ codePath.list3 }}</td>
                                        <td>{{ codePath.list4 }}</td>
                                        <td>{{ codePath.list5 }}</td>
                                        <td>{{ codePath.list6 }}</td>
                                        <td>{{ codePath.list7 }}</td>
                                        <td>{{ codePath.list8 }}</td>
                                        <td>{{ codePath.list9 }}</td>
                                        <td>{{ codePath.list10 }}</td>
                                        <td>{{ codePath.list11 }}</td>
                                        <td>{{ codePath.list12 }}</td>

                                    </tr>

                                    <tr v-if="postList === 0">
                                        <td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td>
                                    </tr>
                                </tbody> -->
                                <tbody style="height: 100%; ">
                                    <tr v-for="(item,idx) in codeListByCommonCode" :key="idx" @click="commonCodeDetail(item)">
                                        <td>{{ item.rcodex }}</td>
                                        <td>{{ item.nmcodx }}</td>
                                        <td>{{ item.shncod }}</td>
                                        <td>{{ item.ordsor }}</td>
                                        <td><input type="checkbox" checked name="" id="" class="ui-checkbox"></td>
                                        <td>{{ item.rref1x }}</td>
                                        <td>{{ item.rref2x }}</td>
                                        <td>{{ item.rref3x }}</td>
                                        <td>{{ item.rref4x }}</td>
                                        <td>{{ item.rref5x }}</td>
                                        <td>{{ item.rref6x }}</td>
                                        <td>{{ item.rref7x }}</td>
                                        <td>{{ item.rref8x }}</td>
                                        <td>{{ item.rref9x }}</td>
                                        <td>{{ item.rref10 }}</td>
                                    </tr>

                                    <tr v-if="postList === 0">
                                        <td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            selectedOptionId: null,
            showClass1: true,
            activeItemId: 0,
            searchModal: false,
            selectedId: null,
            modalList: [
                { no: '150228', name: '박정현', time: 'IT팀', spot: '사원', date: '2015-03-13' }
            ],
            listName: [
                { code: '000101', name: '합계잔액시산표', order: '0', list1: '1', list2: '2' },
                { code: '000101', name: '합계잔액시산표', order: '0', list1: '1', list2: '2' },
                { code: '000101', name: '합계잔액시산표', order: '0', list1: '1', list2: '2' },
                { code: '000101', name: '합계잔액시산표', order: '0', list1: '1', list2: '2' },
    
         
            ],
            options: [
                { text: '코드분류', value: '' },
                { text: '(ALL)', value: 'ALL' },
                { text: '(CUSTOM)', value: 'CUSTOM' },
                { id: 0, text: '001', value: 'option1' },
                { id: 1, text: '002', value: 'option2' },
                { id: 2, text: '003', value: 'option3' },
                { id: 3, text: '004', value: 'option4' },
                { id: 4, text: '005', value: 'option5' },
                { id: 5, text: '006', value: 'option6' },
                { id: 6, text: '007', value: 'option7' },
                { id: 7, text: '008', value: 'option8' },
                { id: 8, text: '009', value: 'option9' },
                { id: 9, text: '010', value: 'option10' },
                { id: 10, text: '011', value: 'option11' },
                { id: 11, text: '012', value: 'option12' },
                { id: 12, text: '013', value: 'option13' },
                { id: 13, text: '014', value: 'option14' },
                { id: 14, text: '015', value: 'option15' },

            ],
            names: [
                { text: "코드분류명" },
                { text: "제무제표양식종류" },
                { text: "증빙구분" },
                { text: "카드번호" },
                { text: "사업장(회계)" },
                { text: "국세청전자(세금)계산서수정사유코드" },
                { text: "은행코드" },
                { text: "지급조건" },
                { text: "어음종류" },
                { text: "어음구분" },
                { text: "차입종류" },
                { text: "원금상환방법" },
                { text: "이자납입방법" },
                { text: "전표결제진행상태" },
                { text: "사원번호별 계정과목 조회(사번)" },
                { text: "국책과제 카드" },
            ],
            codeList: [
                { id: 0, pathNum: "001", pathName: "제무제표양식종류", selected: true },
                { id: 1, pathNum: "002", pathName: "증빙구분" },
                { id: 2, pathNum: "003", pathName: "카드번호" },
                { id: 3, pathNum: "004", pathName: "사업장(회계)" },
                { id: 4, pathNum: "005", pathName: "국세청전자(세금)계산서 수정사유코드" },
                { id: 5, pathNum: "006", pathName: "은행코드" },
                { id: 6, pathNum: "007", pathName: "지급조건" },
                { id: 7, pathNum: "008", pathName: "어음종류" },
                { id: 8, pathNum: "009", pathName: "어음구분" },
                { id: 9, pathNum: "010", pathName: "차입종류" },
                { id: 10, pathNum: "011", pathName: "원금상환방법" },
                { id: 11, pathNum: "012", pathName: "이자납입방법" },
                { id: 12, pathNum: "013", pathName: "전표결제진행상태" },
                { id: 13, pathNum: "014", pathName: "사원번호별 계정과목 조회(사번)" },
                { id: 14, pathNum: "015", pathName: "국책과제 카드" },
            ],
            codeBox: [
                // 제무제표양식종류
                { id: 0, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 증빙구분
                { id: 1, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 카드번호
                { id: 2, pathName1: "카드번호", pathName2: "사업장구분", pathName3: "관리부서코드", pathName4: "NBS코드", pathName5: "카드수령일", pathName6: "유형", pathName7: "한도", pathName8: "유효기간(CVC)", pathName9: "사용부서명", pathName10: "담당자/부서장", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 사업장(회계)
                { id: 3, pathName1: "법인번호", pathName2: "사업자번호", pathName3: "대표자명", pathName4: "업태", pathName5: "종목", pathName6: "대표전화", pathName7: "사업장주소", pathName8: "설립년도", pathName9: "사업장 정식명칭", pathName10: "유형", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 국세청전자(세금)계산서 수정사유코드
                { id: 4, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 은행코드
                { id: 5, pathName1: "NBS은행코드", pathName2: "어음할인율(%)", pathName3: "할인한도액", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 지급조건
                { id: 6, pathName1: "현금/어음/법인카드", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 어음종류
                { id: 7, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 어음구분
                { id: 8, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 차입종류
                { id: 9, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 원금상환방법
                { id: 10, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 이자납입방법
                { id: 11, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 전표결제진행상태
                { id: 12, pathName1: "관리항목1", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 전표결재진행상태
                { id: 13, pathName1: "계정과목  (,로구분)", pathName2: "관리항목2", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
                // 국책과제 카드
                { id: 14, pathName1: "프로젝트 코드", pathName2: "사업장구분", pathName3: "관리항목3", pathName4: "관리항목4", pathName5: "관리항목5", pathName6: "관리항목6", pathName7: "관리항목7", pathName8: "관리항목8", pathName9: "관리항목9", pathName10: "관리항목10", pathName11: "관리항목11", pathName12: "관리항목12" },
            ],
            commonCodeList: [],
            commonCodeListCount: null,
            codeListByCommonCode: [],
            codeListCountByCommonCode: null,
            category : {
                rref1x: null,
                rref2x: null,
                rref3x: null,
                rref4x: null,
                rref5x: null,
                rref6x: null,
                rref7x: null,
                rref8x: null,
                rref9x: null,
                rref10: null,
            },
            commonCodeOne: {    
                gbncod: null,
                rcodex: null,
                nmcodx: null,
                shncod: null,
                ordsor: null,
                saygub: null,
                rref1x: null,
                rref2x: null,
                rref3x: null,
                rref4x: null,
                rref5x: null,
                rref6x: null,
                rref7x: null,
                rref8x: null,
                rref9x: null,
                rref10: null,
            },
            bunnam : null
        }
    },
    created() {
        if (this.codeList.length > 0) {
            this.selectedId = this.codeList[0].id;
        }
    },
    methods: {
        openModal() {
            this.searchModal = true;
        },
        closeModal() {
            this.searchModal = false;
        },
        clickCodeName(commonCode, id) {
            this.activeItemId = id;
            this.selectedId = id;

            this.selectListByCommonCode(commonCode)
            this.category = commonCode;
            this.commonCodeOne.gbncod = commonCode.rcodex;
            this.bunnam = commonCode.nmcodx;
        },
         //분류 목록 조회
         selectList: function () {
            let requestData = {
                prjcod : 'AC',
                gbncod : '000'
            }
            const vm = this;
            axios({
                url: '/commonCodeList.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json;'
                },
                data: requestData
            }).then(function (response) {
                console.log("responseData",response.data.resultData)
                vm.commonCodeList = response.data.resultData.list;
                // vm.commonCodeListCount = response.data.requestData.commonCodeListCount;
            }).catch(function (error) {
                console.log(error);
            });
        },

        //분류 코드 별 하위 목록 조회
        selectListByCommonCode : function(commonCode){
            let requestData = {
                prjcod : 'AC',
                rcodex : commonCode.rcodex
            }
            const vm = this;
            axios({
                url: '/commonCodeList.json',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json;'
                },
                data: requestData
            }).then(function (response) {
                console.log("responseData",response.data.resultData)
                vm.codeListByCommonCode = response.data.resultData.list;
                // vm.commonCodeListCount = response.data.requestData.commonCodeListCount;
            }).catch(function (error) {
                console.log(error);
            });
        },

        //
        commonCodeDetail : function(item){
            this.commonCodeOne = item;
        },

    },
    watch: {

    },
    computed: {
        // filteredCodeBox() {
        //     return this.codeBox.filter(codeInput => this.activeItemId === codeInput.id);
        // },
        // filteredCodeList() {
        //     if (this.selectedOptionId !== null) {
        //         return this.codeList.filter(item => item.id === this.selectedOptionId);
        //     }
        //     return this.codeList; // 옵션이 선택되지 않았다면 전체 목록 반환
        // },
        isChecked: {
            get() {
                return this.commonCodeOne.saygub === 'Y';
            },
            set(value) {
                this.commonCodeOne.saygub = value ? 'Y' : 'N';
            }
        }
    },
    mounted() {
        console.log('Main mounted');
        this.selectList();
    }
}
</script>

<style scoped>

.content-wrap {
    padding-left: 30px;

}


td,
th {
    padding: 5px 0;
    text-align: center;
    cursor: pointer;
}

.table-border td,
.table-border th,
.table-header th {
    border-bottom: 1px solid var(--borderlightgray);
    border-right: 1px solid var(--borderlightgray);

}

.list-table th {
    height: 50px;
    color: var(--navbarblue);
}

.list-table input[type="checkbox"] {
    vertical-align: middle;
}

.filter-table th {
    text-align: left;
}

.wrap-text {
    word-break: keep-all;
}
.Bi001-table th{
    word-break: keep-all;
    padding: 0 5px;
}


select {
    width: 100%;
    padding: 0;
    border: 0px;
    cursor: pointer;
    background-color: transparent;
}

select option {

    text-align: center;
}

.modal-wrapper input[type="text"] {
    width: 75%;
}
</style>