<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>产品知识列表</title>
	<%@include file="/views/common.jsp" %>
	<style type="text/css">
		.layui-table-cell {
			height: 32px;
			line-height: 32px;
		}

		.layui-table td, .layui-table th, .layui-table-header, .layui-table-page, .layui-table-tool, .layui-table-total, .layui-table-view {
			border-color: #6666;
			font-size: 16px;
		}

		.ztree * {
			font-size: 20px;
		}

		.edge .layui-edge {
			right: 35px;
		}
	</style>
</head>


<script type="text/html" id="toolbarDemo">
<span style="color: #FF5722;font-weight: bold">未经注册商标所有人许可，在同一种商品上使用与其注册商标相同的商标，情节严重的，处三年以下有期徒刑或拘役并处罚金。情节特别严重的，处三年以上七年以下有期徒刑并处罚金。</span>
</script>
<body>
<br>
<form class="layui-form" action="">
	<div class="layui-inline">
		<label class="layui-form-label">内容</label>
		<div class="layui-input-inline">
			<input type="text" id="content" name="content" placeholder="请输入内容"
				   autocomplete="off" class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<div class="layui-input-inline">
			<button class="layui-btn" id="searchBtn" lay-submit lay-filter="formDemo" style="margin-left: 15px">
				<i class="layui-icon layui-icon-search"></i> 查询
			</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</div>
</form>
<table class="layui-hide" id="informationTable" lay-filter="informationTable"></table>
<style>
	.layui-table-body .layui-table tr{
		height: 80px;
	}
</style>
<script type="text/javascript">
	function viewImage(item) {
		let html = "<div style='width: 100%;height: 100%;display: flex;align-items: center;justify-content: center'>";
		if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
			html += "<video src='" + item + "' class='layui-upload-img' controls style='width: 400px;height: 400px;margin-right: 5px;'/>";
		} else if (item != "") {
			html += "<img src='" + item + "' class='layui-upload-img' style='width: 400px;height: 400px;margin-right: 5px;'/>";
		}
		html += "</div>";
		layer.open({
			type: 1,
			title: false,
			closeBtn: 0,
			offset: 'auto',
			area: ['400px', '400px'],
			skin: 'layui-layer-nobg', //没有背景色
			shadeClose: true,
			content: html
		});
	}

	layui.use(['element', 'table', 'laydate', 'form'], function () {
		var $ = layui.jquery;
		var table = layui.table;
		var laydate = layui.laydate;
		var element = layui.element;
		var form = layui.form;

		// 生成表格
		table.render({
			elem: '#informationTable',
			url: '../../../../getTipContent',
			toolbar: '#toolbarDemo',
			title: '用户表',// 导出文件名
			id: 'informationTableAll',
			// 开启分页
			// page	: true,
			page: {
				layout: ['count', 'prev', 'page', 'next', 'skip', 'limit']
			},
			limits: [10, 30, 50, 80, 100, 999],
			/*request : {
                'limitName' : 'pageSize' // 分页每页条数默认字段改为pageSize
            },*/
			where: {
				content: ''
			},
			cellMinWidth: 80, // 全局定义常规单元格的最小宽度，layui 2.2.1 新增
			cols: [[{
				type: 'numbers',
				title: '序号',
				width: 50,
				fixed: "left"
			}, {
				field: 'title',
				title: '类型',
			}, {
				field: 'content',
				title: '属性',
				templet: function (d) {
					let data_info = JSON.parse(d.content);
					return data_info.explain
				}
			}, {
				field: '证明',
				title: '属性',
				templet: function (d) {
					let data_info = JSON.parse(d.content);
					return data_info.content
				}
			}, {
				field: 'content',
				title: '图片视频',
				templet: function (d) {
					let html = "<div style='width: 100%;height: 100%;display: flex;align-items: center;justify-content: center'>";
					if (d.attachment) {
						let list = d.attachment.split(",");
						for (let i = 0; i < list.length; i++) {
							let item = list[i];
							if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
								html += "<video src='" + item + "' class='layui-upload-img'  style='width: 40px;height: 40px;margin-right: 5px;' onclick='viewImage(\"" + item + "\")'/>";
							} else if (item != "") {
								html += "<img src='" + item + "' class='layui-upload-img' style='width: 40px;height: 40px;margin-right: 5px;' onclick='viewImage(\"" + item + "\")'/>";
							}
						}
					}
					html += "</div>";
					return html;
				}
			}, {
				field: 'createBy',
				align: 'center',
				width: 150,
				title: '创建人'
			}, {
				field: 'createDate',
				title: '创建时间',
				width: 220,
				align: 'center',
				templet: function (d) {
					return d.createDate != null ? layui.util.toDateString(d.createDate, "yyyy-MM-dd HH:mm:ss") : "";
				}
			}]],
			parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
				return {
					"code": 0, //解析接口状态
					"msg": "", //解析提示文本
					"count": res.data.list.total,//解析数据长度
					"data": res.data.list.list//解析数据列表
				};
			}
		});

		//点击查询按钮，重载表格
		$('#searchBtn').on('click', function () {
			table.reload('informationTableAll', {
				method: 'get',
				where: {
					content: $("#content").val()
				},
				page: {
					curr: 1
				}
			});
			return false;
		});

		table.on('toolbar(informationTable)', function (obj) {
			switch (obj.event) {
				case 'add':
					layer.open({
						type: 2,
						title: "添加规范",
						fix: false, //不固定
						maxmin: true,
						skin: 'layui-layer-molv',
						area: ['45%', '70%'],
						content: './addPrinting.jsp',
					});
					break;
			}
			;
		});

		table.on('tool(informationTable)', function (obj) {
			var data1 = obj.data;
			let data_info = JSON.parse(data1.content);
			if (obj.event === 'edit') {
				layer.open({
					type: 2,
					title: "修改规范",
					area: ['45%', '70%'],
					skin: 'layui-layer-molv',
					content: './addPrinting.jsp',
					success: function (layero, index) {
						var body = layer.getChildFrame('body', index);
						body.find('#id').val(data1.id);
						body.find('input[name="title"]').val(data1.title);
						body.find('input[name="type"]').val(data1.type);
						body.find('input[name="explain"]').val(data_info.explain);
						body.find('textarea[name="content"]').val(data_info.content);

						body.find('#images').val(data1.attachment);
						let textImage = data1.attachment;
						if (textImage) {
							let textImageList = textImage == "" ? [] : textImage.split(",");
							let html = "";
							textImageList.forEach((item, index) => {
								if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
									html += "<video src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='delImage(\"" + index + "\")'/>";
								} else if (item != "") {
									html += "<img src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='delImage(\"" + index + "\")'/>";
								}
							})
							body.find("#preview").empty().append(html);
						}
						layui.form.render();
					}
				});
			} else if (obj.event === 'del') {
				layer.confirm('确定要删除该数据么？', {icon: 3, title: "提示"}, function (index) {
					$.ajax({
						url: "../../../../deleteTipContent",
						data: {'id': data1.id},
						type: "post",
						//dataType:"json",
						success: function (data) {
							if (data.code == 200) {
								layer.msg('删除成功！', {icon: 6, offset: "auto", time: 1000});//提示框
							} else {
								layer.msg('删除失败！', {icon: 5, offset: "auto", time: 1000});//提示框
							}
							setTimeout(function () {
								location.reload();//重新加载页面
							}, 1100);
						}
					});
					return false;
				});
			}
		})
	})
</script>
</body>
</html>