<template>
    <div class="gd-10 Bi002-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>
                        <div class="flex align-center">
                            <button class="blue-btn" style="padding-top: 7px ; padding-bottom: 7px;">조회(F12)</button>
                        </div>


                    </div>
                </div>
            </div>
            <div class="gd-12 flex">

                <div class="gd-5" style="width: 100%; height: 70%; ">
                    <div class="flex justify-between align-center ">
                        <div class="content-title  pt2 pb2">
                            거래처 정보
                        </div>
                        <div>
                            <button class="blue-small-btn" style="color: var(--navbarblue);">거래처 찾기</button>
                        </div>
                    </div>

                    <div style="width: 100%; height: 100%; " class=" scroll-table pd2">

                        <div style="border-top: 1px solid var(--borderlightgray); border-bottom: 1px solid var(--borderlightgray);"
                            class="scrollable-table mb2">
                            <table class="list-table text text-ct">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 10%;">
                                    <col style="width: 15%;">
                                    <col style="width: 15%;">
                                    <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>
                                    <tr class="table-header">
                                        <th>코드</th>
                                        <th>거래처명</th>
                                        <th>사업자번호</th>
                                        <th>매입</th>
                                        <th>매출</th>
                                        <th>회계</th>
                                        <th>영업</th>
                                        <th>원자재</th>
                                        <th>부자재</th>
                                        <th>폐기물</th>
                                        <th>약품</th>

                                    </tr>
                                </thead>
                                <tbody class="table-border">
                                    <tr v-for="(codeNum) in codeList" key="codeNum.id" style="max-height: 700px;">
                                        <td>{{ codeNum.pathNum }}</td>
                                        <td>{{ codeNum.pathName }}</td>
                                        <td>{{ codeNum.businessNum }}</td>
                                        <td><input type="checkbox" class="ui-checkbox"></td>
                                        <td><input type="checkbox" class="ui-checkbox"></td>
                                        <td><input type="checkbox" class="ui-checkbox"></td>
                                        <td><input type="checkbox" class="ui-checkbox"></td>
                                        <td><input type="checkbox" class="ui-checkbox"></td>
                                        <td><input type="checkbox" class="ui-checkbox"></td>
                                        <td><input type="checkbox" class="ui-checkbox"></td>
                                        <td><input type="checkbox" class="ui-checkbox"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
                <div class="gd-7 flex-column" style="padding-left: 30px;">
                    <div class="mb3">

                        <div class="content-title mt2 mb1">
                            거래처 등록
                        </div>
                        <div class=" flex section-wrap pd3" style="gap: 30px;">
                            <table class="Bi002-table flex" style="overflow-x: hidden;">
                                <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                                <colgroup>
                                    <col style="width: 20%;">
                                    <col style="width: 20%;">
                                    <col style="width: 20%;">
                                    <col style="width: 20%;">
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <th>거래처명</th>
                                        <td><input type="text"></td>
                                        <td colspan="2">
                                            <button class="blue-small-btn"
                                                style="color: var(--navbarblue);">거래처복사</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>사업자번호</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>종사업자번호</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>법인/주민번호</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>세금계산서종류</th>
                                        <td class="flex">
                                            <select name="" id="">
                                                <option value=""></option>
                                                <option value="">전자세금계산서</option>
                                                <option value="">종이세금계산서</option>
                                                <option value="">기타</option>
                                            </select>
                                            <input class="input-gray" type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>대표자명</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>홈페이지</th>
                                        <td>
                                            <input type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>업태</th>
                                        <td>
                                            <input type="text">
                                        </td>
                                        <th>종목</th>
                                        <td>
                                            <input type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>사업장 주소</th>
                                        <td colspan="1">
                                            <input type="text">
                                        </td>
                                        <td colspan="2">
                                            <input type="text">
                                        </td>

                                    </tr>
                                    <tr>
                                        <th>전화번호</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>팩스번호</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>사업자구분</th>
                                        <td class="flex">
                                            <select name="" id="">
                                                <option value=""></option>
                                                <option value="">법인</option>
                                                <option value="">개인</option>
                                            </select>
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>해외여부</th>
                                        <td class="flex">
                                            <select name="" id="">
                                                <option value=""></option>
                                                <option value="">국내</option>
                                            </select>
                                            <input class="input-gray" type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>과세구분</th>
                                        <td class="flex">
                                            <select name="" id="">
                                                <option value=""></option>
                                                <option value="">과세</option>
                                                <option value="">면세</option>
                                            </select>
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>거래코드</th>
                                        <td class="flex">
                                            <select name="" id="">
                                                <option value=""></option>
                                                <option value="">내수</option>
                                                <option value="">Local</option>
                                                <option value="">직수출</option>
                                            </select>
                                            <input class="input-gray" type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>특수관계자</th>
                                        <td class="flex">
                                            <select name="" id="">
                                                <option value=""></option>
                                                <option value="">일반</option>
                                            </select>
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>계약기간</th>
                                        <td class="flex align-center">
                                            <input type="date">~
                                            <input type="date">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>담당자1</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>담당자2</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>모바일번호1</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>모바일번호2</th>
                                        <td class="flex">
                                            <input type="text">
                                            <input class="input-gray" type="text">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>이메일1</th>
                                        <td><input type="text"></td>
                                        <th>이메일2</th>
                                        <td><input type="text"></td>
                                    </tr>
                                    <tr>
                                        <th>거래여부</th>
                                        <td class="flex">
                                            <div class="content-w100 flex align-center ">
                                                <input type="checkbox" class="ui-checkbox" id="a">
                                                <label for="a">거래</label>
                                                <input type="checkbox" class="ui-checkbox" id="b">
                                                <label for="b">중지</label>
                                            </div>
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>지급조건</th>
                                        <td>
                                            <select name="" id="">
                                                <option value=""></option>
                                                <option value="">현금 1개월</option>
                                                <option value="">현금 2개월</option>
                                                <option value="">현금 3개월</option>
                                                <option value="">현금 중간결제</option>
                                                <option value="">현금 매월25일</option>
                                                <option value="">현금 매월27일</option>
                                                <option value="">현금 매월말일</option>
                                                <option value="">어음 1개월 초</option>
                                                <option value="">어음 1개월 중</option>
                                                <option value="">어음 1개월 말</option>
                                                <option value="">어음 2개월 초</option>
                                                <option value="">어음 2개월 중</option>
                                                <option value="">어음 2개월 말</option>
                                                <option value="">어음 3개월 초</option>
                                                <option value="">어음 3개월 중</option>
                                                <option value="">어음 3개월 말</option>
                                                <option value="">법인카드</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>거래구분</th>
                                        <td class="flex align-center ">
                                            <div class="content-w100 flex align-center ">
                                                <input type="checkbox" class="ui-checkbox" id="i">
                                                <label for="i">매입</label>
                                                <input type="checkbox" class="ui-checkbox" id="j">
                                                <label for="j">매출</label>
                                            </div>
                                            <input class="input-gray" type="text">
                                        </td>
                                        <th>사용처</th>
                                        <td class="flex align-center ">
                                            <input type="checkbox" class="ui-checkbox" id="c">
                                            <label for="c">회계</label>
                                            <input type="checkbox" class="ui-checkbox" id="d">
                                            <label for="d">영업</label>
                                            <input type="checkbox" class="ui-checkbox" id="e">
                                            <label for="e">원자재</label>
                                            <input type="checkbox" class="ui-checkbox" id="f">
                                            <label for="f">부자재</label>
                                            <input type="checkbox" class="ui-checkbox" id="g">
                                            <label for="g">폐기물</label>
                                            <input type="checkbox" class="ui-checkbox" id="h">
                                            <label for="h">약품</label>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

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


                                </colgroup>
                                <thead>
                                    <tr class="table-header">
                                        <th>구분</th>
                                        <th>은행</th>
                                        <th>사업자번호</th>
                                        <th>예금주명</th>
                                        <th>주거래계좌</th>


                                    </tr>
                                </thead>
                                <tbody class="table-border ">
                                    <tr style="max-height: 700px;">
                                        <th  class="table-header">거래은행1</th>
                                        <td>
                                            <select name="" id="">
                                                <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>
                                                <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>
                                        <td><input type="text"></td>
                                        <td><input type="text"></td>
                                        <td class="text-ct"><input type="checkbox" class="ui-checkbox"></td>

                                    </tr>
                                    <tr>
                                        <th  class="table-header">거래은행2</th>
                                        <td>
                                            <select name="" id="">
                                                <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>
                                                <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>
                                        <td><input type="text"></td>
                                        <td><input type="text"></td>
                                        <td class="text-ct"><input type="checkbox" class="ui-checkbox"></td>

                                    </tr>
                                    <tr>
                                        <th  class="table-header">거래은행3</th>
                                        <td>
                                            <select name="" id="">
                                                <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>
                                                <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>
                                        <td><input type="text"></td>
                                        <td><input type="text"></td>
                                        <td class="text-ct"><input type="checkbox" class="ui-checkbox"></td>

                                    </tr>
                                    <tr>
                                        <th  class="table-header">거래은행4</th>
                                        <td>
                                            <select name="" id="">
                                                <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>
                                                <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>
                                        <td><input type="text"></td>
                                        <td><input type="text"></td>
                                        <td class="text-ct"><input type="checkbox" class="ui-checkbox"></td>

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

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

</template>

<script>
export default {
    data() {
        return {
            codeList: [
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
                { pathNum: "01001", pathName: "원자재거래처 테스트", businessNum: "123-45-67890", },
            ]
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

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

<style scoped>
.Bi002-table th {
    padding: 0 10px;
    white-space: nowrap
}

.Bi002-table td {
    padding: 2px;
}

.Bi002-table input,
.Bi002-table select {
    padding: 3px;
}

.Bi002-table .flex {
    flex-wrap: nowrap;
}

.Bi002-table select option {
    padding: 3px;
}

.Bi002-table input[type="text"],
.Bi002-table select,
.Bi002-table input[type="date"] {
    width: 100%;
    margin-right: 3px;
}

.Bi002-table input[type="checkbox"] {
    margin-right: 3px;
}

.Bi002-table label {
    margin-right: 2px;
    line-height: 18px;
}

.address-row .flex {
    flex-wrap: nowrap;
}

.address-row .flex input {
    width: 40%;
}
.section-table input[type="text"],.section-table select{
    width: 100%;
    border: 0px;   
}
.section-table input[type="checkbox"]{
    text-align: center;
    margin: 0 auto;
}
</style>