LifeCenter/src/main/webapp/WEB-INF/jsp/clinic/info.jsp

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
<link rel="stylesheet" href="/resources/bower_components/mdi/css/materialdesignicons.min.css">
<script src="/resources/bower_components/moment/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>

/*
 * 비대면 진료 시작
 */
function nonFaceStart() {
    getAjax("/patient/nonFaceStart", $("#hiddenForm").serialize(), function ( result ) {
        
        $("#nonface").append('<input type="hidden" name="member_name" value="'+result.member_name+'" />');
        $("#nonface").append('<input type="hidden" name="member_id" value="'+result.member_id+'" />');
        $("#nonface").append('<input type="hidden" name="room_id" value="'+result.room_id+'" />');
        $("#nonface").append('<input type="hidden" name="hashData" value="'+result.hashData+'">');
        $("#nonface").append('<input type="hidden" name="token" value="'+result.token+'">');
        $("#nonface").append('<input type="hidden" name="api_key" value="'+result.api_key+'">');

        $("#nonface").append('<input type="hidden" name="classify" value="d">');

        var gsWin = window.open('about:blank','nonface');
        var frm =document.nonface;
        frm.target ="nonface";
        frm.method ="post";
        frm.submit();

    }, function(){
    }, function(){
        
    });
}

/*
 * 건강정보이력 탭 처리
 */
 
function handlePhrData() {
	var phrType = $("#phrTypeSelect option:selected").val();
	var phrValue = "";
	if (phrType === "bloodPressure") {
		phrValueSystolic = $("#phrValueSystolic").val();
		phrValueDiastolic = $("#phrValueDiastolic").val();

		if (!phrValueSystolic || phrValueSystolic.length === 0) {
			alert("수축기 혈압을 입력해 주세요.");
			return;
		}
		if (!phrValueDiastolic || phrValueDiastolic.length === 0) {
			alert("이완기 혈압을 입력해 주세요.");
			return;
		}

		createPhrData(${patientIdx}, "bloodPressure", phrValueSystolic, phrValueDiastolic);

		$("#phrValueSystolic").val("");
		$("#phrValueDiastolic").val("");
	}
	else {
		phrValue = $("#phrValue").val();
		
		if (!phrValue || phrValue.length === 0) {
			alert("값을 입력해 주세요.");
			return;
		}

		createPhrData(${patientIdx}, phrType, phrValue);

		$("#phrValue").val("");
	}

	$("#defaultModalPrimary_1").modal("hide");
}

function createPhrData(patientIdx, phrType, phrValue, phrValue2, needRetrieveData=true, recordedById="${data._SES_ID}", recordedByName="${data._SES_NAME}") {
	
	$.ajax({
        url      : "./api/phrData",
        data     : {patientIdx: patientIdx, phrType: phrType, phrValue: phrValue, phrValue2: phrValue2, recordedById: recordedById, recordedByName: recordedByName},
        method   : "POST",
        dataType : "json",
        success  : function( datas ){

            if (needRetrieveData) {
                retrievePhrData();
            }
        },
        error : function(error){
            alert(error.message);
        }
    }).done( function(){
    });
}

function retrievePhrData() {
	var phrType = $("#phrTypeSelect option:selected").val();
	var phrName = $("#phrTypeSelect option:selected").text();
	var params = {patientIdx: ${patientIdx}, phrType: phrType};

	$.ajax({
        url      : "./api/phrDatas",
        data     : params,
        method   : "GET",
        dataType : "json",
        success  : function( datas ){

						if (phrType==="bloodPressure") {
							drawBPChart(datas);
						}
						else {
            	drawPhrChart(datas, phrName);
						}

           	var html = "<thead><tr>";
			html += "<th>기록일시</th>";
			html += "<th>"+phrName+"</th>";
			html += "<th>기록자</th>";
			html += "</tr></thead>";
			html += "<tbody>";
			var contents = "<tr><td colspan=3>데이터가 없습니다.</td></tr>" ;
			if (datas.length > 0) {
				contents = "";
				datas.forEach(d => {
					var danger = d.isWarning ? "text-danger" : "";
					var row = "";
					row += "<tr>";
					row += "<td>" + d.createDate + "</td>";
					if (phrType==="bloodPressure") {
					row += "<td><span class='"+danger+"'>" + (isNaN(parseInt(d.phrValue)) ? "--" : parseInt(d.phrValue)) + " / " + (isNaN(parseInt(d.phrValue2)) ? "--" : parseInt(d.phrValue2)) + "</span></td>";
					}
					else if (phrType==="temperature") {
					row += "<td><span class='"+danger+"'>" + d.phrValue + "</span></td>";
					}
					else {
					row += "<td><span class='"+danger+"'>" + parseInt(d.phrValue) + "</span></td>";
					}
					row += "<td>" + d.recordedByName + "</td>";
					row += "</tr>";

					contents = row + contents;
				});
			};
			html += contents;
			html += "</tbody>";

			$("#phrDataTable").html(html);
        },
        error : function(error){
        	alert(error.message);
        }
    }).done( function(){
    });
}

