extends ../layout

block content
	div.searchDiv
		.card.opt
			.card-body
				label 조회기간
				input.form-control(type='date' id="startDate" class="searchDate" )
				label ~
				input.form-control(type='date' id="endDate" class="searchDate")
				label 메뉴선택
					select.form-control(id="selectMenu" class="selectOption")
						option 전체
						template(v-for="m in menu") 
							option(:title='m.content') {{m.content}}
				label 병동선택
					select.form-control(id="selectWard" class="selectOption")
						option 전체
						template(v-for="w in wardList") 
							option(:title='w.name') {{w.name}}
							
				input(class="search btn btn-secondary btn-search" type='button' v-on:click="search" value="검색")
				
	input(class="download btn btn-secondary" type="button" id="downloadBtn" v-on:click="downloadExcel" value="엑셀 다운로드")
	input(class="download btn btn-secondary blank" type="button" id="downLoad" v-on:click="downLoad" value="인쇄")
	
	.card
		div#dvData
			table.table.table-striped
				thead.hd	
					tr
						th 병동
						th 병실
						th 병상
						th 메뉴명
						th 이용횟수
						th 이용비율
				tbody.bd
					template(v-for='d in data')
						tr
							td {{d.ward}}
							td {{d.room}}
							td {{d.bedno}}
							td {{d.content}}
							td {{d.cnt}}
							td {{d.percent}}%

					tr 
						td
							합계
						td
						td
						td
						template(v-for='s in sumCnt')	
							td {{s.cnt}}
					
					
block script
	script.
		/* scripts here */
		var app = new Vue({
			el: '#app',
			data: {
				
				data: !{JSON.stringify(data)},
				menu: !{JSON.stringify(menu)},
				wardList: !{JSON.stringify(wardList)},
				sumCnt: !{JSON.stringify(sumCnt)},
				
			},
			methods: {
				search: function(){
					$.post("Stats/api/searchUseStats", {
						hid: "IM39",
						startDate: $("#startDate").val(),
						endDate: $("#endDate").val(),
						selectMenu : $('#selectMenu').val(),
						selectWard : $('#selectWard').val(),
					}, o=>{
						console.log(o);
						this.data = o.data;
						this.sumCnt = o.sumCnt;
						
					}, 'json').fail(e=>{
						console.log(e.responseText);
						alert('error');
					});
				},
				downLoad : function(e){
					window.print();
				},
				downloadExcel : function(e){
					window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#dvData').html()));
					e.preventDefault();	
					
				},
			},
			created(){
			},
		});
	
block css
	style.
		.form-control {
			//margin-left: 10px;
			display: inline;
			width: 200px;
		}
		.searchDiv{
			//margin-left : 30%;
			//margin-top : 20px;
			text-align : center;
		}