<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>

<c:set var="prefixName" scope="request">단속 상세 정보</c:set>

<!-- inner page html -->
<div class="content-pop" data-doctx="${pageName}">
    <!-- Content -->
    <div class="container flex-grow-1 px-0">
        <div class="card">
            <!-- 입력 영역 -->
            <form name="frmEdit">
                <!-- hidden -->
                <input type="hidden" name="sggCd" data-map="SGG_CD" />
                <input type="hidden" name="taskSeCd" data-map="TASK_SE_CD" />
                <input type="hidden" name="crdnId" data-map="CRDN_ID" />

                <div class="row g-1">
                    <div class="col-md-6">
                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end required" for="crdnYmd">단속일자</label>
                        <input is="id-input" type="text" class="form-control form-date" name="crdnYmd" data-map="CRDN_YMD"
                            data-fmt-type="day" autocomplete="off" title="날짜 선택" maxlength="10" required />
                        <button type="button" class="bx bx-lg bx-calendar bg-white" name="btnCrdnYmd"></button>
                    </div>
                    <div class="col-md-6">
                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end required" for="crdnTm">단속시간</label>
                        <input is="id-input" type="text" class="form-control form-time w-px-100" name="crdnTm" data-map="CRDN_TM"
                            data-fmt-type="time" autocomplete="off" title="시간" maxlength="8" required placeholder="시:분:초" />
                    </div>
                    <div class="col-md-6">
                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end required" for="vhrno">자동차등록번호</label>
                        <input is="id-input" type="text" class="form-control w-px-120" name="vhrno" data-map="VHRNO" required />
                        <button type="button" name="btnVehicle" class="btn btn-sm btn-outline-dark" title="차량 검색">조회</button>
                    </div>
                    <div class="col-md-6">
                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end required" for="vltnCd">위반내용</label>
                        <select is="id-select" class="form-select" name="vltnCd" data-map="VLTN_CD" required>
                            <c:forEach items="${VLTNList}" var="item">
                                <option value="${item.code}">${item.value}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="col-md-6 select2-primary">
                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end required" for="crdnStdgNm">법정동</label>
                        <input is="id-input" type="text" class="form-control w-40" name="crdnStdgNm" data-map="CRDN_STDG_NM" list="stdgNmList" />
                        <datalist is="id-datalist" name="stdgNmList">
                            <c:forEach items="${stdgNmList}" var="item">
                                <option value="${item}"></option>
                            </c:forEach>
                        </datalist>
                    </div>
                    <div class="col-md-6 select2-primary">
                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnRoadNm">도로명</label>
                        <input is="id-input" type="text" class="form-control w-40" name="crdnRoadNm" data-map="CRDN_ROAD_NM" />
                    </div>
                    <div class="col-md-12">
                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnPlc">단속장소</label>
                        <input is="id-input" type="text" class="form-control w-80" name="crdnPlc" data-map="CRDN_PLC" data-maxlengthb="200" />
                    </div>
                    <div class="col-md-12" slot="edit">
                        <template class="bpv">
                            <slot>
                                <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="dtlCrdnPlc">상세단속장소</label>
                                <input is="id-input" type="text" class="form-control w-80" name="dtlCrdnPlc" data-map="DTL_CRDN_PLC" data-maxlengthb="200" />
                            </slot>
                        </template>
                    </div>
                    <div class="col-md-6" slot="edit">
                        <template class="pvs">
                            <slot>
                                <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="crdnSpareaCd">특별구역</label>
                                <select is="id-select" class="form-select w-px-160" name="crdnSpareaCd" data-map="CRDN_SPAREA_CD">
                                    <c:forEach items="${FIM007List}" var="item">
                                        <option value="${item.code}">${item.value}</option>
                                    </c:forEach>
                                </select>
                            </slot>
                        </template>
                    </div>
                    <div class="col-md-6" slot="edit">
                        <template class="pvs">
                            <slot>
                                <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="ovtmYn">2시간초과</label>
                                <select is="id-select" class="form-select" name="ovtmYn" data-map="OVTM_YN">
                                    <c:forEach items="${CMN006List}" var="item">
                                        <option value="${item.code}">${item.value}</option>
                                    </c:forEach>
                                </select>
                            </slot>
                        </template>
                    </div>
                    <!-- 기타 내용 -->
                    <div class="col-md-12">
                        <label is="name-label" class="col-form-label bg-lighter pe-2 w-px-120 text-sm-end" for="etcCn">특기사항</label>
                        <input is="id-input" type="text" class="form-control w-80" name="etcCn" data-map="ETC_CN" data-maxlengthb="1000" />
                    </div>
                    <div class="col-md-6">
                        <label is="name-label" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end" for="vin">차대번호</label>
                        <input is="id-input" type="text" class="form-control" name="vin" data-map="VIN" readonly placeholder="입력항목이 아닙니다." />
                    </div>
                    <div class="col-md-6">
                        <label is="name-label" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end" for="vhclNm">차량명칭</label>
                        <input is="id-input" type="text" class="form-control" name="vhclNm" data-map="VHCL_NM" readonly placeholder="입력항목이 아닙니다." />
                    </div>
                    <div class="col-md-6">
                        <label is="name-label" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end" for="vhclColr">차량색상</label>
                        <input is="id-input" type="text" class="form-control" name="vhclColr" data-map="VHCL_COLR" readonly placeholder="입력항목이 아닙니다." />
                    </div>
                    <div class="col-md-6">
                        <label is="name-label" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end" for="vhclCpct">승차정원</label>
                        <input is="id-input" type="text" class="form-control" name="vhclCpct" data-map="VHCL_CPCT" placeholder="승차정원" />
                    </div>
                    <div class="col-md-12" slot="edit">
                        <template class="pvs bpv">
                            <slot>
                                <label is="name-label" for="ffnlgCarmdlCd" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">차종</label>
                                <select is="id-select" name="ffnlgCarmdlCd" class="form-select w-px-140" data-map="FFNLG_CARMDL_CD">
                                    <option value=""></option>
                                    <c:forEach items="${FIM009List}" var="item">
                                        <option value="${item.code}">${item.value}</option>
                                    </c:forEach>
                                </select>
                            </slot>
                        </template>
                    </div>
                    <div class="col-md-12" slot="edit">
                        <template class="eca">
                            <slot>
                                <label is="name-label" for="useFuelCd" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">연료구분</label>
                                <select is="id-select"    class="form-select" name="useFuelCd" data-map="USE_FUEL_CD" disabled>
                                    <option value=""></option>
                                    <c:forEach items="${LVS005List}" var="item">
                                        <option value="${item.code}">${item.value}</option>
                                    </c:forEach>
                                </select>
                            </slot>
                        </template>
                    </div>
                    <div class="col-md-6" slot="edit">
                        <template class="dpv eca pvs">
                            <slot>
                                <label is="name-label" for="towngYn" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">견인지시</label>
                                <select is="id-select" name="towngYn" class="form-select w-px-140" data-map="TOWNG_YN">
                                    <c:forEach items="${FIM053List}" var="item">
                                        <option value="${item.code}">${item.value}</option>
                                    </c:forEach>
                                </select>
                            </slot>
                        </template>
                    </div>
                    <div class="col-md-6" slot="edit">
                        <template class="dpv eca pvs">
                            <slot>
                                <label is="name-label" for="crdnSn" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">단속일련번호</label>
                                <input type="text" is="id-input" name="crdnSn"
                                class="form-control" data-map="CRDN_SN" maxlength="20" data-maxlengthb="20" />
                            </slot>
                        </template>
                    </div>
                    <div class="col-md-6" slot="edit">
                        <template class="dpv">
                            <slot>
                                <label is="name-label" for="prkPsbltyRsltCd" class="w-px-120 bg-lighter pe-2 col-form-label text-sm-end">장애차량확인</label>
                                <select is="id-select" name="prkPsbltyRsltCd" class="form-select w-px-120" data-map="PRK_PSBLTY_RSLT_CD">
                                    <c:forEach items="${FIM034List}" var="item">
                                        <c:if test="${item.code == '0' or item.code == '1'}">
                                            <option value="${item.code}">${item.value}</option>
                                        </c:if>
                                    </c:forEach>
                                </select>
                            </slot>
                        </template>
                    </div>
                </div>
            </form>
            <!-- 입력 영역 -->

            <!-- 업무 버튼 및 건수 표시 -->
        <div>
            <span class="container-page-btn">
                <!-- 업무 버튼 -->
                <span class="container-window-btn-right">
                    <button type="button" class="btn btn-primary w-px-120" name="btnSave" title="저장">
                        저장
                    </button>
                </span>
            </span>
        </div>
        <!-- 업무 버튼 및 건수 표시 -->
    </div> <!-- <div class="container flex-grow-1 px-0"> -->
    <!-- Content -->