var myChart = null;
function drawPhrChart(data, dataName) {

	if (myChart) {
		myChart.destroy();
		myChart = null;
	}

	var xDatas = [];
	var yDatas = [];
	data.forEach(d=> {
		var t = moment(d.createDate).format("MM-DD HH:mm:ss");
		xDatas.push(t);
		yDatas.push(d.phrValue);
	});
	var ctx = document.getElementById("phrChart").getContext('2d');
	myChart = new Chart(ctx, {
	    type: 'line',
	    data: {
	        labels: xDatas,
	        datasets: [{
	            label: dataName,
	            data: yDatas,
	            fill: false,
 	            backgroundColor: '#fff',
							borderColor: '#5b7dff',
							borderWidth: 2,
	        }]
	    },
	    options: {
	    	maintainAspectRatio: false,
	    }
	});
}

function drawBPChart(data) {

	if (myChart) {
		myChart.destroy();
		myChart = null;
	}

	var xDatas = [];
	var y1Datas = [];
	var y2Datas = [];
	data.forEach(d=> {
		var t = moment(d.createDate).format("MM-DD HH:mm:ss");
		xDatas.push(t);
		y1Datas.push(d.phrValue);
		y2Datas.push(d.phrValue2);
	});
	var ctx = document.getElementById("phrChart").getContext('2d');
	myChart = new Chart(ctx, {
	    type: 'line',
	    data: {
	        labels: xDatas,
	        datasets: [{
	            label: "수축기 혈압",
	            data: y1Datas,
	            fill: false,
 	            backgroundColor: '#fff',
							borderColor: '#5b7dff',
							borderWidth: 2,
	       			 },{
	            label: "이완기 혈압",
	            data: y2Datas,
	            fill: false,
 	            backgroundColor: '#fff',
							borderColor: 'rgb(255, 99, 132)',
							borderWidth: 2,
	        }]
	    },
	    options: {
	    	maintainAspectRatio: false,
	    }
	});
}

/*
 * 임상증상 탭 처리
 */
