<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta name="decorator" content="base" />
<meta charset="utf-8">
<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">
<title>服务商结算汇总</title>
<link rel="stylesheet" href="${ctxPlugin}/static/css/reset.css" media="all">
<style>
</style>
</head>
<body>
	<div class="layui-fluid">
		<form class="layui-form layui-card" action="" id="searchForm" lay-filter="searchForm">

			<div class="layui-tab layui-tab-brief">
				<ul class="layui-tab-title">
					<sfTags:pagePermission authFlag="CWGL_FWSJSMX_FWSJSMX_T" html='
				<li>
					<a href="${ctx}/settlement/site/stat/list">结算明细</a>
				</li>'/>
					<sfTags:pagePermission authFlag="CWGL_FWSJSMX_JSHZ_T" html='
				<li class="layui-this">
					<a href="${ctx}/settlement/site/stat/summaryList">结算汇总</a>
				</li>'/>
					<div class="f-r layadmin-form-right mb-10">
						<button class="layui-btn f-r mt-10 mr-15 pl-10 pr-10" lay-submit lay-filter="btnSubmit" id="btnSubmit">
							<i class="layui-icon fs-12">&#xe615;</i>查询
						</button>
					</div>

				</ul>
			</div>

			<div class="layui-card-body">
				<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="siteId" lay-search>
								<option value="">请选择</option>
								<c:forEach items="${sites}" var="item">
									<option value="${item.columns.id}">${item.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" id="settlementTimeStart" name="settlementTimeStart"  autocomplete="off" class="layui-input" placeholder="开始日期" readonly>
							</div>
							<div class="layui-col-xs2 text-c lh-30">
								—
							</div>
							<div class="layui-col-xs5">
								<input type="text" id="settlementTimeEnd" name="settlementTimeEnd" autocomplete="off" class="layui-input"  placeholder="结束日期" readonly>
							</div>
						</div>
					</div>

				</div>
			</div>

		</form>

		<div class="layui-card">
			<div class="layui-card-body">
				<table id="settlementList" class="scroll-list" lay-filter="settlementList"></table>
			</div>
		</div>
	</div>

	<div id="settlementToolbar" class="layui-form-item layui-hide">
		<sfTags:pagePermission authFlag="FWSJSMX_JSHZ_DC_B" html='<button id="exportBtn" class="layui-btn layui-btn-sm layuiadmin-btn-useradmin" lay-event="export" data-type="export"><i class="layui-icon layui-icon-export"></i>导出</button>'/>
	</div>
	<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
	<script type="text/javascript">
        function resetForm() {
            $("#searchForm")[0].reset();
            $("#btnSubmit").click();
        }

        layui.config({
            base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'tableExt', 'form','layer','laydate'], function() {
			var $ = layui.$, form = layui.form;
			var tableExt = layui.tableExt;
			var date = layui.laydate;
			var table = tableExt.getLayTable();

            date.render({
                elem: '#settlementTimeStart' //指定元素
            });
            date.render({
                elem: '#settlementTimeEnd' //指定元素
            });



			//初始化table表格，事件处理在初始化之后
			tableExt.render({
				elem : '#settlementList',
				height : 'full-300',
				url : '${ctx}/settlement/site/stat/summaryListData', //数据接口
				page : true, //开启分页
				defaultToolbar : [],
                toolbar : "#settlementToolbar",
				limits : [ 20, 50, 100 ],
				limit : 20
                ,totalRow: true
                ,totalRowText: '合计'
				,cols : [[
                    {type: 'numbers',title:'序号', fixed:'left'}
                    ,{field: 'name', title: '服务商名称', width: 300, align: 'center',exportable: true}
                    ,{field: 'ordercnt', title: '工单数量', width: 250,align: 'center', exportable: true}
                    ,{field: 'tc', title: '结算总额', width: 250, align: 'center',exportable: true}
                    ,{field: 'siteamount', title: '已结账', width: 250, align: 'center',exportable: true}
                    ,{field: 'total_wallet', title: '未结账', width: 250,align: 'center', exportable: true,templet:function(d){
                        var siteamount = d.siteamount;
                        var tc = d.tc;
                        return (tc-siteamount);
                    }}
				]]
                ,done:function(res){

                }
                ,exportOpt: {
                    ele: '#exportBtn',                   //导出的Dom元素
                    headerTitle: '服务商结算汇总',             //excel表格的标题
                    pageData: false,                     //true:导出的数据为页面数据，false:最大导出maxAmount条数据
                    maxAmount: 10000,                    //当pageData为false生效
                    fileName: '服务商结算汇总',
                    where: function () {                 //当pageData为false时生效，过滤的条件
                        return _serializeJson(layui.$("#searchForm"), layui.$);
                    }
                }
			});

			/*条件查询*/
			layui.form.on('submit(btnSubmit)', function(data) {
				var field = data.field;
				table.reload('settlementList', {
					where : data.field,
					page : {
						curr : 1
					},
					done : function(res) {


					}
				}); //数据刷新

				return false;
			});

		});

	</script>
</body>
</html>
