<template>
    <div class="gd-10 Bi003-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="excel-btn">엑셀</button>
                        <button class="del-btn">삭제</button>
                        <button class="save-btn">저장</button>
                    </div>


                </div>
            </div>
            <div class="container flex-column">
                <div class="content list-wrap  flex-column ">
                    <div class="pb2">
                        <div class="content-title flex justify-between mb1">
                            계정과목등록
                        </div>
                        <div class="pd1 section-wrap" style="border-radius: 10px;">
                            <table class="form-table Bi003-table pd3 ">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 10%;">
                                    <col style="width: 15%;">
                                    <col style="width:10%;">
                                    <col style="width: 15%;">
                                    <col style="width:10%;">
                                    <col style="width: 15%;">
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <th>코드</th>
                                        <td>
                                            <input type="text" name="" id="" class="mr2">

                                            <button class="blue-btn" @click="openModal">검색</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>계정명</th>
                                        <td>
                                            <input type="text">
                                        </td>
                                        <th rowspan="5">필수입력항목구분</th>
                                        <td>
                                            <input type="checkbox" id="e" class="ui-checkbox ">
                                            <label for="e">증빙구분</label>
                                            <input type="checkbox" id="f" class="ui-checkbox ">
                                            <label for="f">비용부서</label>
                                            <input type="checkbox" id="g" class="ui-checkbox ">
                                            <label for="g">외화금액($)</label>
                                        </td>
                                        <th>자금원장표시</th>
                                        <td>
                                            <input type="checkbox" id="n" class="ui-checkbox ">
                                            <label for="n">자금원장표시계정</label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>잔액구분</th>
                                        <td>
                                            <select name="" id="" class="small-select">
                                                <option value="">1.차변</option>
                                                <option value="">1.대변</option>
                                            </select>
                                            <input type="checkbox" id="a" class="ui-checkbox ">
                                            <label for="a">전표발생구분</label>
                                        </td>
                                        <td rowspan="4" class="">
                                            <input type="checkbox" id="h" class="ui-checkbox mb5">
                                            <label for="h">관리일자1_증빙일자및어음발행일</label> <br>
                                            <input type="checkbox" id="i" class="ui-checkbox  mb5">
                                            <label for="i">관리일자2_대금지불일및어음만기일</label> <br>
                                            <input type="checkbox" id="j" class="ui-checkbox  mb5">
                                            <label for="j">참고항목_어음지급은행</label> <br>
                                            <input type="checkbox" id="k" class="ui-checkbox ">
                                            <label for="k">공급가액 및 승인금액</label>
                                        </td>
                                        <th>동변발생구분</th>
                                        <td>
                                            <input type="checkbox" id="o" class="ui-checkbox ">
                                            <label for="o">동변자동발생계정</label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>금액발생여부</th>
                                        <td>
                                            <input type="checkbox" id="b" class="ui-checkbox ">
                                            <label for="b">차변</label>
                                            <input type="checkbox" id="c" class="ui-checkbox ">
                                            <label for="c">대변</label>
                                        </td>
                                        <th>동변계정(계산서)</th>
                                        <td>
                                            <select name="" id="" class="large-select">
                                                <option value=""></option>
                                                <option value="">부가세대급금(세금계산서)</option>
                                                <option value="">부가세대급금(신용카드)</option>
                                                <option value="">토지 불공제</option>
                                                <option value="">차량운반구 불공제</option>
                                                <option value="">건설중인자산(유형) 불공제</option>
                                                <option value="">접대비 불공제</option>
                                                <option value="">차량유지비 불공제</option>
                                                <option value="">기부금 불공제</option>
                                                <option value="">제)차량유지비 불공제</option>
                                                <option value="">제)접대비 불공제</option>
                                            </select>
                                        </td>

                                    </tr>
                                    <tr>
                                        <th>관리항목1</th>
                                        <td>
                                            <input type="checkbox" id="d" class="ui-checkbox ">
                                            <label for="d">거래처/사원번호/은행/법인카드</label>
                                        </td>
                                        <th>동변불공제계정(계산서)</th>
                                        <td>
                                            <select name="" id="" class="large-select">
                                                <option value=""></option>
                                                <option value="">부가세대급금(세금계산서)</option>
                                                <option value="">부가세대급금(신용카드)</option>
                                                <option value="">토지 불공제</option>
                                                <option value="">차량운반구 불공제</option>
                                                <option value="">건설중인자산(유형) 불공제</option>
                                                <option value="">접대비 불공제</option>
                                                <option value="">차량유지비 불공제</option>
                                                <option value="">기부금 불공제</option>
                                                <option value="">제)차량유지비 불공제</option>
                                                <option value="">제)접대비 불공제</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>관리항목2</th>
                                        <td>
                                            <input type="checkbox" id="d" class="ui-checkbox ">
                                            <label for="d">계좌 및 어음NO</label>
                                        </td>
                                        <th>동변계정(법인카드)</th>
                                        <td>
                                            <select name="" id="" class="large-select">
                                                <option value=""></option>
                                                <option value="">부가세대급금(세금계산서)</option>
                                                <option value="">부가세대급금(신용카드)</option>
                                                <option value="">토지 불공제</option>
                                                <option value="">차량운반구 불공제</option>
                                                <option value="">건설중인자산(유형) 불공제</option>
                                                <option value="">접대비 불공제</option>
                                                <option value="">차량유지비 불공제</option>
                                                <option value="">기부금 불공제</option>
                                                <option value="">제)차량유지비 불공제</option>
                                                <option value="">제)접대비 불공제</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>프로젝트구분</th>
                                        <td>
                                            <select name="" id="">
                                                <option value="">히트펌프연구개발</option>
                                            </select>

                                        </td>
                                        <th>계정명</th>
                                        <td>
                                            <input type="checkbox" id="l" class="ui-checkbox ">
                                            <label for="l">매출세무계정</label>
                                            <input type="checkbox" id="m" class="ui-checkbox ">
                                            <label for="m">매입세무계정</label>
                                        </td>
                                        <th>동변불공제계정(법인카드)</th>
                                        <td>
                                            <select name="" id="" class="large-select">
                                                <option value=""></option>
                                                <option value="">부가세대급금(세금계산서)</option>
                                                <option value="">부가세대급금(신용카드)</option>
                                                <option value="">토지 불공제</option>
                                                <option value="">차량운반구 불공제</option>
                                                <option value="">건설중인자산(유형) 불공제</option>
                                                <option value="">접대비 불공제</option>
                                                <option value="">차량유지비 불공제</option>
                                                <option value="">기부금 불공제</option>
                                                <option value="">제)차량유지비 불공제</option>
                                                <option value="">제)접대비 불공제</option>
                                            </select>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="flex-column table-wrap">
                        <div class="content-title flex justify-between mb1">
                            계정과목목록
                        </div>
                        <div class="Bi003-list flex">
                            <table class="list-table">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 4%;">
                                    <col style="width: 5%;">
                                    <col style="width: 3%;">
                                    <col style="width: 3%;">
                                    <col style="width: 3%;">
                                    <col style="width: 3%;">
                                    <col style="width: 3%;">
                                    <col style="width: 3%;">
                                    <col style="width: 3%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 3%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">
                                    <col style="width: 4%;">



                                </colgroup>
                                <thead>
                                    <tr class="table-header">
                                        <th>코드</th>
                                        <th>계정명</th>
                                        <th>잔액구분</th>
                                        <th>차변금액</th>
                                        <th>대변금액</th>
                                        <th>전표발생</th>
                                        <th>관리항목1</th>
                                        <th>관리항목2</th>
                                        <th>프로젝트구분</th>
                                        <th>증빙구분</th>
                                        <th>비용부서</th>
                                        <th>외화금액($)</th>
                                        <th>관리일자1</th>
                                        <th>관리일자2</th>
                                        <th>참고항목</th>
                                        <th>공급가액 및승인액</th>
                                        <th>세무계정</th>
                                        <th>자금원장계정</th>
                                        <th>동변발생구분</th>
                                        <th>동변계정(계산서)</th>
                                        <th>동변불공제계정(계산서)</th>
                                        <th>동변계정(법인카드)</th>
                                        <th>동변불공제계정(법인카드)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="table-border" v-for="(listTable) in tableList">
                                        <td>{{ listTable.no }}</td>
                                        <td>{{ listTable.name }}</td>
                                        <td>{{ listTable.list1 }}</td>
                                        <td>{{ listTable.list2 }}</td>
                                        <td>{{ listTable.list3 }}</td>
                                        <td>{{ listTable.list4 }}</td>
                                        <td>{{ listTable.list5 }}</td>
                                        <td>{{ listTable.list6 }}</td>
                                        <td>{{ listTable.list7 }}</td>
                                        <td>{{ listTable.list8 }}</td>
                                        <td>{{ listTable.list9 }}</td>
                                        <td>{{ listTable.list10 }}</td>
                                        <td>{{ listTable.list11 }}</td>
                                        <td>{{ listTable.list12 }}</td>
                                        <td>{{ listTable.list13 }}</td>
                                        <td>{{ listTable.list14 }}</td>
                                        <td>{{ listTable.list15 }}</td>
                                        <td>{{ listTable.list16 }}</td>
                                        <td>{{ listTable.list17 }}</td>
                                        <td>{{ listTable.list18 }}</td>
                                        <td>{{ listTable.list19 }}</td>
                                        <td>{{ listTable.list20 }}</td>
                                        <td>{{ listTable.list21 }}</td>
                                    </tr>

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

                    </div>
                    <div v-show="isPopupOpen" class="modal-wrapper">
                        <div class="modal-container flex flex-column">
                            <div>
                                <div class=" mb2">

                                    <div class="flex justify-between modal-title">
                                        <h1>계정과목찾기</h1>
                                        <div>
                                            <button class="close-btn " @click="closeModal"></button>
                                        </div>

                                    </div>
                                </div>
                                <div class="flex justify-between">
                                    <div class="content-title mb1">
                                        조회조건
                                    </div>
                                    <div class=" button-wrap">
                                        <button class="rest-btn">초기화</button>
                                    </div>
                                </div>
                                <div class="flex button-wrap modal-title mb2 button-wrap">
                                    <p class="blue-text">계정코드/명</p>
                                    <input type="text" id="date">
                                    <button>조회</button>
                                </div>
                                <div>
                                    <div class="content-title flex justify-between ">
                                        계정과목목록
                                    </div>
                                    <div class="table-zone">
                                        <table class="list-table">
                                            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                            <colgroup>
                                                <col style="width: 5%;">
                                                <col style="width: 10%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                                <col style="width: 3%;">
                                            </colgroup>
                                            <thead>
                                                <tr class="table-header table-border "
                                                    style="background-color: var(--tableblue); color: var(--navbarblue); ">
                                                    <th>코드</th>
                                                    <th>계정명</th>
                                                    <th>잔액구분</th>
                                                    <th>차변금액</th>
                                                    <th>대변금액</th>
                                                    <th>전표발생</th>
                                                    <th>관리항목1</th>
                                                    <th>관리항목2</th>
                                                    <th>증빙구분</th>
                                                    <th>증빙일자</th>
                                                    <th>비용부서</th>
                                                    <th>공급가액및승인금액</th>
                                                    <th>세무계정</th>
                                                    <th>외화금액($)</th>
                                                    <th>어음정보</th>
                                                    <th>대금지불일</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr v-for="(modalWrap) in modalList" key="codeNum"
                                                    style="overflow-y: scroll;" class="table-border modal-td">
                                                    <td>{{ modalWrap.num }}</td>
                                                    <td>{{ modalWrap.name }}</td>
                                                    <td>{{ modalWrap.list1 }}</td>
                                                    <td>{{ modalWrap.list2 }}</td>
                                                    <td>{{ modalWrap.list3 }}</td>
                                                    <td>{{ modalWrap.list4 }}</td>
                                                    <td>{{ modalWrap.list5 }}</td>
                                                    <td>{{ modalWrap.list6 }}</td>
                                                    <td>{{ modalWrap.list7 }}</td>
                                                    <td>{{ modalWrap.list8 }}</td>
                                                    <td>{{ modalWrap.list9 }}</td>
                                                    <td>{{ modalWrap.list10 }}</td>
                                                    <td>{{ modalWrap.list11 }}</td>
                                                    <td>{{ modalWrap.list12 }}</td>
                                                    <td>{{ modalWrap.list13 }}</td>
                                                    <td>{{ modalWrap.list14 }}</td>
                                                </tr>

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

                </div>
            </div>


        </div>


    </div>
