<!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>
	<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>
	<script th:src="@{/js/compressor.min.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="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>
    	
	<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 id="Hospital" style="display:none;">
		<form id="zjHospital" 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="title" required lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width: 230px">
				</div>
			</div>
			<div class="layui-form-item">
                <label class="layui-form-label">是否启用:</label>
               	<div class="layui-input-inline">
                <select id="is_use" class="layui-select formWidthTwo" >
					<option value="">-请选择-</option>
					<option value="0">是</option>
					<option value="1">否</option>
				</select>
				</div>
            </div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片:</label>
				<div class="layui-input-block">
					<img class="layui-upload-img" id="addIcon" src="" style="margin-top: 5px;width: 230px;height: 77px;">
					<button type="button" class="layui-btn" id="test1">上传</button>
				</div>
			</div>
			<div class="layui-form-item">
				<script id="editor" type="text/plain" style="width:470px;height:260px;"></script>
			</div>
		</form>
	</div>

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


</script>
<script>
	//修改、启用禁用
	var content = "";
	var ue = UE.getEditor('editor');
	var element ,
	    table,
	    laydate,
	    layer,
	    form,
	    tree,
		upload;
	var tHeight = $(".toolbar").height()+6;
    layui.use(['element','table','laydate','layer','form','tree','upload'], function(){
		element = layui.element;
	    table = layui.table;
	    laydate = layui.laydate;
	    layer = layui.layer;
	    form = layui.form;
	    tree = layui.tree;
	    upload = layui.upload;
	    //表格加载
		table.render({
			elem: '#demo',
			height: 'full-'+tHeight,
			url: '/hospital/findHospitalArticleList', //数据接口
			title: '用户表',
			page: true ,//开启分页
			limit:20,
			limits:[20,30,50],
			//toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
			defaultToolbar: [],	 
			id:'test', 
			cols: [
			 [ //表头
			   {type: 'numbers', title: '序号', width: 30},
			   {field: 'TITLE', title: '标题', width:300, totalRow: true},
			 	{field: 'IMG', title: '图片', width:300,templet:function(d){
					 return '<img src="'+d.IMG+'">';}},
			   {field: 'IS_USE', title: '是否启用', width:100,templet:function(d){
			   		if(d.IS_USE == 	'0'){
			   			return "是";
					}else if(d.IS_USE == '1'){
						return "否";
					}
			   }},
			   {fixed: 'right',title:'操作', align:'center',width:240, toolbar: '#barDemo'}
			 ]
			]
		});
	
		//时间控件
		laydate.render({
	  		elem:'#date', //指定元素
	  		eventElem: '.date-input-icon',
	  		trigger: 'click',
		});
		
		//查询
		$("#search").on('click',function(){
			findHospitalArticleList();
		});

		//图片上传
		var uploadInst = upload.render({
			elem: '#test1'
			,url: '/hospital/uploadImg'
			,auto: false
			,choose: function (obj) {
				var id= $(this)[0].item[0].id;
				obj.preview(function (index, file, result) {
					var name = file.name;
					var last = name.lastIndexOf(".");
					var suffix = name.substring(last,name.length).toLowerCase(); //后缀名
					if('.png' != suffix && '.jpg' != suffix && '.jpeg' != suffix ){
						layer.msg('请选择.png .jpg .jpeg格式图片！',{time:2000});
						return;
					}
					new Compressor(file, {
						quality: 1.0,
						success(result) {
							var formData = new FormData();
							formData.append('file', result, result.name);
							$.ajax({
								type:'post',
								url:'/hospital/uploadImg',
								data:formData,
								processData:false,
								contentType:false,
								success:function(data){
									if(data.errCode != 0){
										return layer.msg('上传失败');
									}else{
										//$('#addIcon').attr('src', data.relative_path);
										$('#addIcon').attr('src', "/showFile/"+data.relative_path);
										//$('#addUploadInfoId').val(data.upload_info_id);
									}
								}
							})
						}
					});
				});
			}
			,error: function(){}
		});

		//新增
		$("#add").on('click',function(){
			UE.getEditor('editor').setContent("");
			$("#addIcon").attr("src","");
			$("#title").val("");
			$("#is_use").val(0);
			layer.open({
	            type:1,
	            title:"新增内容",
	            shade:0,
				zIndex:5,
	            area: ['500px', '80%'],
	            offset:'auto',
	            content: $("#Hospital"),
	            btn: ['保存', '取消'],
	            btnAlign: 'c',
	            yes: function (index, layero) {
	            	//获取值
					var img = $("#addIcon").attr("src");
					if(img == ""){
						layer.msg("请上传图片！");
						return;
					}
					var title = $("#title").val();
					if(title == ""){
						layer.msg("请填写标题！");
						return;
					}
					var content = UE.getEditor('editor').getContent();
	            	var param={};
	            	param.img=img;
	            	param.title=title;
	            	param.content=content;
	            	param.is_use = $("#is_use").val();
	            	var url='/hospital/addHospitalArticle';
	            	AjaxPostJson(url,param,function(data){
	            		if (data.errCode == "0") {
							layer.close(index);
							layer.msg('添加成功', {time : 1000});
							findHospitalArticleList();
						} else {
							layer.msg(data.errMsg, {time : 1000});
						}
	            	});
	            },
	            btn2:function(){}
        	});	
		})
		

		table.on('tool(test)', function(obj){
			var data = obj.data;
			if(obj.event === 'edit'){

				content = data.CONTENT;
				$("#addIcon").attr("src",data.IMG);
				$("#title").val(data.TITLE);
				$("#is_use").val(data.IS_USE);
				setTimeout("setConten()", 500);
				layer.open({
					type:1,
					title:"修改",
					shade:0,
					zIndex:5,
					area: ['500px', '80%'],
					offset:'auto',
					content: $("#Hospital"),
					btn: ['保存', '取消'],
					btnAlign: 'c',
					yes: function (index, layero) {

						//获取值
						var img = $("#addIcon").attr("src");
						if(img == ""){
							layer.msg("请上传图片！");
							return;
						}
						var title = $("#title").val();
						if(title == ""){
							layer.msg("请填写标题！");
							return;
						}
						var content = UE.getEditor('editor').getContent();
						var param={};
						param.img=img;
						param.title=title;
						param.content=content;
						param.is_use = $("#is_use").val();
						param.hos_article_id = data.HOS_ARTICLE_ID;
						var url='/hospital/updateHospitalArticle';
						AjaxPostJson(url,param,function(data){
							if (data.errCode == "0") {
								layer.close(index);
								layer.msg('修改成功', {time : 1000});
								findHospitalArticleList();
							} else {
								layer.msg(data.errMsg, {time : 1000});
							}
						});
					},
					btn2:function(){}
				});
			}else if(obj.event === 'delete'){
				layer.confirm('确定要删除吗？', function(index){
					var url="/hospital/deleteHospitalArticle";
					var param={};
					param.hos_article_id=data.HOS_ARTICLE_ID;
					AjaxPostJson(url, param, function(data) {
						if (data.errCode == "0") {
							layer.msg('删除成功', {time : 1000});
							findHospitalArticleList();
						} 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");
        });
    });

	function setConten(){
		UE.getEditor('editor').setContent(content);
	}
    
  	function findHospitalArticleList(){
		var hospitalName = $("#hospitalName").val();
		table.reload('test', {
			method: 'get',
			url:'/hospital/findHospitalArticleList',
			where: {
				'hospitalName':hospitalName
			},
			page: {
				curr: 1
			}
		});
	}
    </script>