function handleSymptomData() {

	if ($("input:checkbox[id='etcCheck']").is(":checked") && !$("#etcContent").val().trim()) {
		alert("기타 증상이 체크되었습니다. 내용을 입력해 주세요.");
		$("#etcContent").val("");
		return;
	}

	var checkedCount = ($("#defaultModalPrimary_2 input[type='checkbox']:checked").length);
	if (checkedCount === 0) {
		alert("증상을 체크해 주세요.");
		return;
	}

	var symptomObject = {
		patientIdx: ${patientIdx},

		coughCheck: $("input:checkbox[id='coughCheck']").is(":checked") ? "Y" : "N",
		dyspneaCheck: $("input:checkbox[id='dyspneaCheck']").is(":checked") ? "Y" : "N",	
		coldFitCheck: $("input:checkbox[id='coldFitCheck']").is(":checked") ? "Y" : "N",
		musclePainCheck: $("input:checkbox[id='musclePainCheck']").is(":checked") ? "Y" : "N",
		headacheCheck: $("input:checkbox[id='headacheCheck']").is(":checked") ? "Y" : "N",

		soreThroatCheck: $("input:checkbox[id='soreThroatCheck']").is(":checked") ? "Y" : "N",
		smellPalateCheck: $("input:checkbox[id='smellPalateCheck']").is(":checked") ? "Y" : "N",
		fatigueCheck: $("input:checkbox[id='fatigueCheck']").is(":checked") ? "Y" : "N",
		appetiteLossCheck: $("input:checkbox[id='appetiteLossCheck']").is(":checked") ? "Y" : "N",
		sputumCheck: $("input:checkbox[id='sputumCheck']").is(":checked") ? "Y" : "N",

		ocinCheck: $("input:checkbox[id='ocinCheck']").is(":checked") ? "Y" : "N",
		vomitingCheck: $("input:checkbox[id='vomitingCheck']").is(":checked") ? "Y" : "N",
		diarrheaCheck: $("input:checkbox[id='diarrheaCheck']").is(":checked") ? "Y" : "N",
		dizzinessCheck: $("input:checkbox[id='dizzinessCheck']").is(":checked") ? "Y" : "N",
		noseCheck: $("input:checkbox[id='noseCheck']").is(":checked") ? "Y" : "N",

		etcCheck: $("input:checkbox[id='etcCheck']").is(":checked") ? "Y" : "N",
		etcContent: $("#etcContent").val(),
		recordedByName: "${data._SES_NAME}",
		recordedById: "${data._SES_ID}",
	}

	createSymptomData(symptomObject);

	$("#defaultModalPrimary_2 input[type='checkbox']:checked").prop("checked", false);
	$("#etcContent").val("");

	$("#defaultModalPrimary_2").modal("hide");
}

function createSymptomData(symptomObject) {
	
	$.ajax({
        url      : "./api/symptomData",
        data     : symptomObject,
        method   : "POST",
        dataType : "json",
        success  : function( datas ){

            retrieveSymptomData();
        },
        error : function(error){
        	alert(error.message);
        }
    }).done( function(){
    });
}

function retrieveSymptomData() {
	var params = {patientIdx: ${patientIdx}};

	$.ajax({
        url      : "./api/symptomDatas",
        data     : params,
        method   : "GET",
        dataType : "json",
        success  : function( datas ){

			var html = "<tr><td colspan=18>데이터가 없습니다.</td></tr>" ;
			var checkSymbol = '<i class="mdi mdi-check-bold"></i>';
			if (datas.length > 0) {
				html = "";
				contents = datas.forEach(d => {
					html += "<tr>";
					html += "<th>" + d.createDate + "</th>";
					html += "<td>" + (d.coughCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.dyspneaCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.coldFitCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.musclePainCheck === "Y" ? checkSymbol : "-") + "</td>";
					
					html += "<td>" + (d.headacheCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.soreThroatCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.smellPalateCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.fatigueCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.appetiteLossCheck === "Y" ? checkSymbol : "-") + "</td>";

					html += "<td>" + (d.sputumCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.ocinCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.vomitingCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.diarrheaCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.dizzinessCheck === "Y" ? checkSymbol : "-") + "</td>";

					html += "<td>" + (d.noseCheck === "Y" ? checkSymbol : "-") + "</td>";
					html += "<td>" + (d.etcCheck === "Y" ? d.etcContent : "-") + "</td>";
					html += "<td>" + d.recordedByName + "</td>";
					html += "</tr>";
				});
			};

			$("#symptomDataTable > tbody").html(html);
        },
        error : function(error){
        	alert(error.message);
        }
    }).done( function(){
    });
}

/*
 * 메모 탭 처리
 */

 function handleMemoData() {

	 var memoContent = $("#memoContent").val().trim();

	if (!memoContent) {
		alert("메모 내용을 입력해 주세요.");
		$("#memoContent").val("");
		return;
	}

	createMemoData(memoContent);

	$("#memoContent").val("");

	$("#defaultModalPrimaryMemo").modal("hide");
}

function createMemoData(memoContent) {
	
	$.ajax({
        url      : "./api/memoData",
        data     : {patientIdx:${patientIdx}, contents:memoContent, recordedByName:"${data._SES_NAME}", recordedById:"${data._SES_ID}"},
        method   : "POST",
        dataType : "json",
        success  : function( datas ){

            retrieveMemoData();
        },
        error : function(error){
        	alert(error.message);
        }
    }).done( function(){
    });
}

