<template>
    <div class="gd-10 Bi001-page container">
        <div class="wrap pd2 flex-column">
            <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="container  flex">
                <div class="content gd-2 list-wrap  flex-column ">
                    <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: 20%;">
                                    <col style="width: 80%;">

                                </colgroup>
                                <thead>
                                    <tr class="table-header"
                                        style="background-color: var(--tableblue); color: var(--navbarblue); ">
                                        <th>코드분류</th>
                                        <th>코드분류명</th>

                                    </tr>
                                </thead>
                                <tbody class="table-border">
                                    <tr v-for="(codeNum) in codeList" 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>


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="content gd-10 flex-column content-wrap" style="width: 100%;">
                    <div>
                        <div class="flex justify-between">
                            <div class="content-title mb1 list-box">코드등록</div>
                            <div><button>등록하기</button></div>
                        </div>
                        <div class=" flex section-wrap pd2">
                            <table class="Bi001-table flex " style="overflow-x: hidden; width: 100%;">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 16%;">
                                    <col style="width: 16%;">
                                    <col style="width: 16%;">
                                    <col style="width: 16%;">
                                    <col style="width: 16%;">
                                    <col style="width: 5%;">

                                </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"></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>
                                    <tr>
                                        <th>{{ codeInput.pathName3 }}</th>
                                        <td><input type="text" name="" id=""></td>
                                        <th>{{ codeInput.pathName4 }}</th>
                                        <td><input type="text" name="" id=""></td>
                                        <th>{{ codeInput.pathName5 }}</th>
                                        <td><input type="text" name="" id=""></td>
                                        <th>{{ codeInput.pathName6 }}</th>
                                        <td><input type="text" name="" id=""></td>
                                    </tr>
                                    <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>
                                </tbody>
                            </table>
                        
                        </div>
                        <div class="table-border">
                            <div class="content-title mb1">코드목록</div>
                            <div class="" style="height: 398px ; overflow-y: auto;">


                                <table class="list-table" style="height: 100%; 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: 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: 5%;">
                                        <col style="width: 5%;">
                                        <col style="width: 5%;">
                                        <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>
                                    <tbody style="height: 100%; ">
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        <tr>
                                            <td>000101</td>
                                            <td>합계잔액시산표</td>
                                            <td></td>
                                            <td>0</td>
                                            <td><input type="checkbox" checked name="" id="" class="ui-checkbox">
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>

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

<script>
export default {
    data() {
        return {
            activeItemId: 0,
            selectedId: null,
            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" },
            ]
        }
    },
    created() {
        if (this.codeList.length > 0) {
            this.selectedId = this.codeList[0].id;  // 첫 번째 항목의 id를 선택합니다.
        }
    },
    methods: {
        clickCodeName(id) {
            console.log(id);
            this.activeItemId = id;
            this.selectedId = id;
            console.log(`ID: ${this.activeItemId}`);
        }
    },
    watch: {

    },
    computed: {
        filteredCodeBox() {
            return this.codeBox.filter(codeInput => this.activeItemId === codeInput.id);
        },

    },
    mounted() {
        console.log('Main mounted');
    }
}
</script>

<style scoped>
.wrap {
    width: 100%;
    height: 100%;
}

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

}

.container {
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
}


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 {
    color: var(--navbarblue);
}

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

.wrap-text {
    word-break: keep-all;
}
input[type="text"]{
    width: 100%;
    padding-right: 20px;
}
.Bi001-table th{
    padding:0 20px;
    word-break: keep-all;
}

</style>