<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">조회</button>
                        </div>


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

                <div class="gd-5" style="width: 100%; height: 100px;">
                    <div class="content-title flex justify-between pt2 pb2">
                        거래처 정보
                    </div>
                    <div style="border-bottom: 2px solid var(--borderlightgray);">
                        <table class="list-table">
                            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                            <colgroup>
                                <col style="width: 10%;">
                                <col style="width: 20%;">
                                <col style="width: 20%;">
                                <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">
                                    <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 class="flex justify-end">
                        <button>거래처 찾기</button>
                    </div>
                </div>
                <div class="gd-7 flex-column" style="padding-left: 30px;">
                    <div class="content-title flex justify-between ">
                        거래처 등록
                    </div>
                    <div class=" flex section-wrap pd3" style="gap: 30px;">
                        <table class="Bi002-table flex">
                            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                            <colgroup>
                                <col style="width: 15%;">
                                <col style="width: 15%;">
                                <col style="width: 15%;">
                                <col style="width: 15%;">
                                <col style="width: 15%;">



                            </colgroup>
                            <tbody>
                                <tr>
                                    <th>코드</th>
                                    <td><input type="text" name="" id=""></td>
                                    <td><button>거래처복사</button></td>
                                </tr>
                                <tr>
                                    <th>거래처명</th>
                                    <td><input type="text" name="" id=""></td>
                                    <th>약칭명</th>
                                    <td><input type="text" name="" id=""></td>
                                </tr>
                                <tr>
                                    <th>사업자번호</th>
                                    <td class="input-box flex">
                                        <input type="text" name="" id="">
                                        <input type="text" name="" id="">
                                    </td>
                                    <th>종사업자번호</th>
                                    <td class="input-box flex">
                                        <input type="text" name="" id="">
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>법인/주민번호</th>
                                    <td class="flex input-box">
                                        <input type="text" name="" id="">
                                        <input type="text" name="" id="">
                                    </td>
                                    <th>세금계산서종류</th>
                                    <td class="flex input-box">
                                        <select name="" id="">
                                            <option value="">전자세금계산서</option>
                                            <option value="">종이세금계산서</option>
                                            <option value="">기타</option>
                                        </select>
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>대표자명</th>
                                    <td class=" input-box flex">
                                        <input type="text" name="" id="">
                                        <!-- <input type="text" name="" id=""> -->
                                    </td>
                                    <th>홈페이지</th>
                                    <td>
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>업태</th>
                                    <td class=" input-box flex">
                                        <input type="text" name="" id="">
                                    </td>
                                    <th>종목</th>
                                    <td>
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr class="address-row">
                                    <th>사업장주소</th>
                                    <th>
                                        <input type="text" name="" id="">
                                        <button>검색</button>
                                    </th>
                                    <td colspan="3">
                                        <input type="text" name="" id="">

                                    </td>


                                </tr>
                                <tr>

                                    <th>전화번호</th>
                                    <td class="input-box flex">
                                        <input type="text" name="" id="">
                                        <input type="text" name="" id="">
                                    </td>

                                    <th>팩스번호</th>
                                    <td class="input-box flex">
                                        <input type="text" name="" id="">
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>사업자구분</th>
                                    <td class="flex">
                                        <select name="" id="">
                                            <option value="">법인</option>
                                            <option value="">개인</option>
                                        </select>
                                    </td>
                                    <th>해외여부</th>
                                    <td class="input-box flex">
                                        <select name="" id="">
                                            <option value="">국내</option>
                                            <option value="">해외</option>
                                        </select>
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>과세구분</th>
                                    <td class="flex">
                                        <select name="" id="">
                                            <option value="">과세</option>
                                            <option value="">면세</option>
                                        </select>
                                    </td>
                                    <th>거래코드</th>
                                    <td class="input-box flex">
                                        <select name="" id="">
                                            <option value="">내수</option>
                                            <option value="">Local</option>
                                            <option value="">직수출</option>
                                        </select>
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>특수관계자</th>
                                    <td>
                                        <select name="" id="">
                                            <option value="">일반</option>
                                        </select>
                                    </td>
                                    <th>계약기간</th>
                                    <td class="input-box flex">
                                        <input class=" mr1" type="date" id="date" value="2024-03-04">~
                                        <input class=" mr1" type="date" id="date" value="2024-03-04">

                                    </td>
                                </tr>
                                <tr>
                                    <th>담당자1</th>
                                    <td class="input-box flex">
                                        <input type="text" name="" id="">
                                        <input type="text" name="" id="">
                                    </td>
                                    <th>담당자2</th>
                                    <td class="input-box flex">
                                        <input type="text" name="" id="">
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>모바일번호1</th>
                                    <td class="input-box flex">
                                        <input type="text" name="" id="">
                                        <input type="text" name="" id="">
                                    </td>
                                    <th>모바일번호2</th>
                                    <td class="input-box flex">
                                        <input type="text" name="" id="">
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>이메일1</th>
                                    <td>
                                        <input type="text" name="" id="">
                                    </td>
                                    <th>이메일2</th>
                                    <td>
                                        <input type="text" name="" id="">
                                    </td>
                                </tr>
                                <tr>
                                    <th>거래여부</th>
                                    <td>
                                        <input type="checkbox" name="" id="a">
                                        <label for="a">거래</label>
                                        <input type="checkbox" name="" id="b">
                                        <label for="b">중지</label>
                                    </td>
                                    <th>지급조건</th>
                                    <td>
                                        <select name="" id="">
                                            <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>
                                        <input type="checkbox" name="" id="a">
                                        <label for="a">매입</label>
                                        <input type="checkbox" name="" id="b">
                                        <label for="b">매출</label>
                                    </td>
                                    <td colspan="6">
                                        <input type="text">
                                    </td>
                                </tr>
                                <tr>
                                    <th>사용처</th>
                                    <th colspan="6">
                                        <input type="checkbox" name="" id="c">
                                        <label for="c">회계</label>
                                        <input type="checkbox" name="" id="c">
                                        <label for="c">영업</label>
                                        <input type="checkbox" name="" id="c">
                                        <label for="c">원자재</label>
                                        <input type="checkbox" name="" id="c">
                                        <label for="c">부자재</label>
                                        <input type="checkbox" name="" id="c">
                                        <label for="c">폐기물</label>
                                        <input type="checkbox" name="" id="c">
                                        <label for="c">약품</label>
                                    </th>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <div class=" flex section-wrap pd3" style="gap: 30px; background-color: ">
                        <table class="list-table">
                            <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                            <colgroup>
                                <col style="width: ;">
                                <col style="width: ;">
                                <col style="width: ;">
                                <col style="width: ;">
                            </colgroup>
                            <thead>
                                <tr class="table-header">
                                    <th>No</th>
                                    <th>user ID</th>
                                    <th>이름</th>
                                    <th>생년월일</th>
                                    <th>성별</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>test123</td>
                                    <td>홍길동</td>
                                    <td>1999.01.01</td>
                                    <td>여</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>test123</td>
                                    <td>홍길동</td>
                                    <td>1999.01.01</td>
                                    <td>여</td>
                                </tr>
                                <tr v-if="postList === 0">
                                    <td colspan="5" class="no-list">검색조건에 해당하는 데이터가 없습니다.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

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

    },
    watch: {

    },
    computed: {

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

<style></style>