function retrieveMemoData() {
	var params = {patientIdx: ${patientIdx}};

	$.ajax({
        url      : "./api/memoDatas",
        data     : params,
        method   : "GET",
        dataType : "json",
        success  : function( datas ){

			var html = "<tr><td colspan=3>데이터가 없습니다.</td></tr>" ;
			if (datas.length > 0) {
				html = "";
				contents = datas.forEach(d => {
					html += "<tr>";
					html += "<td>" + d.createDate + "</td>";
					html += "<td><pre>" + d.contents + "</pre></td>";
					html += "<td>" + d.recordedByName + "</td>";
					html += "</tr>";
				});
			};

			$("#memoDataTable > tbody").html(html);
        },
        error : function(error){
        	alert(error.message);
        }
    }).done( function(){

    });
}

$(document).ready(function() {

	// 최초 로드시 phrData 체온이 로드됨. 해당 데이터 차트 그려줌.
	var datas = [];
	<c:forEach var="phr" items="${phrItems}" varStatus="status">
	datas.push({createDate: "${phr.createDate}", phrValue: "${phr.phrValue}"});
	</c:forEach>
	
	drawPhrChart(datas, "체온");

	// 상단 환자 정보 영역 토글 이벤트
	$('.toggle .card-header').click(function () {
		$('.toggle .card-header a.toggleBtn').toggleClass('active');
		$('.toggle .user-info').toggleClass('active');
	})
	
	// 탭 클릭 이벤트
	$(document).on('click','.tab-item',function(){
		var targetTab = $(this).attr('tabindex');
		$('.tab-item').removeClass('active');
		$('.tab').removeClass('in');
		$(this).addClass('active');
		$(targetTab).addClass('in');

		if (targetTab==="#tabPhr") {
			retrievePhrData();
		}
		else if (targetTab==="#tabSymptom") {
			retrieveSymptomData();
		}
		else if (targetTab==="#tabMemo") {
			retrieveMemoData();
		}
	});

	// phrData 기록 추가 클릭 이벤트
	$(document).on('click','[data-target="#defaultModalPrimary_1"]',function(){
		var selectData = $('#phrTypeSelect').find('option:selected').val();
		var healthInfoHTML = '';
		if(selectData == 'temperature'){
			healthInfoHTML += '<th>체온</th>';
			healthInfoHTML += '<td>';
			healthInfoHTML += '	<div class="form-group mb-xl-0">';
			healthInfoHTML += '		<input id="phrValue" class="form-control" type="number" placeholder="체온 입력">';
			healthInfoHTML += '	</div>';
			healthInfoHTML += '</td>';
		}
		else if(selectData == 'bloodPressure'){
			healthInfoHTML += '<th>혈압</th>';
			healthInfoHTML += '<td>';
			healthInfoHTML += '	<div class="form-group mb-xl-0">';
			healthInfoHTML += '		<input id="phrValueSystolic" class="form-control mb-2" type="number" placeholder="수축기 혈압 입력">';
			healthInfoHTML += '		<input id="phrValueDiastolic" class="form-control mb-2" type="number" placeholder="이완기 혈압 입력">';
			healthInfoHTML += '	</div>';
			healthInfoHTML += '</td>';
		}
		else if(selectData == 'pulseRate'){
			healthInfoHTML += '<th>맥박</th>';
			healthInfoHTML += '<td>';
			healthInfoHTML += '	<div class="form-group mb-xl-0">';
			healthInfoHTML += '		<input id="phrValue" class="form-control" type="number" placeholder="맥박 입력">';
			healthInfoHTML += '	</div>';
			healthInfoHTML += '</td>';
		}
		else if(selectData == 'oxygenSaturation'){
			healthInfoHTML += '<th>산소포화도</th>';
			healthInfoHTML += '<td>';
			healthInfoHTML += '	<div class="form-group mb-xl-0">';
			healthInfoHTML += '		<input id="phrValue" class="form-control" type="text" placeholder="산소포화도 입력">';
			healthInfoHTML += '	</div>';
			healthInfoHTML += '</td>';
		}
		else if(selectData == 'bloodSugar'){
			healthInfoHTML += '<th>혈당</th>';
			healthInfoHTML += '<td>';
			healthInfoHTML += '	<div class="form-group mb-xl-0">';
			healthInfoHTML += '		<input id="phrValue" class="form-control" type="text" placeholder="혈당 입력">';
			healthInfoHTML += '	</div>';
			healthInfoHTML += '</td>';
		}
		else {

		}
		$('.healthInfo').html(healthInfoHTML);
		setTimeout(function (){
			$('.healthInfo').find('.form-group input:first-child').focus();
		}, 500);
		
	});
});


