<%@ 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_SITE_TXJLT" html='
				<li class="layui-this">
					<a href="${ctx}/siteReceipt/getsiteCashOutList">结账记录</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">
				<div class="layui-card-body over">
					<h3 class="f-l" style="font-weight: bold;">钱包余额（元）</h3>   <strong class="f-l">0</strong> <button type="button" class="layui-btn f-l ml-10" onclick="siteApply('${siteId}')">请款</button>
				</div>
				<input type="hidden" id="withdrawable_cash">
			</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">
							<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">
							<select name="status">
								<option value="">请选择</option>
								<option value="1">处理中</option>
								<option value="4">已登记</option>
								<option value="2">已结账</option>
								<option value="3">取消驳回</option>
							</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="createStart" name="startTime" 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="createEnd" name="endTime" 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="finishStart" name="timeStart"  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="finishEnd" name="timeEnd" autocomplete="off" class="layui-input"  placeholder="结束日期" readonly>
							</div>
						</div>
					</div>
					<div class="layui-col-lg2 layui-col-sm3">
						<label class="layui-form-label">结账类型：</label>
						<div class="layui-input-block">
							<select name="checkoutType">
								<option value="">请选择</option>
								<option value="1">开票</option>
								<option value="2">转货款</option>
							</select>
						</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="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 type="text/javascript">
        var siteId = "${siteId}"
        var table;
        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;
			table = tableExt.getLayTable();
			var date = layui.laydate;

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

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

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

			//初始化table表格，事件处理在初始化之后
			tableExt.render({
				elem : '#settlementList',
				height : 'full-300',
				url : '${ctx}/siteReceipt/getCrmSiteCashOutList', //数据接口
				page : true, //开启分页
				toolbar : "#settlementToolbar",
				defaultToolbar : [],
				limits : [ 20, 50, 100 ],
				limit : 20,
				cols : [[
                    {type: 'numbers',title:'序号'}
                    ,{field: 'status', title: '结账状态', width: 150,align: 'center',templet:function(d){
                        var status = d.status;
                        if(status == '1'){
                            return "处理中";
                        }else if(status == '4'){
							return "已登记";
						}else if(status == '3'){
							return "取消驳回";
						}else{
                            return "已结账";
                        }
                    }}
                    ,{field: 'withdrawal_number', title: '结账编号', align: 'center',width: 300}
                    ,{
                        field : 'site_img',
                        title : '服务商凭证',
                        width : 200,
                        align : 'center',
                        templet : function(d) {
                            var imgs = d.site_img;
                            if(!isBlank(imgs)){
                                return '<span class="imgShowLook" imghref="'+imgs+'" style="color:#D9B589;cursor:pointer;"><img src="${commonStaticImgPath}'+imgs+'" alt="" style="width:25px;height:25px;" ></span>';
                            }else{
                                return "---";
                            }
                        }
                    }
                    ,{field: 'withdrawal_amount', title: '结账金额', align: 'center', width: 150}
                    ,{field: 'checkout_type', title: '结账类型', align: 'center', width: 150,
                        templet:function(d){
                            if(d.checkout_type=='1'){
                                return "开票";
                            }else if(d.checkout_type=='2'){
                                return "转货款";
                            }else{
                                return "";
                            }
                        },expFormat:function (d) {
                            if(d.checkout_type=='1'){
                                return "开票";
                            }else if(d.checkout_type=='2'){
                                return "转货款";
                            }else{
                                return "";
                            }
                        }
					}
                    ,{field: 'create_time', title: '申请时间',align: 'center', width: 220}
					,{field: 'register_time', title: '登记时间',align: 'center', width: 220}
                    ,{field: 'finish_time', title: '结账时间',align: 'center', width: 220}
					,{field: 'register_remarks', title: '驳回原因',align: 'center', width: 220}
				]],	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' ],
                            shadeClose:true,
                            content : $('#lookImg')
                        })
                    })
                }
			});

            totalWithdrawal();

			$(".layui-table-tool").hide();

			function totalWithdrawal(){
                $.ajax({
                    type: "POST",
                    url: "${ctx}/siteFitting/apply/getSiteInformation",
                    data: {
                        siteId: siteId
                    },
                    success: function (result) {
						$("strong").html(result.columns.total_wallet)
						$("#withdrawable_cash").val(result.columns.total_wallet)
                        //可请款的总额

                    }
                });
			}


		});
        function siteApply(siteId) {
            layer.open({
                type : 2,
                title : '结账',
                content : '${ctx}/siteReceipt/siteApplePage?siteId=' + siteId,
                area : [ '450px', '320px' ],
                end:function(){
                    //刷新表格
                    table.reload('settlementList');
                }
            })
        }
        function isBlank(val) {
            if (val == null || val == '' || val == undefined) {
                return true;
            }
            return false;
        }
	</script>
</body>
</html>