</div>
<!-- / inner page html <div class="content-pop"> -->

<script>
    LoadScript("crdn06020Script",wctx.url("/resources/js/fims/crdn/crdn06020.js?ver=${ver}"));

    /**************************************************************************
     * Global Variable
     **************************************************************************/
    pageObject["${pageName}"] = newDoctxFinder("${pageName}");

    /**************************************************************************
    * script 진입
    **************************************************************************/
    $(document).ready(function() {
        // pageObject
        let $P = pageObject["${pageName}"];

        // URL
        $P.prefixUrl = "${prefixUrl}";
        // infoDialog 호출 용도(view 조회(편집불가), create 등록, update 수정)
        $P.callPurpose = "${callPurpose}";
        // datasetControl
        $P.ctrl = newCrdn06020Control("${pageName}", "[data-doctx=${pageName}]");

        /**************************************************************************
        * 사용자 함수(function)
        **************************************************************************/
        // 업무별 입력 항목
        $P.fnRenderTask = (taskSeCd) => {
            if (!taskSeCd) {
                taskSeCd = $P.$findn("taskSeCd").val();
            }

            FimsSupport.renderForTask($P.findn("frmEdit"), taskSeCd.toLowerCase());
        }

        // 차적 조회
        $P.fnGetVehicle = async (sggCd, vhrno, levy_stdde) => {
            let resp = await FimsSupport.getVhclInfo(sggCd, vhrno, levy_stdde);
            // 항목 초기화
            $P.$findn("vin").val("");
            $P.$findn("vhclNm").val("");
            $P.$findn("vhclColr").val("");
            $P.$findn("useFuelCd").val("");
            $P.$findn("ffnlgCarmdlCd").val("");

            if (!resp.found)
                return dialog.alert({
                    content: "차량 정보가 없습니다.",
                    init: function() {
                        AppSupport.setDialogZindex();
                        AppSupport.focusClose();
                    }
                });

            let vehicle = resp.vehicle;

            // 단속(TB_CRDN) - 공통 항목
            $P.$findn("vin").val(vehicle.vin);                          // 차대번호
            $P.$findn("vhclNm").val(vehicle.cnm);                       // 차량명
            $P.$findn("vhclColr").val(vehicle.color_nm);                // 차량색상

            // 단속 부가 정보(TB_CRDN_ADI) - 사용 연료 코드
            $P.$findn("useFuelCd").val(vehicle.use_fuel_code);

            // 단속 부가 정보(TB_CRDN_ADI) - 과태료 차종 코드
            if (vehicle.vhcty_asort_code == "1") {                      // 승용
                $P.$findn("ffnlgCarmdlCd").val("11");
            } else if (vehicle.vhcty_asort_code == "2") {               // 승합
                $P.$findn("ffnlgCarmdlCd").val("12");
            } else if (vehicle.vhcty_asort_code == "3") {               // 화물
                if(vehicle.mxmm_ldg <= 4000){
                    $P.$findn("ffnlgCarmdlCd").val("13");
                } else {
                    $P.$findn("ffnlgCarmdlCd").val("14");
                }
            } else if (vehicle.vhcty_asort_code == "4") {               // 특수
                $P.$findn("ffnlgCarmdlCd").val("15");
            } else {
                $P.$findn("ffnlgCarmdlCd").val("");
            }
        }

        // 차적 조회
        $P.fnVehicle = (title) => {
            // 단속일자
            let crdnYmd = $P.$findn("crdnYmd").val().replaceAll("-", "");
            if (!crdnYmd)
                return dialog.alert({
                    content: "단속일자를 입력하세요.",
                    init: function() {
                        AppSupport.setDialogZindex();
                        AppSupport.focusClose();
                    },
                    onClose : function() { $P.$findn("crdnYmd").focus(); }
                });
            // 차량번호
            let vhrno = $P.$findn("vhrno").val();
            if (!vhrno)
                return dialog.alert({
                    content: "차량번호를 입력하세요.",
                    init: function() {
                        AppSupport.setDialogZindex();
                        AppSupport.focusClose();
                    },
                    onClose : function() { $P.$findn("vhrno").focus(); }
                });

            $P.fnGetVehicle($P.$findn("sggCd").val(), vhrno, crdnYmd);
        }

        /**************************************************************************
        * 버튼 clickEvent
        **************************************************************************/
        // 저장
        $P.fnSave = () => {
            // validate 확인
            if (!AppSupport.customValidate($P.$findn("frmEdit").find("input, select, textarea"))) return;

            // 단속 ID
            let crdnId = $P.ctrl.dataset.getValue("CRDN_ID");
            // 단속 ID 가 없다면.. return
            if (!crdnId) return;

            dialog.alert({
                  content: "현재 " + $P.ctrl.prefixName + " 정보를 저장하시겠습니까?"
                , init: () => { AppSupport.setDialogZindex(); }
                , onOK: () => {
                    let params = new FimsFormFields($P.selectorn("frmEdit")).get(); // formFields

                    $P.ctrl.save(params);
                }
            });
        }

        /**************************************************************************
        * 초기 셋팅
        **************************************************************************/
        // 이벤트 설정
        $P.setEvent = () => {
            // form-date 항목에서 키보드로 입력시 날짜 포맷팅 적용
            $P.$findn("frmEdit").find(".form-date").each(function() {
                $(this).on("input",function() {
                    let value = this.value.replaceAll("-", "");

                    if (value.length > 7) {
                        this.value = value.substring(0,4) + "-" + value.substring(4,6) + "-" + value.substring(6);
                    } else if(value.length > 5) {
                        this.value = value.substring(0,4) + "-" + value.substring(4);
                    }
                });
            });
            $P.$findn("frmEdit").find(".form-time").each(function() {
                $(this).on("input",function() {
                    let value = this.value.replaceAll(":", "");

                    if (value.length > 5) {
                        this.value = value.substring(0,2) + ":" + value.substring(2,4) + ":" + value.substring(4);
                    } else if (value.length > 3) {
                        this.value = value.substring(0,2) + ":" + value.substring(2);
                    }

                });
            });

            // 차량번호 엔터 이벤트
            $P.$findn("vhrno").onEnterPress(function() {
                $P.fnVehicle("차적 조회");
            });

            // 버튼 이벤트
            $P.$findn("btnVehicle").on("click", () => $P.fnVehicle());          // 차량번호 조회
            $P.$findn("btnSave").on("click", () => $P.fnSave());                // 저장
        }

        // 초기 화면 설정
        $P.fnReset = () => {
            // 초기화
            $P.findn("frmEdit").reset();                                        // 화면 초기화
            AppSupport.initDatepicker($P.findn("frmEdit"));                     // 달력 초기화

            // 기본 데이터 설정
            $P.$findn("crdnYmd").datepicker("setDate", TODAY());                // 단속 일자
        }

        /**************************************************************************
        * 최초 실행 함수
        **************************************************************************/
        // 1. 이벤트 설정
        $P.setEvent();

        // 2. 초기 화면 설정
        $P.fnReset();

        // 3. Dataset 설정
        $P.ctrl.setData([${Info}]);
    });

</script>