</script>
</head>

<body>
	<form id="nonface" name="nonface" action="https://lemon.medihere.com/app/vc">
  </form>
	<div class="modal fade" id="defaultModalPrimary_1" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">건강정보 입력</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span> </button>
				</div>
				<div class="modal-body m-3">
					<table class="table mobile-table">
						<colgroup>
							<col style="width: 30%">
							<col style="width: 70%">
						</colgroup>
						<tr>
							<th>기록자</th>
							<td>
								<div class="form-group mb-xl-0">
									<input class="form-control" type="text" value="${data._SES_NAME}" readonly>
								</div>
							</td>
						</tr>
						<tr class="healthInfo">
						<!--  컨텐츠 동적 생성 -->
						</tr>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
					<button type="button" class="btn btn-primary" onclick="handlePhrData()">등록</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="defaultModalPrimary_2" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">임상증상 입력</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span> </button>
				</div>
				<div class="modal-body m-3">
					<table class="table mobile-table">
						<colgroup>
							<col style="width: 30%">
							<col style="width: 70%">
						</colgroup>
						<tr>
							<th>기록자</th>
							<td>
								<div class="form-group mb-xl-0">
									<input class="form-control" type="text" value="${data._SES_NAME}" readonly>
								</div>
							</td>
						</tr>
						<tr>
							<th>임상증상</th>
							<td>
								<div class="form-group mb-xl-0">
									<label class="form-check form-check-inline">
										<input id="coughCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											기침
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="dyspneaCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											호흡곤란
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="coldFitCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											오한
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="musclePainCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											근육통
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="headacheCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											두통
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="soreThroatCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											인후통
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="smellPalateCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											후각/미각 손실
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="fatigueCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											피로
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="appetiteLossCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											식욕감소
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="sputumCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											가래
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="ocinCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											오심
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="vomitingCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											구토
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="diarrheaCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											설사
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="dizzinessCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											어지러움
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="noseCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											콧물/코막힘
										</span>
									</label>
									<label class="form-check form-check-inline">
										<input id="etcCheck" class="form-check-input" type="checkbox">
										<span class="form-check-label">
											기타 ( <input type="text" id="etcContent" class="form-control form-control-sm w150" value="" placeholder="증상 내용"> )
										</span>
									</label>
								</div>
							</td>
						</tr>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
					<button type="button" class="btn btn-primary" onclick="handleSymptomData()">등록</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="defaultModalPrimaryMemo" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">의료진 메모 입력</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span> </button>
				</div>
				<div class="modal-body m-3">
					<table class="table mobile-table">
						<colgroup>
							<col style="width: 20%">
							<col style="width: 80%">
						</colgroup>
						<tr>
							<th>작성자</th>
							<td>
								<div class="form-row">
									<input type="text" name="" class="form-control" placeholder="이름을 입력하세요" value="${data._SES_NAME}" readonly>
								</div>
							</td>
						</tr>
						<tr>
							<th>내용</th>
							<td>
								<div class="form-row">
									<textarea id="memoContent" class="form-control" rows="2" placeholder="내용을 입력하세요"></textarea>
								</div>
							</td>
						</tr>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
					<button type="button" class="btn btn-primary" onclick="handleMemoData()">등록</button>
				</div>
			</div>
		</div>
	</div>
	<div class="wrapper">
		<jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>

		<div class="main">
			<jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>

			<main class="content">
				<form id="hiddenForm">
						<input type="hidden" id="pId" name="pId" value="<c:out value="${info.id}" />">
						<input type="hidden" id="pName" name="pName" value="<c:out value="${info.patientName}" />">
						<input type="hidden" id="roomId" name="roomId" value="<c:out value="${info.roomNumber}" />">
				</form>
				<div class="container-fluid p-0">
					<div class="row">
						<div class="col-12 col-lg-6">
							<h1 class="h3 mb-3">건강정보 조회</h1>
						</div>
						<div class="col-12 col-lg-6  text-right">
							<nav aria-label="breadcrumb">
								<ol class="breadcrumb">
									<li class="breadcrumb-item"><a href="javscript:;">Home</a></li>
									<li class="breadcrumb-item">진료관리</li>
									<li class="breadcrumb-item active">건강정보 조회</li>
								</ol>
							</nav>
						</div>
					</div>
					<div class="row">
						<div class="col-12">
							<div class="card toggle">
								<div class="card-header">
									<h1 class="h4"><c:out value="${info.patientName}" /> 환자 기본정보</h1>
									<a href="#" class="toggleBtn">메뉴</a>
								</div>
								<div class="card-body">
									<table class="table mobile-table user-info">
										<colgroup>
											<col style="width: 15%">
											<col style="width: 35%">
											<col style="width: 15%">
											<col style="width: 35%">
										</colgroup>
										<tr>
												<th>치료센터</th>
												<td><c:out value="${info.centerName}" /></td>
												<th>입소일시</th>
												<td colspan="2">
														<c:out value="${info.hospitalizationDate}" />
												</td>
										</tr>
										<tr>
												<th>병동 번호</th>
												<td>
														<c:out value="${info.wardNumber}동 ${info.roomNumber}호" />
												</td>
												<th>이름</th>
												<td>
														<c:out value="${info.patientName}" />
												</td>
										</tr>
										<tr>
												<th>성별</th>
												<td>
														<c:if test="${info.gender eq 'M'}">
																남
														</c:if>
														<c:if test="${info.gender ne 'M'}">
																여
														</c:if>
												</td>
												<th>생년월일</th>
												<td>
														<c:out value="${info.jumin}" />
												</td>
										</tr>
										<tr>
												<th>연락처</th>
												<td>
														<c:out value="${info.patientPhone}" />
												</td>
												<th>보호자 연락처</th>
												<td>
														<c:out value="${info.guardianPhone}" />
												</td>
										</tr>
										<tr>
												<th>증상시작일</th>
												<td>
														<c:out value="${info.symptomStartDate}" />
												</td>
												<th>확진일</th>
												<td>
														<c:out value="${info.confirmationDate}" />
												</td>
										</tr>
										<tr>
												<th>격리해제 예정일</th>
												<td>
														<c:out value="${info.disisolationDate}" />
												</td>
												<th>상태</th>
												<td>
														<c:if test="${info.state eq 'H'}">
																입소
														</c:if>
														<c:if test="${info.state eq 'D'}">
																퇴소
														</c:if>
														<c:if test="${info.state eq 'T'}">
																지정병원 이송
														</c:if>
														<c:if test="${info.state eq 'E'}">
																기타
														</c:if>
												</td>
										</tr>
										<tr>
												<th>최근 약복용<br />(최근 24시간 이내)</th>
												<td>
														<c:choose>
																<c:when test="${info.drugYn eq 'Y'}">
																		복용 (<c:out value="${info.drugContent}" />)
																</c:when>
																<c:otherwise>
																		미복용
																</c:otherwise>
														</c:choose>
												</td>
												<th>임신</th>
												<td>
														<c:choose>
																<c:when test="${info.pregnancyStatus eq 'N'}">
																		무
																</c:when>
																<c:otherwise>
																		유 (<c:out value="${info.pregnancyWeek}주차" />)
																</c:otherwise>
														</c:choose>
												</td>
										</tr>
										<tr>
												<th rowspan="2">기저질환 여부</th>
												<td colspan="3">
														<c:choose>
																<c:when test="${info.basalDiseaseYn eq 'Y'}">
																		유
																</c:when>
																<c:otherwise>
																		무
																</c:otherwise>
														</c:choose>
												</td>
										</tr>
										<tr>
												<td colspan="3">
