<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<!DOCTYPE html>
<html
		lang="kr"
		class="light-style layout-navbar-fixed layout-menu-fixed"
		dir="ltr"
		data-theme="theme-default"
		data-assets-path="<c:url value="/webjars/"/>"
		data-template="vertical-menu-template-starter">
<head>
	<meta charset="UTF-8">
	<title>북촌 통행제한 관리 시스템</title>

	<!-- Favicon -->
	<link rel="icon" type="image/x-icon" href="<c:url value="/webjars/img/favicon.ico"/>" />
	<!-- Fonts -->
	<link rel="stylesheet" href="<c:url value="/webjars/applib/font/notoSansKr/fontface.css"/>" />
	<!-- Icons. Uncomment required icon fonts -->
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/fonts/boxicons.css"/>" />
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/fonts/fontawesome.css"/>" />
	<link rel="stylesheet" href="<c:url value="/webjars/applib/font/bootstrap-icons.css"/>" />
	<link rel="stylesheet" href="<c:url value="/webjars/applib/font/material-icons.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/fonts/xit-icon.css"/>" />
	<!-- Core CSS -->
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/css/rtl/core.css"/>" class="template-customizer-core-css" />
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/css/rtl/theme-default.css"/>" class="template-customizer-theme-css" />
	<link rel="stylesheet" href="<c:url value="/webjars/css/styles.css"/>" />

	<link rel="stylesheet" href="<c:url value="/webjars/applib/css/overwrite.css?${ver}"/>" />
	<link rel="stylesheet" href="<c:url value="/webjars/applib/css/applib.css?${ver}"/>" />

	<link rel="stylesheet" href="<c:url value="/resources/css/fims.css?${ver}"/>" />

	<!-- Vendors CSS -->
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/libs/fims/paintweb/style/style.css"/>?${ver}" />
</head>
<body>
<c:set var="pageKorName" scope="request">사진 편집</c:set>

<img id="editableImage" title="원본" />
<div id="paintWebTarget"></div>

<!-- Core JS -->
<script src="<c:url value="/webjars/3rd-party/sneat/libs/popper/popper.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/js/bootstrap.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/libs/jquery/jquery.js"/>"></script>

<script src="<c:url value="/webjars/3rd-party/sneat/js/config.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/js/helpers.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/js/menu.js"/>"></script>

<!-- base -->
<script src="<c:url value="/webjars/js/base/base.js"/>"></script>

<!-- json, xhtml -->
<script src="<c:url value="/resources/libs/fims/paintweb/korean.js?${ver}"/>"></script>
<script src="<c:url value="/resources/libs/fims/paintweb/paintweb-config.js?${ver}"/>"></script>
<script src="<c:url value="/resources/libs/fims/paintweb/layout.js?${ver}"/>"></script>
<!-- init -->
<script src="<c:url value="/resources/libs/fims/paintweb/pwlib.js?${ver}"/>"></script>
<script src="<c:url value="/resources/libs/fims/paintweb/guiScript.js?${ver}"/>"></script>

<script src="<c:url value="/resources/libs/fims/paintweb/paintweb.js?${ver}"/>"></script>
<script src="<c:url value="/resources/libs/fims/paintweb/html2canvas.js?${ver}"/>"></script>



<script>
var openerPageName = "${openerPageName}";


var pw;
var originalInfomation = {};
var editableImage = null;
var isNumberPlate = false;

const initEditor = () => {

    pw = new PaintWeb();
    pw.config.imageLoad = editableImage;
    pw.config.guiPlaceholder = document.getElementById('paintWebTarget');
    pw.config.imageSave = fnImageSaveTo;
    pw.config.afterImageSave = fnAfterImageSave;

    pw.init();
};

function fnImageSaveTo(file, imgWidth, imgHeight, doc, _self){

   	console.log(doc);
   	console.log(_self);

    if(isNumberPlate){
        if(!confirm('번호판 이미지를 추가하시겠습니까?'))  return;
    }else{
        if(!confirm('편집한 단속이미지를 저장하시겠습니까?'))  return;
    }

    window.opener.pageObject[openerPageName].editPhotoCallback(file, originalInfomation, isNumberPlate);
    return true;
};

function fnAfterImageSave(){
	window.close();
};

async function fnCarLink(vhrnoEl){
	result = await window.opener.pageObject[openerPageName].carLinkFunc(vhrnoEl);

	if(result.msg != null && result.msg != ""){
		alert(result.msg);
		return;
	}

	if(result.vhrno == null || result.vhrno == ""){
        $("input[name='vhclNm']").val("");
        $("input[name='vhclColr']").val("");
        alert("차량조회 결과가 없습니다.");
	} else {
		$("input[name='vhrno']").val(result.vhrno);
        $("input[name='vhclNm']").val(result.vhclNm);
        $("input[name='vhclColr']").val(result.vhclColr);
	}

}

$(document).ready(function(){

  	var fileInfo = [${fileInfo}];

   	if(fileInfo.length > 0){
   		originalInfomation = fileInfo[0];

   		var fileUrl = fileInfo[0].URL;
   		var fullSrc = "${pageContext.request.contextPath}" + "/" + fileUrl;

   		editableImage = document.getElementById('editableImage');
   		editableImage.src = fullSrc;
   		editableImage.onload = function () {
	        initEditor();
	        editableImage.hidden = true;

	        var vhclInfo = window.opener.pageObject[openerPageName].carInfoFunc();
	        $("input[name='vhrno']").val(vhclInfo.vhrno);
	        $("input[name='vhclNm']").val(vhclInfo.vhclNm);
	        $("input[name='vhclColr']").val(vhclInfo.vhclColr);

	        $("input[name='vhrno']").onEnterPress(function(){
	        	fnCarLink(event.target);
	        });
       }
   	} else {
   		alert("사진 파일이 없습니다.");
   	}

});
</script>

</body>
</html>