</template>

<script>
export default {
    data() {
        return {
            isPopupOpen: false,
            activeItemId: 0,
            selectedId: null,
            tableList: [
                { no: "1000000", name: "자산", },
                { no: "1101000", name: "현금", list1: "1.차변", list2: "Y", list3: "Y", list4: "Y", list5: "Y", list6: "Y", list7: "Y", list8: "Y", list9: "Y", list10: "Y", list11: "Y", list12: "Y", list13: "Y", list14: "Y", list15: "Y", list16: "세무계정", list17: "Y", list18: "부가세대급금(세금계산서)", list19: "Y", list20: "Y" }
            ],
            modalList: [
                { num: "1106044", name: "저장품(초지용구품)", list1: "1.차변", list2: "Y", list3: "Y", list4: "Y", list5: "Y", list6: "Y", list7: "Y", list8: "Y", list9: "Y", list10: "Y", list11: "매입", list12: "Y", list13: "Y", list14: "Y" }
            ],

        }
    },

    methods: {
        openModal() {
            this.isPopupOpen = true;
        },
        closeModal() {
            this.isPopupOpen = false;

        }
    },
    watch: {

    },
    computed: {

    },
    mounted() {

    }
}
</script>

<style scoped>

 .modal-td {
    text-align: center;
    word-break: keep-all;
}
</style>