<%--                                                 <c:if test="${info.highBloodPressureCheck eq 'Y'}">, 고혈압</c:if> --%>
<%--                                                 <c:if test="${info.lowBloodPressureCheck eq 'Y'}">, 저혈압</c:if> --%>
<%--                                                 <c:if test="${info.organTransplantCheck eq 'Y'}">, 장기이식(신장, 간 등)</c:if> --%>
<%--                                                 <c:if test="${info.diabetesCheck eq 'Y'}">, 당뇨</c:if> --%>
<%--                                                 <c:if test="${info.respiratoryDiseaseCheck eq 'Y'}">, 호흡기질환</c:if> --%>
<%--                                                 <c:if test="${info.immunologicalDiseaseCheck eq 'Y'}">, 면역질환(류마티스 등)</c:if> --%>
<%--                                                 <c:if test="${info.heartDisease eq 'Y'}">, 심장질환</c:if> --%>
<%--                                                 <c:if test="${info.liverDisease eq 'Y'}">, 간질환</c:if> --%>
<%--                                                 <c:if test="${info.operation eq 'Y'}">, 수술(<c:out value="${info.operationContent}" />)</c:if> --%>
<%--                                                 <c:if test="${info.allergyCheck eq 'Y'}">, 알레르기</c:if> --%>
<%--                                                 <c:if test="${info.kidneyDisease eq 'Y'}">, 신장질환</c:if> --%>
<%--                                                 <c:if test="${info.cancerCheck eq 'Y'}">, 암(<c:out value="${info.cancerName}" />)</c:if> --%>
<%--                                                 <c:if test="${info.ectCheckDisease eq 'Y'}">, 기타(<c:out value="${info.etcContentDisease}" />)</c:if> --%>
														<c:out value="${disease}" />
												</td>
										</tr>
										<tr>
												<th>현재 증상<br />(입소 당시)</th>
												<td colspan="3">
