<%@ 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 class="layui-this">
					<a href="${ctx}/settlement/site/stat/list">结算明细</a>
				</li>'/>
					<sfTags:pagePermission authFlag="CWGL_FWSJSMX_JSHZ_T" html='
				<li >
					<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.id eq billing.siteId ? 'selected':''}>${item.columns.name}</option>
								</c:forEach>
							</select>
						</div>
					</div>

					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">保修类型：</label>
						<div class="layui-input-block">
							<select name="warrantyType">
								<option value="">请选择</option>
								<option value="1">保内</option>
								<option value="2">保外</option>
							</select>
						</div>
					</div>

					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">服务类型：</label>
						<div class="layui-input-block">
							<select name="serviceType">
								<option value="">请选择</option>
								<option value="安装">安装</option>
								<option value="维修">维修</option>
								<option value="咨询" >咨询</option>
							</select>
						</div>
					</div>
				<%--	<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">服务措施：</label>
						<div class="layui-input-block">
							<select name="serviceType">
								<option value="">请选择</option>
								<option value="安装">安装</option>
								<option value="维修">维修</option>
							</select>
						</div>
					</div>--%>

					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">电站名称：</label>
						<div class="layui-input-block">
							<input type="text" name="powerStationName" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">工单编号：</label>
						<div class="layui-input-block">
							<input type="text" name="number" autocomplete="off" class="layui-input">
						</div>
					</div>

				<%--	<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">结算类型：</label>
						<div class="layui-input-block">
							<select name="type">
								<option value="">请选择</option>
								<option value="0">工单结算</option>
								<option value="1">结算调整</option>
							</select>
						</div>
					</div>--%>

					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">结账状态：</label>
						<div class="layui-input-block">
							<select name="jzFlag">
								<option value="">请选择</option>
								<option value="3" >未结账</option>
								<option value="1">处理中</option>
								<option value="4">已登记</option>
								<option value="2">已结账</option>
							</select>
						</div>
					</div>

					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">结账编号：</label>
						<div class="layui-input-block">
							<input type="text" name="withdrawalNumber" autocomplete="off" class="layui-input" >
						</div>
					</div>

					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">用户姓名：</label>
						<div class="layui-input-block">
							<input type="text" name="customerName" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">用户电话：</label>
						<div class="layui-input-block">
							<input type="text" name="mobile" autocomplete="off" class="layui-input">
						</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="pubStart" name="pubStart" 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="pubEnd" name="pubEnd" autocomplete="off" class="layui-input" placeholder="结束日期" readonly>
							</div>
						</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="endStart" name="endStart"  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="end" name="end" autocomplete="off" class="layui-input"  placeholder="结束日期" readonly>
							</div>
						</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="settlementStart" name="settlementStart"  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="settlementEnd" name="settlementEnd" autocomplete="off" class="layui-input"  placeholder="结束日期" readonly>
							</div>
						</div>
					</div>

				</div>
			</div>

		</form>
	</div>

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


	<!--自定义toolbar-->
	<div id="settlementToolbar" class="layui-form-item layui-hide">
	<%--	<sfTags:pagePermission authFlag="FWSJSMX_JSTZ_B" html='
		<button class="layui-btn layui-btn-sm layuiadmin-btn-useradmin " lay-event="adjustment" data-type="adjustment">
			<i class="layui-icon layui-icon-add-1"></i>
			结算调整
		</button>'/>--%>
		<sfTags:pagePermission authFlag="FWSJSMX_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();
        }

        var adjustLayer = -1;
        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 table = tableExt.getLayTable();
			var date = layui.laydate;

            date.render({
                elem: '#pubStart' //指定元素
            });
            date.render({
                elem: '#pubEnd' //指定元素
            });
            date.render({
                elem: '#endStart' //指定元素
            });
            date.render({
                elem: '#end' //指定元素
            });
            date.render({
                elem: '#settlementStart' //指定元素
            });
            date.render({
                elem: '#settlementEnd' //指定元素
            });

			/*条件查询*/
			layui.form.on('submit(btnSubmit)', function(data) {
				var params = data.field; //获取提交的字段
				table.reload('settlementList', {
					where : params,
					page : {
						curr : 1
					}
				}); //数据刷新

				return false;
			});

			//初始化table表格，事件处理在初始化之后
			tableExt.render({
				elem : '#settlementList',
				height : 'full-300',
				url : '${ctx}/settlement/site/stat/listData', //数据接口
				page : true, //开启分页
				toolbar : "#settlementToolbar",
				defaultToolbar : [],
				limits : [ 20, 50, 100 ],
				limit : 20,
				<c:if test="${billing!=null}">
				where: {
				    siteId: '${billing.siteId}',
                    jzFlag: '1',
					billingNo: '${billing.number}'
				},
				</c:if>
				<c:if test="${billing==null}">
				where: {
                    otherSettlMonth:'${map.otherSettlMonth}',
				},
				</c:if>
				cols : [[
                    {type: 'numbers',title:'序号', fixed:'left'}
                    ,{field: 'id', type: 'checkbox'}
                    ,{field: 'jz_flag', title: '结账状态', width: 150, align: 'center',exportable: true,
						templet:function(d){
                    	console.log(d)
							if (d.jz_flag == '0') {
								return "未结账";
							} else  if (d.outStatus == '1'){
								return "处理中";
							}else  if (d.outStatus == '2'){
								return "已结账";
							}else  if (d.outStatus == '4'){
								return "已登记";
							}else{
								return "已结账";
							}
                    }
                        , expFormat: function (d) {
							if (d.jz_flag == '0') {
								return "未结账";
							} else  if (d.outStatus == '1'){
								return "处理中";
							}else  if (d.outStatus == '2'){
								return "已结账";
							}else  if (d.outStatus == '4'){
								return "已登记";
							}else{
								return "已结账";
							}
                        }}
                    ,{field: 'number', title: '工单编号', width: 200, align: 'center',exportable: true}
                    ,{field: 'withdrawal_number', title: '结账编号', align: 'center',width: 200, exportable: true}
                    ,{field: 'site_name', title: '服务商名称', width: 150,align: 'center', exportable: true}
                    ,{field: 'power_station_name', title: '电站名称', width: 150,align: 'center', exportable: true}
                    ,{field: '_warranty_type', title: '保修类型', width: 150,align: 'center', exportable: true}
                    ,{field: 'service_measures', title: '服务措施', width: 150, align: 'center',exportable: true}
                    ,{field: 'appliance_category', title: '设备类型', width: 150,align: 'center', exportable: true}
                    ,{field: 'orderRemarks', title: '工单描述', width: 200,align: 'center', exportable: true}
                    ,{field: 'level', title: '重要程度', width: 150,align: 'center', exportable: true,
                        templet:function(d){
							if (d.level == '1') {
								return "紧急";
							} else if (d.level == '2') {
								return "一般";
							}
                            return "";
                        }
                        , expFormat: function (d) {
                            if(d.level =='1'){
                                return "紧急";
							} else if (d.level == '2') {
								return "一般";
							}
							return "";
                        }}
                    ,{field: 'appliance_model', title: '设备型号',align: 'center', width: 150, exportable: true}
                    ,{field: 'appliance_machine_code', title: '设备序列号',align: 'center', width: 150, exportable: true}
                    ,{field: 'service_type', title: '服务类型', width: 150,align: 'center', exportable: true}
                    ,{field: 'employe_name', title: '服务工程师', width: 150,align: 'center', exportable: true}
                    ,{field: 'total_costs', title: '结算总额', width: 150,align: 'center', exportable: true,templet:function(d){
							return  "&nbsp;&nbsp;<a href=\"#\" class=\"layui-table-link\" onclick=\"costDetail('"+d.id+"','"+d.total_costs+"')\">"+d.total_costs+"</a>";
						}}
                    ,{field: 'createName', title: '报单人', width: 150, align: 'center',exportable: true}
                    ,{field: 'remarks', title: '结算备注', width: 150,align: 'center', exportable: true}
                    ,{field: 'order_type', title: '信息来源', width: 150, align: 'center',exportable: true,
                        templet:function(d){
                            if(d.order_type =='1'){
                                return "用户在线报修";
							}else  if(d.order_type =='2'){
                                return "平台录入";
                            }else if (d.order_type == 4) {
                                return "电子商务";
                            } else{
                                return "其他";
							}
                        }
                        , expFormat: function (d) {
                            if(d.order_type =='1'){
                                return "用户在线报修";
                            }else  if(d.order_type =='2'){
                                return "平台录入";
                            }else if (d.order_type == 4) {
                                return "电子商务";
                            } else{
                                return "其他";
                            }
                        }
                    }
                    ,{field: 'customer_name', title: '用户姓名',align: 'center', width: 150, exportable: true}
                    ,{field: 'customer_mobile', title: '用户电话',align: 'center', width: 150, exportable: true}
                    ,{field: 'customer_address', title: '用户地址',align: 'center', width: 150, exportable: true,
                        templet:function(d){
                            return d.province+d.city+d.area+d.customer_address;
                        }
                        , expFormat: function (d) {
                            return d.province+d.city+d.area+d.customer_address;
                        }
					}
                    ,{field: 'repair_time', title: '报单时间',align: 'center', width: 180, exportable: true}
                    ,{field: 'end_time', title: '完工时间',align: 'center', width: 180, exportable: true}
                    ,{field: 'settlement_time', title: '结算时间',align: 'center', width: 180, exportable: true}
				]]
                ,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.$);
                    }
                }
			});



		});

		function costDetail(id,total_costs) {
			layer.open({
				type: 2,
				title:" 结算总额",
				area: ['600px', '300px'],
				resize:false,
				content: "${ctx}/settlement/site/stat/costDetail?id="+id+"&total_costs="+total_costs
			});
		}
		
	</script>
</body>
</html>
