<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>服务商结账明细-待结账单</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="decorator" content="base" />
</head>
<body>

	<div class="layui-fluid">
		<div class="layui-form layui-card">
			<div class="layui-tab layui-tab-brief">
				<ul class="layui-tab-title">
					<sfTags:pagePermission authFlag="SITE_DAIJIE_RECORD_T" html='<li >
							<a href="${ctx}/yangguang/finance/siteSettlement/siteWaitSettlement">待结账单</a>
						</li>' />
					<sfTags:pagePermission authFlag="SITE_JIEZHANG_RECORD_T"
						html='<li class="layui-this">
							<a href="${ctx}/yangguang/finance/siteBillingRecord/siteBillingRecordPage">结账记录</a>
						</li>' />
					<button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10" id="searchBtn" lay-submit lay-filter="LAY-user-back-search">
						<i class="layui-icon fs-12">&#xe615;</i>
						查询
					</button>
				</ul>
			</div>
			<div class="layui-card-body" id="searchForm">
				<div class="layui-form-item">
					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">服务商名称：</label>
						<div class="layui-input-block">
							<select name="siteName" lay-search>
								<option value="">请选择</option>
								<c:forEach var="dts" items="${siteList}">
									<option value="${dts.columns.id}">${dts.columns.name}</option>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="layui-col-lg4 layui-col-sm6">
						<label class="layui-form-label">结账时间：</label>
						<div class="layui-input-block">
							<div class="layui-col-xs5">
								<input type="text" name="startTime" class="layui-input" id="startTime" placeholder="开始日期">
							</div>
							<div class="layui-col-xs2 text-c lh-30">—</div>
							<div class="layui-col-xs5">
								<input type="text" name="endTime" class="layui-input" id="endTime" placeholder="结束日期">
							</div>
						</div>
					</div>
					<div class="layui-col-lg3 layui-col-sm3">
						<label class="layui-form-label">结账编码：</label>
						<div class="layui-input-block">
							<div class="layui-col-xs6">
								<input type="text" name="number" class="layui-input" id="number" >
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class='layui-card'>
			<div class="layui-card-body">
				<table class="layui-hide" lay-skin="row" id="test" lay-filter="test"></table>
				<script type="text/html" id="toolbarDemo">
					<sfTags:pagePermission authFlag="SITE_JIEZHANG_RECORD_EXPORT_B" html='<button id="exports" class="layui-btn layui-btn-sm" lay-event="export"><i class="layui-icon layui-icon-export"></i>导出</button>'/>
          		</script>
			</div>
		</div>
	</div>

	<div id="lookImg" class="hide">
		<div class="w-500 h-500 lookImg">
			<img src="../../img1/banner004.jpg" width="80%" height="80%" />
		</div>
	</div>


	<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
	<script>
		var saveMark = false;
		var el;
		layui.config({
					base : '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
				}).extend({
					index : 'lib/index' //主入口模块
				}).use([ 'index', 'tableExt', 'jquery', 'laypage', 'laydate', 'form', 'layer' ],function() {
						
			$ = layui.$;
			var tableExt = layui.tableExt;
			table = tableExt.getLayTable();
			layer = layui.layer;
			laypage = layui.laypage;
			laydate = layui.laydate;
			form = layui.form;
			var element = layui.element;
			el = element;

			//开始日期
			var insStart = laydate.render({
				elem : '#startTime',
				done : function(value, date) {
					//更新结束日期的最小日期
					insEnd.config.min = lay.extend({}, date, {
						month : date.month - 1
					});

					//自动弹出结束日期的选择器
					insEnd.config.elem[0].focus();
				}
			});

			function isBlank(val) {
				if (val == null || $.trim(val) == '' || val == undefined) {
					return true;
				}
				return false;
			}

			//结束日期
			var insEnd = laydate.render({
				elem : '#endTime',
				done : function(value, date) {
					//更新开始日期的最大日期
					insStart.config.max = lay.extend({}, date, {
						month : date.month - 1
					});
				}
			});

			tableExt.render({
				elem : '#test',
				height : 'full-200',
				toolbar : '#toolbarDemo',
				defaultToolbar : false
				//,defaultToolbar: ['exports']
				,
				limits : [ 20, 50, 100 ],
				limit : 20,
				page : true //开启分页
				,
				url : '${ctx}/yangguang/finance/siteBillingRecord/loadBillingRecordList',
				cols : [ [
						{
							field : 'sort',
							title : '序号',
							width : '5%',
							align : 'center'
						},
						{
							field : 'site_name',
							title : '服务商名称',
							width : '20%',
							exportable:true, 
							align : 'center',
							templet : function(d) {
								return '<span style="color:#D9B589;">' + d.site_name + '</span>';
							}
						},
						{
							field : 'number',
							title : '结账编号',
							width : '20%',
							align : 'center',
							exportable:true, 
							templet : function(d) {
								return '<span >' + d.number + '</span>';
							}
						},
						{
							field : 'mout',
							title : '结账金额',
							width : '15%',
							align : 'center',
							exportable:true, 
							templet : function(d) {
								return '<span >' + d.mout + '</span>';
							}
						},
						{
							field : 'imgs',
							title : '支付凭证',
							width : '10%',
							align : 'center',
							templet : function(d) {
								var imgs = d.imgs;
								return '<span class="imgShowLook" imghref="'+imgs+'" style="color:#D9B589;cursor:pointer;"><img src="${commonStaticImgPath}'+imgs+'" alt="" style="width:25px;height:25px;" ></span>';
							}
						}, {
							field : 'warranty_type',
							title : '结账详情',
							width : '10%',
							align : 'center',
							templet : function(d) {
								var btnAuth = '${fns:checkPagePermission(request, "SITE_JIEZHANG_RECORD_JUMP_B")}';
								if (btnAuth == '0') {// 当有权限时，执行操作
									return '<span onclick="showDetail(\'' + d.id + '\');" style="color:#D9B589;cursor:pointer;">结账详情</span>';
								} else {
									return '<span onclick="forbitClick();" style="color:#dddddd;cursor:pointer;">结账详情</span>';
								}
							}
						}, {
							field : 'createTime',
							title : '结账时间',
							width : '20%',
							exportable:true, 
							align : 'center'
						} ] ],
				done : function(res) {
					$(".imgShowLook").click(function() {
						var href = $(this).attr("imghref");
						$("#lookImg").find("img").attr("src", '${commonStaticImgPath}' + href);
						layer.open({
							type : 1,
							title : '查看图片',
							area : [ '500px', '543px' ],
							content : $('#lookImg')
						})
					})
				},
				exportOpt:{                           //导出选项配置
	                ele:'#exports',                   //导出的Dom元素
	                headerTitle: '结账记录',             //excel表格的标题
	                pageData:false,                     //true:导出的数据为页面数据，false:最大导出maxAmount条数据
	                maxAmount: 10000,                    //当pageData为false生效
	                fileName: '结账记录',
	                where: function (){                 //当pageData为false时生效，过滤的条件
	                	var siteName = $("#searchForm").find("select[name='siteName']").val();
						var startTime = $("#searchForm").find("input[name='startTime']").val();
						var endTime = $("#searchForm").find("input[name='endTime']").val();
	                    var ret = {};
	                    ret.siteName= siteName;
	                    ret.startTime= startTime;
	                    ret.endTime= endTime;
	                    return ret; 
	                }
	            }
			});

			//监听搜索
			form.on('submit(LAY-user-back-search)', function(data) {
				var field = data.field;
				//执行重载
				tableExt.reload('test', {
					where : field,
					page : {
						curr : 1
					},
				});
			});
		});

		function reset() {
			$("#searchForm").find("select").val("");
			$("#searchForm").find("input").val("");
		}

		function showDetail(billingId) {
			var url = "${ctx}/settlement/site/stat/list?billingId=" + billingId;
			var name = '服务商结算';

			var marks = "1";//LAY_app
			var obj;
			$(window.parent.document).find("#LAY_app").find("#LAY_app_tabsheader").find("li").each(function() {
				var tabsName = $(this).find("span").text();
				if (name == tabsName) {
					obj = $(this).find("i");
					marks = "2";//已存在
				}
			});
			if (marks == "2") {
				obj.trigger("click");
				top.layui.index.openTabsPage(url, name);
			} else {
				top.layui.index.openTabsPage(url, name);
			}
			var objp = $(window.parent.parent.document).find("#LAY_app").find("#LAY-system-side-menu").find("li").eq(2).find("dl").find("dd");
			objp.eq(1).addClass("layui-this");
		}

		function forbitClick() {
			layer.msg("您还没有此功能的权限！", {
				icon : 2
			});
		}
	</script>
</body>
</html>