<%--                                                 <c:if test="${info.feverCheck eq 'Y'}">, 열감(열나는느낌)</c:if> --%>
<%--                                                 <c:if test="${info.coughCheck eq 'Y'}">, 기침</c:if> --%>
<%--                                                 <c:if test="${info.colic eq 'Y'}">, 복통(배아픔)</c:if> --%>
<%--                                                 <c:if test="${info.coldFitCheck eq 'Y'}">, 오한(추운 느낌)</c:if> --%>
<%--                                                 <c:if test="${info.sputumCheck eq 'Y'}">, 가래</c:if> --%>
<%--                                                 <c:if test="${info.ocinCheck eq 'Y'}">, 오심(구역질)</c:if> --%>
<%--                                                 <c:if test="${info.chestPain eq 'Y'}">, 흉통</c:if> --%>
<%--                                                 <c:if test="${info.noseCheck eq 'Y'}">, 콧물 또는 코 막힘</c:if> --%>
<%--                                                 <c:if test="${info.vomitingCheck eq 'Y'}">, 구토</c:if> --%>
<%--                                                 <c:if test="${info.musclePainCheck eq 'Y'}">, 근육통(몸살)</c:if> --%>
<%--                                                 <c:if test="${info.soreThroatCheck eq 'Y'}">, 인후통(목 아픔)</c:if> --%>
<%--                                                 <c:if test="${info.diarrheaCheck eq 'Y'}">, 설사</c:if> --%>
<%--                                                 <c:if test="${info.headacheCheck eq 'Y'}">, 두통(머리아픔)</c:if> --%>
<%--                                                 <c:if test="${info.dyspneaCheck eq 'Y'}">, 호흡곤란(숨가쁨)</c:if> --%>
<%--                                                 <c:if test="${info.fatigueCheck eq 'Y'}">, 권태감(피곤함)</c:if> --%>
<%--                                                 <c:if test="${info.ectCheckSymptom eq 'Y'}">, 기타(<c:out value="${info.etcContentSymptom}" />)</c:if> --%>
														<c:out value="${symptom}" />
												</td>
										</tr>
										<tr>
												<th>
														체온
												</th>
												<td>
														<c:out value="우측 ${info.feverRight}℃ /  좌측  ${info.feverRight}℃" />
												</td>
												<th>
														맥박수
												</th>
												<td>
														<c:out value="${info.pulseRate} 회/분" />
												</td>
										</tr>
										<tr>
												<th>
														호흡수
												</th>
												<td>
														<c:out value="${info.respirationRate} 회/분" />
												</td>
												<th>
														혈압
												</th>
												<td>
												<c:out value="수축기 ${info.bloodPressureLevelCon} mmHg  /  이완기 ${info.bloodPressureLevelRel} mmHg" />
												</td>
										</tr>
										<tr>
												<th>
														산소포화도
												</th>
												<td colspan="3">
														<c:out value="${info.oxygenSaturation} %" />
												</td>
										</tr>
									</table>
									<div class="row mt-3">
										<div class="col-12">
											<div class="text-right">
												<button class="btn btn-outline-success" onclick="nonFaceStart();">비대면 진료</button>
												<button class="btn btn-primary" onclick="location.href='./state'">목록</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-12">
							<div class="card">
								<ul class="tab-nav">
									<li class="tab-item active" tabindex="#tabPhr">건강정보이력</li>
									<li class="tab-item" tabindex="#tabSymptom">임상증상</li>
									<li class="tab-item" tabindex="#tabMemo">의료진 메모</li>
								</ul>
								<div id="tabPhr" class="tab in">
									<div class="card-header">
										<h1 class="h4">
											- 건강정보 조회 <label> <select class="custom-select ml-1 form-control" id=phrTypeSelect name="inputState" onchange="retrievePhrData()">
													<option value="temperature" selected>체온</option>
													<option value="bloodPressure">혈압</option>
													<option value="pulseRate">맥박</option>
													<option value="oxygenSaturation">산소포화도</option>
													<option value="bloodSugar">혈당</option>
											</select>
											</label> <label class="ml-1">
												<button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#defaultModalPrimary_1">기록추가</button>
											</label>
										</h1>
									</div>
									<div class="card-body">
										<div class="graph-area mb-4" style="height:300px;">
											<canvas id="phrChart"></canvas>
										</div>
										<div class="table-responsive">
											<table id="phrDataTable" class="table data-table text-center">
												<thead>
													<tr>
														<th>기록일시</th>
														<th>체온</th>
														<th>기록자</th>
													</tr>
												</thead>
												<tbody>
													<c:choose>
														<c:when test="${phrTotal > 0}">
															<c:forEach var="i" begin="1" end="${phrTotal}">
																<tr>
																	<td><c:out value="${phrItems[phrTotal-i].createDate}" /></td>
																	<td><span class="${phrItems[phrTotal-i].isWarning ? 'text-danger' : ''}"><c:out value="${phrItems[phrTotal-i].phrValue} ℃" /></span></td>
																	<td><c:out value="${phrItems[phrTotal-i].recordedByName}" /></td>
																</tr>
															</c:forEach>
														</c:when>
														<c:otherwise>
															<tr>
																<td colspan=3>데이터가 없습니다.</td>
															</tr>
														</c:otherwise>
													</c:choose>
												</tbody>
											</table>
										</div>
									</div>
								</div>
								<div id="tabSymptom" class="tab">
									<div class="card-header">
										<h1 class="h4">
											- 임상증상 <label class="ml-1">
												<button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#defaultModalPrimary_2">증상추가</button>
											</label>
										</h1>
									</div>
									<div class="card-body">
										<div class="table-responsive">
											<table id="symptomDataTable" class="table data-table text-center">
												<thead>
													<tr>
														<th>기록일시</th>
														<th>기침</th>
														<th>호흡곤란</th>
														<th>오한</th>
														<th>근육통</th>

														<th>두통</th>
														<th>인후통</th>
														<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>
												</tbody>
											</table>
										</div>
									</div>
								</div>
								<div id="tabMemo" class="tab">
									<div class="card-header">
										<h1 class="h4">
											- 의료진 메모
											<button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#defaultModalPrimaryMemo">메모추가</button>
										</h1>
									</div>
									<div class="card-body">
										<div class="table-responsive">
											<table id="memoDataTable" class="table data-table text-center">
												<thead>
													<tr>
														<th>기록일시</th>
														<th>내용</th>
														<th>기록자</th>
													</tr>
												</thead>
												<tbody>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</main>
			<jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
		</div>
	</div>
</body>
</html>