<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>
                        <button class="del-btn">삭제</button>
                    </div>

                </div>
            </div>
            <div class="content  flex-column">
                <div class="row">
                    <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>
                                <input type="date" id="date" value="2024-03-04" style="width: 35%;">
                                <p class="ml2">~</p>
                                <input type="date" id="date" value="2024-03-04" style="width: 35%;">

                            </div>
                            <div class="flex justify-between mr5">
                                <div>
                                    <p class="blue-text">발의자</p>
                                </div>
                                <div class="flex  box-area">
                                    <select name="" id="" class="flex30" >
                                        <option value="">박정현(180516)</option>
                                        <option value="">권문기(210702)</option>
                                        <option value="">김황석(200702)</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="flex align-center">
                            <button class="blue-btn">조회</button>
                        </div>


                    </div>
                </div>

                <div style="background-color: var(--tableblue); border-radius: 10px;"
                    class="content-wrap pt1 pb1 mt1 mb1">

                    <table class="form-table2 code-area">
                        <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                        <colgroup>
                            <col style="width: 4%;">
                            <col style="width: 15%;">
                            <col style="width: 5%;">
                            <col style="width: 15%;">
                            <col style="width: 5%;">
                        </colgroup>
                        <tbody>
                            <tr class="">
                                <th colspan="1" class="blue-text">발의 일자</th>
                                <td colspan="2">
                                    <input class=" mr1" type="date" id="date" value="2024-03-04">~
                                    <input class="content-w30 input-gray" type="text" id="date" placeholder="0012">
                                </td>

                                <td colspan="4" class="button-wrap">
                                    <button class="">신규발의번호부여</button>
                                    <button class="">상세내역초기화</button>
                                    <button class="" @click="openModal">수입결제전표만들기</button>
                                </td>
                                <td class="button-wrap">
                                </td>




                            </tr>

                            <tr class="content-area">
                                <th class="blue-text">발의 부서</th>
                                <td>
                                    <input class="content-w30 input-gray mr1" type="text" id="date"
                                        placeholder="103000">
                                    <input class="content-w60 input-gray" type="text" id="date" placeholder="IT팀">
                                </td>
                                <th class="blue-text">발의자</th>
                                <td>
                                    <input class="content-w30 input-gray mr1" type="text" id="date"
                                        placeholder="180516">
                                    <input class="content-w60 input-gray" type="text" id="date" placeholder="박정현">
                                </td>

                                <th class="blue-text">차변합계</th>
                                <td>
                                    <input class="input-gray content-w40" type="text" id="date" placeholder="">
                                </td>

                                <th class="blue-text">대변합계</th>
                                <td>
                                    <input class="input-gray" type="text" id="date" placeholder="">
                                </td>
                                <th class="blue-text">차액</th>
                                <td>
                                    <input class="input-gray" type="text" id="date" placeholder="">
                                </td>


                            </tr>


                        </tbody>
                    </table>
                </div>
                <div class="flex" style="gap: 15px; height: 100% ; flex-wrap: nowrap;">
                    <div class="gd-3 pd1 table-area">
                        <div class="content-title flex justify-between mb1">
                            전표목록
                        </div>
                        
                        <div class="box-overflow">

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

                                </colgroup>
                                <thead>
                                    <tr class="table-header"
                                        style="background-color: var(--tableblue); color: var(--navbarblue); ">
                                        <th>선택</th>
                                        <th>발의번호</th>
                                        <th>전송일시</th>
                                        <th>상태</th>
                                        <th>자동</th>
                                        <th>G/W</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="table-border">
                                        <td><input type="checkbox"></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                    </tr>


                                </tbody>
                            </table>
                            <div class="button-wrap flex justify-end mb2">
                            <button>전표 전송</button>
                            <button style="border: 1px solid var(--red); color: var(--red);">전표 취소</button>
                            <button>G/W 전송</button>
                            </div>
                        </div>
                    </div>
                    <div class=" pd1 table-area content-wrap" style="width: 80%;">
                        <div class="content-title flex justify-between mb1">
                            전표등록
                        </div>
                        <div class="box-overflow ">

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


                                <thead style="width: 100%;">
                                    <tr class="table-header table-border"
                                        style="background-color: var(--tableblue); color: var(--navbarblue); ">
                                        <th rowspan="2">순번</th>
                                        <th rowspan="2">계정과목</th>
                                        <th>관리항목1</th>
                                        <th>관리일자1</th>
                                        <th>증빙</th>
                                        <th>참고항목</th>
                                        <th>환율</th>
                                        <th rowspan="2">차변금액</th>
                                        <th rowspan="2">대변금액</th>
                                        <th rowspan="2">적요</th>
                                    </tr>

                                    <tr class="table-header table-border"
                                        style="background-color: var(--tableblue); color: var(--navbarblue); ">
                                        <th>관리항목2</th>
                                        <th>관리일자2</th>
                                        <th>비용부서</th>
                                        <th>공급가액</th>
                                        <th>외화금액($)</th>
                                    </tr>
                                </thead>
                                <tbody class="box-overflow ">


                                    <template v-for="(listNam, index) in listNam">
                                        <tr class=" table-border">
                                            <td rowspan="2">{{ listNam.no }}</td>
                                            <td rowspan="2">{{ listNam.name }}</td>
                                            <td>{{ listNam.list1 }}</td>
                                            <td>{{ listNam.list2 }}</td>
                                            <td>{{ listNam.list3 }}</td>
                                            <td>{{ listNam.list4 }}</td>
                                            <td>{{ listNam.list5 }}</td>
                                            <td rowspan="2">{{ listNam.list6 }}</td>
                                            <td rowspan="2">{{ listNam.list7 }}</td>
                                            <td rowspan="2">{{ listNam.list8 }}</td>
                                        </tr>
                                        <tr class="table-border">
                                            <td>{{ listNam.list9 }}</td>
                                            <td>{{ listNam.list10 }}</td>
                                            <td>{{ listNam.list11 }}</td>
                                            <td>{{ listNam.list12 }}</td>
                                            <td>{{ listNam.list13 }}</td>
                                        </tr>
                                    </template>


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

                </div>
            </div>

        </div>
        <!-- button 모달 -->
        <div v-show="isModalOpen" class="modal-wrapper">
            <div class="modal-container flex flex-column">
                <div>
                    <div class="modal-title mb2">
                        <div class="flex justify-between">
                            <h2>수입결제전표만들기</h2>
                            <button class="close-btn " @click="closeModal"></button>
                        </div>
                    </div>
                    <div class="flex button-wrap ">
                        <p class="blue-text">조회조건</p>
                        <input type="date" id="date">
                        <p class="ml2">~</p>
                        <input type="date" id="date">
                        <button>조회</button>
                    </div>
                    <div class="modal-content-monthly ">
                        <div>
                            <p style="text-align: left; " class="blue-text"> 외화거래목록</p>
                        </div>
                        <div class="table-zone table-scroll">
                            <table class="list-table">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 10%;">
                                    <col style="width: 10%;">
                                    <col style="width: 10%;">
                                    <col style="width: 10%;">
                                    <col style="width: 10%;">
                                </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>통화구분</th>
                                        <th>외화금액</th>
                                        <th>원화금액</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(modalWrap) in modalList" key="codeNum" style="overflow-y: scroll;">
                                        <td>{{ modalWrap.code }}</td>
                                        <td>{{ modalWrap.accountNum }}</td>
                                        <td>{{ modalWrap.data }}</td>
                                        <td>{{ modalWrap.pathNum }}</td>
                                        <td>{{ modalWrap.detailName }}</td>
                                        <td>{{ modalWrap.division }}</td>
                                        <td>{{ modalWrap.foreignCurrency }}</td>
                                        <td>{{ modalWrap.KRW }}</td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div>
                        <div class="modal-content-monthly">
                            <div class="flex justify-between mb1">
                                <div class="flex button-wrap ">
                                    <p style="text-align: left;" class="blue-text">선택내역</p>
                                    <button>임시전표작성</button>
                                </div>
                                <div class="flex justify-end">
                                    <p>차변합계</p>
                                    <input type="text" class="content-w20">

                                    <p class="ml1">대변합계</p>
                                    <input type="text" class="content-w20">

                                    <p class="ml1">차액</p>
                                    <input type="text" class="content-w20">
                                </div>
                            </div>
                            <div class="table-zone">
                                <table class="list-table">
                                    <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                    <colgroup>
                                        <col style="width: 10%;">
                                        <col style="width: 10%;">
                                        <col style="width: 10%;">
                                        <col style="width: 10%;">
                                        <col style="width: 10%;">
                                    </colgroup>
                                    <thead>
                                        <tr class="table-header table-border"
                                            style="background-color: var(--tableblue); color: var(--navbarblue); ">
                                            <th>순번</th>
                                            <th>계정과목</th>
                                            <th>관리항목1</th>
                                            <th>관리항목2</th>
                                            <th>환율</th>
                                            <th>외화금액($)</th>
                                            <th>차변금액</th>
                                            <th>대변금액</th>
                                            <th>적요</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td></td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div>
                            <div class="flex button-wrap mb1">
                                <p style="text-align: left;" class="blue-text">작성내역</p>
                                <button>자동전표작성</button>
                            </div>
                            <div class="table-zone">
                                <table class="list-table">
                                    <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                    <colgroup>
                                        <col style="width: 10%;">
                                        <col style="width: 10%;">
                                        <col style="width: 10%;">
                                        <col style="width: 10%;">
                                        <col style="width: 10%;">
                                    </colgroup>
                                    <thead>
                                        <tr class="table-header table-border"
                                            style="background-color: var(--tableblue); color: var(--navbarblue); ">
                                            <th>순번</th>
                                            <th>계정과목</th>
                                            <th>관리항목1</th>
                                            <th>관리항목2</th>
                                            <th>환율</th>
                                            <th>외화금액($)</th>
                                            <th>차변금액</th>
                                            <th>대변금액</th>
                                            <th>적요</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td></td>
                                        </tr>

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

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

