<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医生管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="icon" th:href="@{image/sgl.png}" sizes="32x32">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/rules.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<style>
.btn:hover{color: #555;}
.layui-table-view {margin: 0;}
.layui-tab-card{box-shadow:none;border-radius: 0px;}
.layui-tab{margin:0;}
.layui-tab-content{padding:0;}
.layui-form-radio{margin:0;}
.tdBackground-color{background-color:#ff0000;}
</style>

<body class="layui-layout-body">

	<div class="toolbar">           	
    	<div class="layui-inline">
			<span>患者姓名：</span>
            <input type="text" id="name" placeholder="名称关键字" autocomplete="off" class="layui-input formWidth" />
        </div>
		<div class="layui-inline">
			<span>科室名称：</span>
			<select id="ksdm" class="layui-select formWidth" >
				<option value="">-请选择-</option>
				<option th:each="h:${list}" th:value="${h.KSDM}" th:text="${h.KSMC}"></option>
			</select>
		</div>
		<div class="layui-inline">
			<span>时间搜索：</span>
			<input type="text" id="startTime" placeholder="请选择时间 " autocomplete="off" class="layui-input formWidth" />
		</div>
		<div class="layui-inline">
			<span>至&nbsp;&nbsp;&nbsp;</span>
			<input type="text" id="endTime" placeholder="请选择时间 " autocomplete="off" class="layui-input formWidth" />
		</div>
        <div class="layui-inline">
			<button class="layui-btn layui-btn-sm" data-type="search" id="search"><i class="layui-icon">&#xe615;</i>查询</button>
			<button class="layui-btn layui-btn-sm layui-btn-normal" data-type="export" id="export"><i class="layui-icon">&#xe67d;</i>导出</button>
		</div>
    </div>
    	
	<table id="demo" lay-filter="test"></table>	
	   
	<!-- 表格操作栏 --> 		
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
	</script>
		


</body>   
</html>
<script th:inline="javascript">


</script>
<script>
	var element ,
	    table,
	    laydate,
	    layer,
	    form,
	    tree;
	var tHeight = $(".toolbar").height()+6;
    layui.use(['element','table','laydate','layer','form','tree'], function(){
		element = layui.element;
	    table = layui.table;
	    laydate = layui.laydate;
	    layer = layui.layer;
	    form = layui.form;
	    tree = layui.tree;
	    
	    //表格加载
		table.render({
			elem: '#demo',
			height: 'full-'+tHeight,

			title: '用户表',
			page: false ,//开启分页
			limit:999,
			limits:[20,30,50],
			//toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
			defaultToolbar: [],	 
			id:'test', 
			cols: [
			 [ //表头
			   	 {type: 'numbers', title: '序号', width: 30},
			     {field: 'TRUE_NAME', title: '患者名称'},
				 {field: 'KSMC', title: '科室名称'},
				 {field: 'YYRQ', title: '预约就诊日期'},
				 {field: 'SJD', title: '预约时间段'},
				 {field: 'CARD_TYPE', title: '就诊卡类型',templet:function(d){
			     	if(d.CARD_TYPE == '1'){
			     		return '磁卡';
			     	}else if(d.CARD_TYPE == '2'){
			     		return '保障卡';
			     	}else if(d.CARD_TYPE == '3'){
			     		return 'IC 卡';
			     	}
			     }},
				 {field: 'MEDICAL_CARD', title: '就诊卡号'},
				 {field: 'ID_CARD', title: '身份证号'},
				 {field: 'PHONE', title: '手机号'},
				 {field: 'CREATE_TIME', title: '操作时间'},
			   /*{fixed: 'right',title:'操作', align:'center',width:240, toolbar: '#barDemo'}*/
			 ]
			],
			data:[]
		});

		//时间控件
		laydate.render({
			elem:'#startTime', //指定元素
			eventElem: '.date-input-icon',
			trigger: 'click',
		});
		laydate.render({
			elem:'#endTime', //指定元素
			eventElem: '.date-input-icon',
			trigger: 'click',
		});
		
		//查询
		$("#search").on('click',function(){
			findOrderPageList();
		});
		//导出
		$("#export").on('click',function(){
			exportExcel();
		});

        
        $(".downpanel").on("click", ".layui-select-title", function (e) {
            $(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
            $(this).parents(".downpanel").toggleClass("layui-form-selected");
            layui.stope(e);
        }).on("click", "dl i", function (e) {
            layui.stope(e);
        });
        $(document).on("click", function (e) {
            $(".layui-form-select").removeClass("layui-form-selected");
        });

		findOrderPageList();
    });

  	function findOrderPageList(){
		let name = $("#name").val();
		let startTime=$("#startTime").val();
		let endTime=$("#endTime").val();
		let ksdm= $("#ksdm").val();

		table.reload('test', {
			method: 'get',
			url:'/order/findOrderPageList',
			where: {
				'name':name,
				'startTime':startTime,
				'endTime':endTime,
				'ksdm':ksdm
			},
			page: {
				curr: 1
			}
		});
	}

	function exportExcel(){
		let url="/order/exportOrderDetail";
		let name = $("#name").val();
		let startTime=$("#startTime").val();
		let endTime=$("#endTime").val();
		let ksdm= $("#ksdm").val();
		let param={};
		param.name=name;
		param.startTime=startTime;
		param.endTime=endTime;
		param.ksdm=ksdm;

		let dowloadName="预约挂号明细";
		param.dowloadName=dowloadName;
		let load = layer.load();
		AjaxPostJson(url,param,function(data){
			layer.close(load);
			if (data.errCode === "0") {
				let fileName=data.dlName;
				location.href = '/download?fileName=' + fileName + '&dowloadName=' + dowloadName;
			}else{
				layer.alert(data.errMsg);
			}
		});
	}


    </script>