<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>
                    </div>


                </div>
            </div>
            <div class="content  flex-column Bi001-content">
                <div class="Bi001-wrap flex-column pd1 mb1" >
                    <div class="mb1">
                        <div class="content-title flex justify-between mb1">
                            조회조건
                        </div>
                        <div class="flex justify-between pb1" style="border-bottom: 2px solid var(--bordergray);">

                            <div class="flex justify-start box-wrap gd-10">

                                <div class="flex mr5">
                                    <div>
                                        <p class="blue-text">사업장</p>
                                    </div>
                                    <select name="" id="" style="width: 150px;">
                                        <option value="본점">본점(제지)</option>
                                        <option value="본점(포장)">본점(포장)</option>
                                        <option value="에너지솔루션(주)">에너지솔루션(주)</option>
                                    </select>
                                </div>
                                <div class="flex mr5">
                                    <div>
                                        <p class="blue-text">작성일자</p>
                                    </div>
                                    <div>
                                        <input type="date"> ~
                                        <input type="date">
                                    </div>
                                </div>
                                <div class="flex mr5">
                                    <div>
                                        <p class="blue-text">계정과목</p>
                                    </div>
                                    <div>
                                        <input type="search" class="content-w20 search-btn mr1" style="cursor: pointer;"
                                            @click="openModal">
                                        <input type="text" class="content-w60 input-gray" placeholder="정기예금(만기3개월이내)">
                                    </div>
                                </div>
                            </div>
                            <div class="flex align-center">
                                <button class="blue-btn"
                                    style="padding-top: 7px ; padding-bottom: 7px;">조회(F12)</button>
                            </div>
                        </div>
                    </div>
                    <div class="flex-column">
                        <div class="flex justify-between mb1">
                            <div class="content-title">
                                이월전표등록
                            </div>
                            <div class="flex justify-end gd-2">
                                <button class="blue-small-btn mr1" style="color: var(--navbarblue);">신규전표입력</button>
                                <button class="blue-small-btn" style="color: var(--navbarblue);">연변추가입력</button>
                            </div>
                        </div>
                        <div class="Bi003-list flex mb1 ">
                            <table class="list-table">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 9%;">
                                    <col style="width: 5%;">
                                    <col style="width: 5%;">
                                    <col style="width: 9%;">
                                    <col style="width: 13%;">
                                    <col style="width: 9%;">
                                    <col style="width: 13%;">
                                    <col style="width: 9%;">
                                    <col style="width: 9%;">
                                    <col style="width: 9%;">

                                </colgroup>
                                <thead>
                                    <tr class="table-header">
                                        <th>작성일자</th>
                                        <th>전표NO</th>
                                        <th>연번</th>
                                        <th colspan="2">계정과목</th>
                                        <th colspan="2">관리항목1</th>
                                        <th>관리항목2</th>
                                        <th>차변금액</th>
                                        <th>대변금액</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="table-border" v-for="(codePath, index) in codeList">
                                        <td><input type="date" style="border: 0px;padding: 0px;"></td>
                                        <td class="input-gray">{{ codePath.num }}</td>
                                        <td class="input-gray">{{ codePath.num2 }}</td>
                                        <td class="input-gray">{{ codePath.nameNum }}</td>
                                        <td class="input-gray">{{ codePath.name }}</td>
                                        <td>{{ codePath.listNum }}</td>
                                        <td class="input-gray">{{ codePath.listName }}</td>
                                        <td>{{ codePath.num3 }}</td>
                                        <td>{{ codePath.money }}</td>
                                        <td>{{ codePath.money2 }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="flex justify-end ">
                            <button class="green-excel-btn mr1">엑셀</button>
                            <button class="red-del-btn mr1">삭제</button>
                            <button class="blue-save-btn">저장</button>
                        </div>
                    </div>
                </div>
                <div class="flex-column">
                    <div class="content-title flex justify-between mb1">
                        이월전표내역
                    </div>
                    <div class="Bi003-list flex mb1" style="height: 50%; overflow-y: auto;" >
                        <table class="list-table" >
                            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                            <colgroup>
                                <col style="width: 9%;">
                                <col style="width: 5%;">
                                <col style="width: 5%;">
                                <col style="width: 22%;">
                                <col style="width: 22%;">
                                <col style="width: 9%;">
                                <col style="width: 9%;">
                                <col style="width: 9%;">

                            </colgroup>
                            <thead>
                                <tr class="table-header" >
                                    <th>작성일자</th>
                                    <th>전표NO</th>
                                    <th>연번</th>
                                    <th>계정과목</th>
                                    <th>관리항목1</th>
                                    <th>관리항목2</th>
                                    <th class="table-align">차변금액</th>
                                    <th class="table-align">대변금액</th>
                                </tr>
                            </thead>
                            <tbody >
                                <tr class="table-border" v-for="(codePathHistroy) in codeHistroyList" style="max-height: 200px;" >
                                    <td>{{ codePathHistroy.date }}</td>
                                    <td>{{ codePathHistroy.num }}</td>
                                    <td>{{ codePathHistroy.num2 }}</td>
                                    <td class="text-lf">{{ codePathHistroy.nameNum }}{{ codePathHistroy.name }}</td>
                                    <td class="text-lf">{{ codePathHistroy.listNum }}{{ codePathHistroy.listName }}</td>
                                    <td>{{ codePathHistroy.num3 }}</td>
                                    <td>{{ codePathHistroy.money }}</td>
                                    <td>{{ codePathHistroy.money2 }}</td>

                                </tr>

                               
                            </tbody>
                        </table>
                    </div>
                    <div class="flex justify-end">
                        <table style=" min-width: 30%; border-top: 1px solid var(--borderlightgray);">


                            <tr class="table-border list-table" >
                                <th >합계</th>
                                <td>1,155,881,957</td>
                                <td>1,155,881,957</td>

                            </tr>

                        </table>


                    </div>
                </div>
            </div>
            <!-- 모달 -->
            <div v-show="isOpen" 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-scroll">
                                <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>
</template>

<script>
export default {
    data() {
        return {
            isOpen: false,
            codeList: [
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
              
            ],
            codeHistroyList: [
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
                { date: "20219", num: "0007", num2: "0001", nameNum: "1102041", name: "대손충당금(미수금)", listNum: "111474", listName: "(주)서광지관", num3: "353-1505-5123-74", money: "350,000,000", money2: "565,550,000" },
              
            ],
            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.isOpen = true;
        },
        closeModal() {
            this.isOpen = false;

        }
    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Main mounted');
    }
}
</script>
<style scoped>
button {
    font-size: 1.4rem;
}

td {
    padding-left: 10px;
}
</style>