<!DOCTYPE html>
<html lang="ko"
	  xmlns:th="http://www.thymeleaf.org">
<!--
 *******************************************************************************
 * @source  : SupplyCompanySearchForm.html
 * @desc    : 공급업체 목록 페이지
 *============================================================================
 * STYLE24
 * Copyright(C) 2020 TSIT, All rights reserved.
 *============================================================================
 * VER  DATE         AUTHOR      DESCRIPTION
 * ===  ===========  ==========  =============================================
 * 1.0  2020.12.23   xodud1202   최초 작성
 *******************************************************************************
 -->
<div class="modalPopup" data-width="500" id="popupCompanyList">
	<div class="panelStyle">
		<!-- TITLE -->
		<div class="panelTitle">
			<strong>공급업체 목록</strong>
			<button type="button" class="close" onclick="uifnPopupClose('popupCompanyList');"><em class="fa fa-times"></em></button>
		</div>
		<!-- //TITLE -->

		<!-- 검색 조건 -->
		<div class="panelContent">
			<form id="searchCompanyListForm" name="searchCompanyListForm" action="#" th:action="@{'/business/supply/company/list'}" onsubmit="$('#btnSearchCompanyList').trigger('click'); return false;">

				<table class="frmStyle" aria-describedby="검색조건">
					<colgroup>
						<col style="width:15%;"/>
						<col/>
					</colgroup>
					<tbody>
					<tr>
						<th>공급업체명</th>
						<td>
							<input type="text" name="searchTxt" th:value="${params.searchTxt}" maxlength="20" onkeypress="if (event.keyCode == 13) { $('#btnSearchCompanyList').trigger('click'); }"/>
						</td>
					</tr>
					</tbody>
				</table>
				<ul class="panelBar">
					<li class="center">
						<button type="button" class="btn btn-base btn-lg" id="btnSearchCompanyList">조회</button>
					</li>
				</ul>
			</form>
		</div>
		<!-- //검색 조건 -->

		<!-- 리스트 영역 -->
		<div class="panelContent">
			<div id="gridComapnyList" style="width: 100%; height: 470px" class="ag-theme-balham"></div>
		</div>
		<!-- //리스트 영역 -->

		<!-- 버튼 배치 영역 -->
		<ul class="panelBar">
			<li class="right">
				<button type="button" class="btn btn-info btn-lg" id="btnConfirmCompany">확인</button>
			</li>
		</ul>
	</div>

	<script th:inline="javascript">
		/*<![CDATA[*/
		let columnDefsList = [
			{width: 40, minWidth: 40, cellClass: 'text-center', headerCheckboxSelection: true, checkboxSelection: true, filter: false},
			{headerName: "공급업체번호", field: "supplyCompCd", width: 120, cellClass: 'text-center'},
			{headerName: "공급업체국문명", field: "supplyCompNm", width: 150, cellClass: 'text-center'},
			{headerName: "입점상태", field: "supplyStatNm", width: 150, cellClass: 'text-center'}
		];

		let gridOptionsCompanyList = gagaAgGrid.getGridOptions(columnDefsList);

		// Row double click
		gridOptionsCompanyList.onRowDoubleClicked = function(event) {
			$('#btnConfirmCompany').trigger('click');
		}

		// 조회
		$('#btnSearchCompanyList').on('click', function() {
			// Fetch data
			gagaAgGrid.fetch($('#searchCompanyListForm').prop('action'), gridOptionsCompanyList, '#searchCompanyListForm');
		});

		// 확인
		$('#btnConfirmCompany').on('click', function() {
			var selectedData = gagaAgGrid.selectedRowData(gridOptionsCompanyList);

			if (selectedData.length == 0) {
				mcxDialog.alert('선택된 공급업체가 없습니다.');
				return false;
			}

			var callbackFn = [[${params.callbackFn}]];

			var jsonData = JSON.stringify(selectedData);

			if (typeof callbackFn != 'undefined' && callbackFn) {
				if (typeof callbackFn == 'function') {
					callbackFn(jsonData);
				} else {
					if (callbackFn) {
						if (callbackFn.indexOf("(") == -1) {
							eval(callbackFn + "(" + jsonData + ")");
						} else {
							eval(callbackFn(jsonData));
						}
					}
				}
				uifnPopupClose('popupCompanyList');
			}
		});

		$(document).ready(function() {
			// Create a agGrid
			gagaAgGrid.createGrid('gridComapnyList', gridOptionsCompanyList);
		});
		/*]]>*/
	</script>

</div>

</html>