<script>

export default {

    data() {
        return {
            isModalOpen: false,
            openModal: false,
            modalList: [
                {
                    code: "003", accountNum: "6380000795600017", data: "2023-02-10", pathNum: "400", detailName: "외화송금출금",
                    division: "USD", foreignCurrency: "10,000,00", KRW: "12,406,000"
                },
                {
                    code: "003", accountNum: "6380000795600017", data: "2023-02-27", pathNum: "401", detailName: "외화송금출금",
                    division: "USD", foreignCurrency: "10,995,00", KRW: "13,641,141"
                },
                {
                    code: "003", accountNum: "6380000795600017", data: "2023-02-10", pathNum: "400", detailName: "외화송금출금",
                    division: "USD", foreignCurrency: "10,000,00", KRW: "12,406,000"
                },
                {
                    code: "003", accountNum: "6380000795600017", data: "2023-02-10", pathNum: "400", detailName: "외화송금출금",
                    division: "USD", foreignCurrency: "10,000,00", KRW: "12,406,000"
                },
                {
                    code: "003", accountNum: "6380000795600017", data: "2023-02-10", pathNum: "400", detailName: "외화송금출금",
                    division: "USD", foreignCurrency: "10,000,00", KRW: "12,406,000"
                },
            ],
            listNam: [
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },
                { no: "1", name: "과목", list1: "항목1", list2: "일자1", list3: "증빙", list4: "참고항목", list5: "환율", list6: "차변금액", list7: "대변금액", list8: "적요", list9: "항목2", list10: "일자2", list11: "비용부서", list12: "공급가액", list13: "외화" },


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

        }
    },
    watch: {

    },
    computed: {

    },
    components: {
    },
    mounted() {
    }
}
</script>

<style scoped>

table td,table td{
    text-align: center;
}

</style>