<!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}">
    <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="@{/ueditor/ueditor.config.js}"></script>
	<script th:src="@{/ueditor/ueditor.all.min.js}"></script>
	<script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<style>
.layui-input{width:120px;display:inline-block;height:30px}
.layui-select {width:120px;height:30px}
.bgColor{background-color:#FFDCB9}
#row1,#row2 {overflow: overlay;}
.move-bar hr{cursor: n-resize;}
#editor .view{overflow:scroll}
</style>
<body class="layui-layout-body">
	
	<div class="toolbar">       
    	<div class="toolbar">           	
	    	<div class="layui-inline">
				<span>院区名称：</span>
	            <input type="text" id="hospitalName" 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>
			</div>
			<div class="layui-inline">
				<button class="layui-btn layui-btn-sm layui-btn-normal" data-type="add" id="add"><i class="layui-icon">&#xe654;</i>添加</button>
	   		</div>
	    </div>
        
    </div>
    <div id="row1" class="layui-row">
    	<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>
    </div>
    <div class="move-bar">
		<hr style="height:10px;margin:0px">
	</div>
	<div id="row2" class="layui-row">
	    <input type="hidden" id="hospital_id"/>
	   	<table class="layui-hide" id="test1" lay-filter="test1"></table>
	   	<script type="text/html" id="toolbar1">
  			<a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
			<a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
		</script>
   	</div>
   	
	<!-- 增加或修改-->
	<div id="addHospital" style="display:none;">
		<form id="zjHospital" class="" style="margin-top:20px;">
			<div class="layui-form-item">
                <label class="layui-form-label" lay-verify="required">院区名称:</label>
                <div class="layui-input-block">
                    <input type="text"  id="addHospitalName" required lay-verify="required" autocomplete="off" placeholder="请输入院区名称" class="layui-input" style="width:300px">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话:</label>
                <div class="layui-input-block">
                    <input type="text"  id="addHospitalPhone" required lay-verify="required" autocomplete="off" placeholder="请输入联系电话" class="layui-input" style="width:300px">
                </div>
            </div>
			<div class="layui-form-item">
				<label class="layui-form-label">公交:</label>
				<div class="layui-input-block">
					<input type="text"  id="addHospitalBusRoute" required lay-verify="required" autocomplete="off" placeholder="请输入公交" class="layui-input" style="width:300px">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">院区地址:</label>
				<div class="layui-input-block">
					<input type="text"  id="addHospitalAddress" required lay-verify="required" autocomplete="off" placeholder="请输入院区地址" class="layui-input" style="width:300px">
				</div>
			</div>
            <div class="layui-form-item">
				<script id="editor" type="text/plain" style="width:470px;height:260px;"></script>
			</div>
		</form>
	</div>
	
	<!-- 新增及修改楼层 -->
	<div id="floor" style="display:none;">
		<form id="" class="" style="margin-top:20px;">
			<div class="layui-form-item">
				<label class="layui-form-label">楼层:</label>
				<div class="layui-input-block">
					<input type="text"  id="floor_name" required lay-verify="required" autocomplete="off" placeholder="请输入楼层" class="layui-input" style="width:300px">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">信息:</label>
				<div class="layui-input-block">
					<input type="text"  id="floor_about" required lay-verify="required" autocomplete="off" placeholder="请输入信息" class="layui-input" style="width:300px">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">排序:</label>
				<div class="layui-input-block">
					<input type="text"  id="sort" required lay-verify="required" autocomplete="off" placeholder="请输入排序" class="layui-input" style="width:300px">
				</div>
			</div>
		</form>
	</div>
</body>   
</html>
<script>
	var content = "";
	var ue = UE.getEditor('editor');
	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',
			data:[],
			title: '医院表',
			page: false ,//开启分页
			limit:999,
			//limits:[20,30,50],
			//toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
			defaultToolbar: [],	 
			id:'test', 
			cols: [
			 [ //表头
			   {type: 'numbers', title: '序号', width: 30},
			   {field: 'HOSPITAL_NAME', title: '院区名称', sort: false, totalRow: true},
			   /* {field: 'trueName', title: '用户真实姓名', sort: false}, */
			   {field: 'HOSPITAL_PHONE', title: '电话', sort: false},
			   {field: 'HOSPITAL_BUS_ROUTE', title: '公交', sort: false},
			   {field: 'HOSPITAL_ADDRESS', title: '地址', sort: false},
			   {fixed: 'right',title:'操作', align:'center',width:240, toolbar: '#barDemo'}
			 ]
			],
			done:function(res,curr,count){
				$(".layui-table-view[lay-id='test'] .layui-table-body tr[data-index=0] ").click();
			}
		});
	
		//时间控件
		laydate.render({
	  		elem:'#date', //指定元素
	  		eventElem: '.date-input-icon',
	  		trigger: 'click',
		});
		
		//查询
		$("#search").on('click',function(){
			findHospitalPageList();
		});
		
		//新增
		$("#add").on('click',function(){
			$("#addHospitalName").val("");
			$("#addHospitalPhone").val("");
			$("#addHospitalBusRoute").val("");
			$("#addHospitalAddress").val("");
			layer.open({
	            type:1,
	            title:"新增内容",
	            shade:0,
	            area: ['500px', '80%'],
	            offset:'auto',
	            content: $("#addHospital"),
	            btn: ['保存', '取消'],
	            btnAlign: 'c',
	            yes: function (index, layero) {
	            	//获取值
					var hospitalName = $("#addHospitalName").val();
					var hospitalPhone = $("#addHospitalPhone").val();
					var hospitalBusRoute = $("#addHospitalBusRoute").val();
					var hospitalAddress = $("#addHospitalAddress").val();
	            	if(hospitalName=="" || hospitalName==null){
	            		layer.msg('医院名称不能为空',{time:1000});
	            		$("#addHospitalName").focus();
	            		return;
	            	}
	            	var content = UE.getEditor('editor').getContent();
	            	var param={};
	            	param.hospitalName=hospitalName;
	            	param.hospitalPhone=hospitalPhone;
	            	param.hospitalBusRoute=hospitalBusRoute;
	            	param.hospitalAddress=hospitalAddress;
	            	param.content = content;
	            	var url='/hospital/insertHospital';
	            	AjaxPostJson(url,param,function(data){
	            		if (data.errCode == "0") {
							layer.close(index);
							layer.msg('添加成功', {time : 1000});
							findHospitalPageList();
						} else {
							layer.msg(data.message, {time : 1000});
						}
	            	});
	            },
	            btn2:function(){}
        	});	
		})
		
		//修改、启用禁用
		table.on('tool(test)', function(obj){
			var data = obj.data;
			if(obj.event === 'edit'){
				$("#addHospitalName").val(data.HOSPITAL_NAME);
				$("#addHospitalPhone").val(data.HOSPITAL_PHONE);
				$("#addHospitalBusRoute").val(data.HOSPITAL_BUS_ROUTE);
				$("#addHospitalAddress").val(data.HOSPITAL_ADDRESS);
				content = data.HOSPITAL_ABOUT;
				setTimeout("setConten()", 500);
				layer.open({
                    type:1,
                    title:"修改信息",
                    shade:0,
                    area: ['500px', '80%'],
                    offset:'auto',
                    content: $("#addHospital"),
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                    	var content = UE.getEditor('editor').getContent();
						var hospitalName = $("#addHospitalName").val();
						var hospitalPhone = $("#addHospitalPhone").val();
						var hospitalBusRoute = $("#addHospitalBusRoute").val();
						var hospitalAddress = $("#addHospitalAddress").val();
						if(hospitalName=="" || hospitalName==null){
							layer.msg('用户名不能为空',{time:1000});
							$("#addHospitalName").focus();
							return;
						}
						var param={};
						param.hospitalName=hospitalName;
						param.hospitalPhone=hospitalPhone;
						param.hospitalBusRoute=hospitalBusRoute;
						param.hospitalAddress=hospitalAddress;
						param.hospitalId = data.HOSPITAL_ID;
						param.hospitalAbout = content;
						var url='/hospital/updateHospital';
		            	AjaxPostJson(url,param,function(data){
		            		if (data.errCode == "0") {
		            			layer.close(index);
								layer.msg('修改成功', {time : 1000});
								findHospitalPageList();
							} else {
								layer.msg(data.errMsg, {time : 2000});
							}
		            	});
                    	
                    },
                    btn2:function(){
                    	
                    }
                });				
			}else if(obj.event === 'delete'){
				layer.confirm('确定要删除吗？', function(index){
					var url="/hospital/deleteHospitalById";
					var param={};
					param.hospitalId=data.HOSPITAL_ID;
					AjaxPostJson(url, param, function(data) {
						if (data.errCode == "0") {
							layer.close(index);
							layer.msg('删除成功', {time : 1000});
							findHospitalPageList();
						} else {
							layer.msg(data.errMsg, {time : 2000});
						}
					});
				})
			}
		});
        
        $(".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");
        });
		
		table.render({
			elem: '#test1',
			height: 'full-'+300,
			title: '楼层表',
			id:'test1', 
			data:[],
			cols: [
			 [ //表头
			   {type: 'checkbox', fixed: 'left'}, 
			   {field: 'FLOOR_NAME', title: '楼层',width:100},
			   {field: 'FLOOR_ABOUT', title: '信息',width:360},
			   {field: 'SORT', title: '排序',width:100},
			   {fixed: 'right',title:'操作&nbsp;&nbsp;<button class="addBtn" onclick="addHospitalFloor()"><i class="layui-icon layui-icon-add-1"></i></button>', width:260,align:'center',toolbar: '#toolbar1'}
			 ]
			]
		});
		
		
	  	//表格单击事件
		table.on('row(test)', function(obj){
			obj.tr.addClass("tableSelect").siblings().removeClass("tableSelect");
		    var hospital_id =obj.data.HOSPITAL_ID;
		    $("#hospital_id").val(hospital_id);
		    findFloorByHospital();
		});
		
		//从表操作栏
		table.on('tool(test1)', function(obj){
			
			var data = obj.data;
			$("#floor_name").val(data.FLOOR_NAME);
			$("#floor_about").val(data.FLOOR_ABOUT);
			$("#sort").val(data.SORT);
			switch(obj.event){
				case 'update':
					layer.open({
	                    type:1,
	                    title:"楼层信息",
	                    shade:0,
	                    area: ['500px', '80%'],
	                    offset:'auto',
	                    content: $("#floor"),
	                    btn: ['保存', '取消'],
	                    btnAlign: 'c',
	                    yes: function (index, layero) {
							var param={};
							param.hos_floor_id = data.HOS_FLOOR_ID;
							param.floor_name = $("#floor_name").val();
							param.floor_about = $("#floor_about").val();
							param.sort = $("#sort").val();
							var url = '/hospital/updateHospitalFloor';
			            	AjaxPostJson(url,param,function(data){
			            		if (data.errCode == "0") {
			            			layer.close(index);
									findFloorByHospital();
								} else {
									layer.msg(data.errMsg, {time : 2000});
								}
			            	});
	                    },
	                    btn2:function(){}
	                });
				break;
				case 'delete':
					layer.confirm('确定要删除吗？', function(index){
						var url = '/hospital/deleteHospitalFloor';
						var param = {};
						param.hos_floor_id = data.HOS_FLOOR_ID;
						AjaxPostJson(url,param,function(data){
							if(data.errCode = '0'){
								findFloorByHospital();
							}else{
								layer.msg(data.errMsg,{time:1000});
							}
						})
					})
					
				break;
			}
		});
		
		var tableID = "test";
		var table2ID = "test1";
		// 初始化自适应表格高度
		autoHeight();
		$(document).resize(function() {
			autoHeight();
		});

		function autoHeight() {
			var clientHeight = $(window).height();
			var row1Height = clientHeight * 0.5;
			var row2Height = clientHeight - row1Height - 56;
			$("#row1").height(row1Height);
			$("#row2").height(row2Height);
			$("[lay-id='test']").height(row1Height - 2);
			$("[lay-id='test']").find('.layui-table-main').height(row1Height-72);
			$("[lay-id='test1']").height(row2Height - 2);
			$("[lay-id='test1']").find('.layui-table-main').height(row2Height-72);
		}
		//监听鼠标拖拽拖动条事件
		var moveFlag = false; //是否拖动标志
		$(document).on('mousedown', function(e) {
			//当鼠标点击到拖动条上时,移动鼠标即可拖拽
			if ($(e.target).offset().top == $(".move-bar hr").offset().top) {
				moveFlag = true;
			}
		});
		$(document).on('mousemove', function(e) {
			if (moveFlag) {
				var clientHeight = $(window).height();
				var pageY = e.pageY;
				//控制光标的最小和最大值
				if(pageY < 120){
					pageY = 120;//按钮+标题栏+分页栏高度
				}
				if(pageY > clientHeight * 0.9){
					pageY = clientHeight * 0.9;
				}
				//表格高度=光标位置-按钮高度-hr的margintop
				var row1Height = pageY - 42;
				var row2Height = clientHeight - pageY - 14;
				$("#row1").height(row1Height);
				$("#row2").height(row2Height);
				$("[lay-id='test']").css('height', '100%'); //与父容器同高
				$("[lay-id='test']").find('.layui-table-box').css('height', 'calc(100%)'); //父容器高度-分页栏高度
				$("[lay-id='test']").find('.layui-table-main').css('height', 'calc(100%)'); //父容器高度-标题栏高度
				$("[lay-id='test1']").css('height', '100%'); //与父容器同高
				$("[lay-id='test1']").find('.layui-table-box').css('height', 'calc(100%)'); //父容器高度-分页栏高度
				$("[lay-id='test1']").find('.layui-table-main').css('height', '100%'); //父容器高度-标题栏高度
				table.resize(tableID);
				table.resize(table2ID);
			}
		});
		$(document).on('mouseup', function() {
			moveFlag = false;
		});
		
		findHospitalPageList();
	});
	
	function setConten(){
		UE.getEditor('editor').setContent(content);
		$(".view").attr("overflow-y","scroll");
	}
	
	function findFloorByHospital(){
		table.reload('test1', {
			method: 'get',
			url:'/hospital/findHospitalFloorList',
			where: {
				'hospital_id':$("#hospital_id").val()
			}
		});
	}
	
	function findHospitalPageList(){
		var hospitalName = $("#hospitalName").val();
		table.reload('test', {
			method: 'get',
			url:'/hospital/findHospitalPageList',
			where: {
				'hospitalName':hospitalName
			}
		});
	}
	
	function addHospitalFloor(){
		$("#floor_name").val("");
		$("#floor_about").val("");
		$("#sort").val("");
		layer.open({
              type:1,
              title:"楼层信息",
              shade:0,
              area: ['500px', '300px'],
              offset:'auto',
              content: $("#floor"),
              btn: ['保存', '取消'],
              btnAlign: 'c',
              yes: function (index, layero) {
				  var param={};
				  param.hospital_id = $("#hospital_id").val();
				  param.floor_name = $("#floor_name").val();
				  param.floor_about = $("#floor_about").val();
				  param.sort = $("#sort").val();
			  	  var url = '/hospital/addHospitalFloor';
        	  	  AjaxPostJson(url,param,function(data){
	        		  if (data.errCode == "0") {
	        			layer.close(index);
						findFloorByHospital();
					  } else {
						layer.msg(data.errMsg, {time : 2000});
					  }
        		  });
              },
              btn2:function(){}
          });
	}
	
</script>