<%@ 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="SITE_JIEZHANG_RECORD_T" html='
				<li class="layui-this">
					<a href="${ctx}/siteReceipt/getCrmSiteCashOutPage">服务商账单</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-lg2 layui-col-sm2">
						<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-lg2 layui-col-sm2">
						<label class="layui-form-label">结账编号：</label>
						<div class="layui-input-block">
							<input type="text" name="withdrawalNumber" class="layui-input" id="withdrawalNumber"  >
						</div>
					</div>

					<div class="layui-col-lg3 layui-col-sm5">
						<label class="layui-form-label">申请时间：</label>
						<div class="layui-input-block">
							<div class="layui-col-xs4">
								<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-xs4">
								<input type="text" id="createEnd" name="endTime" autocomplete="off" class="layui-input" placeholder="结束日期" readonly>
							</div>
						</div>
					</div>

					<div class="layui-col-lg3 layui-col-sm5">
						<label class="layui-form-label">结账时间：</label>
						<div class="layui-input-block">
							<div class="layui-col-xs4">
								<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-xs4">
								<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 id="settlementToolbar" class="layui-form-item layui-hide">
			<sfTags:pagePermission authFlag="SITE_DAIJIE_RECORD_EXPORT_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>


	</div>
	<div id="lookImg" class="hide">
		<div class="w-500 h-500 lookImg">
			<img src="../../img1/banner004.jpg" width="80%" height="80%" />
		</div>
	</div>
	<div class="layui-form  layui-card hide" id="local">
		<div class="layui-card-body" >
			<div class="layui-col-xs12 mt-20" style="margin-left: -30px" >
				<label class="layui-form-label">备注：</label>
				<div class="layui-input-block">
					<textarea name="location" id="location" class="layui-textarea remark"></textarea>
				</div>
			</div>
		</div>
	</div>
	<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
	<script type="text/javascript">
        function resetForm() {
            $("#searchForm")[0].reset();
            $("#btnSubmit").click();
        }
		var $;
        var table;
        var adjustLayer = -1;
        layui.config({
            base: '${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index','tableExt', 'form','layer','laydate'], function() {
			 $ = 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
					}
				}); //数据刷新

				return false;
			});

			var jzFlag='${fns:checkPagePermission(request, "SITE_DAIJIE_RECORD_JZ_B")}';
			//初始化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', fixed:'left', title:'序号'}
                    ,{field: 'id', title:'操作', fixed:'left', width: 220,align: 'center',templet:function(d){
                        var status = d.status;
                        var html ="";
                        if(status=='1'){
							html = "<a class=\"layui-table-opt-link\" href=\"javascript:cancelRejection('"+d.id+"');\">取消驳回</a> &nbsp;&nbsp;";
						}
							if(status == '4'){
                            if(jzFlag=='0'){
								html = html+"<a class=\"layui-table-opt-link\" href=\"javascript:settleAccounts('"+d.id+"');\">结账</a>";
                                return html;
							}
							return "-----";
						}else if(status == '1' && d.checkout_type =='1'){
                                html = html+"<a class=\"layui-table-opt-link\" href=\"javascript:register('"+d.id+"');\">登记</a>";
                                return html;
						}else if(d.checkout_type =='2' && status == '1'){
								if(jzFlag=='0' ){
                                    html = html+"<a class=\"layui-table-opt-link\" href=\"javascript:settleAccounts('"+d.id+"');\">结账</a>";
									return html;
								}else{
									return "-----";
								}
							}else{
                            return "-----";
						}
            		}
            		,expFormat:function(d){
                            var status = d.status;
                            if(status == '1'){
                                return "结账";
                            }else{
                                return "-----";
                            }
						}
            		}
                    ,{field: 'withdrawal_number', align: 'center',title: '结账编号',exportable: true, width: 200}
                    ,{field: 'status', title: '结账状态',align: 'center',exportable: true, width: 130,templet:function(d){
                        var status = d.status;
						 if(status == '1'){
                            return "处理中";
                        }else if(status == '4'){
							return "已登记";
						}else if(status == '3'){
							 return "取消驳回";
						 }else{
                            return "已结账";
                        }
                    }
                    ,expFormat:function(d){
                            var status = d.status;
                            if(status == '1'){
                                return "处理中";
                            }else if(status == '4'){
								return "已登记";
							}else{
                                return "已结账";
                            }
						}
                    }
                    ,{field: 'site_name', title: '服务商名称',align: 'center',exportable: true, width: 230}
                    ,{
                        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 : 'imgs',
                        title : '支付凭证',
                        width : 100,
                        align : 'center',
                        templet : function(d) {
                            if(d.status == 2){
                                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>';
                            }else{
                                return "";
							}
                        }
                    }
                    ,{field: 'withdrawal_amount', title: '结账金额',align: 'center',exportable: true, width: 150}
                    ,{field: 'checkout_type', title: '结账类型',align: 'center',exportable: true, 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: 'register_remarks', title: '登记备注',align: 'center', exportable: true,width: 220,
						templet:function(d){
							var status = d.status;
							if(status!='3'&& !isBlank(d.register_remarks)){
								return d.register_remarks;
							}else{
								return "";
							}
						},expFormat:function (d) {
							var status = d.status;
							if(status!='3'){
								return d.register_remarks;
							}else{
								return "";
							}
						}}
					,{field: 'register_remarks', title: '驳回原因',align: 'center', exportable: true,width: 220,
						templet:function(d){
							var status = d.status;
							if(status=='3' ){
								return d.register_remarks;
							}else{
								return "";
							}
						},expFormat:function (d) {
							var status = d.status;
							if(status=='3'){
								return d.register_remarks;
							}else{
								return "";
							}
						}}
                    ,{field: 'create_time', title: '申请时间',align: 'center', exportable: true,width: 200}
					,{field: 'register_time', title: '登记时间',align: 'center', exportable: true,width: 220}
                    ,{field: 'finish_time', title: '结账时间',align: 'center', exportable: true, width: 200}
				]],	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')
                        })
                    })
                }
				,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 settleAccounts(id) {
            layer.open({
                type : 2,
                title : '结账',
                content : '${ctx}/siteReceipt/siteSettleWithdraw?id=' + id,
                area : [ '450px', '287px' ],
                end:function(){
                    //刷新表格
                    table.reload('settlementList');
                }
            })
        }

        function cancelRejection(id){
			layer.prompt({title: '请输入取消驳回原因', formType: 2}, function(text, index){
				layer.close(index);
				$.ajax({
					url: '${ctx}/siteReceipt/cancelRejection',
					type: 'post',
					data: {
						id: id,
						title:text
					},
					success: function(data) {
						if(data.code =='202'){
							layer.msg(data.msg)
						}else if(data.code =='200'){
							layer.msg("取消驳回成功")
                            table.reload('settlementList');
						}else{
							layer.msg("失败！")
						}

					}
				})
			});
		}


        /**
		 * 登记
        */
		function register(id) {
			layer.open({
				type: 1,
				content: $("#local")  //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
				,title: "登记信息"
				,area:["400px","300px"]
				,btn:['确定', '取消']
				, yes: function(index, layero){
					var location = $("#location").val();
					/*if(isBlank(location)){
						layer.msg("请输入库位",{icon :2})
						return
					}*/
					$.ajax({
						url: '${ctx}/siteReceipt/registerCashOut',
						type: 'post',
						data: {
							id: id,
							remark:location
						},
						success: function(data) {
							if(data.code=="200"){
								layer.msg("保存成功！",{time:1000},function(){
									var index = layer.open();
									layer.close(index)//先得到当前iframe层的索引
									window.location.reload();
								});
							}else{
								layer.msg("保存失败！");
							}
						},
						complete:function(){
							noRepeatSub = false;
						}
					});
				}
			});
		}
        function isBlank(val) {
            if (val == null || val == '' || val == undefined) {
                return true;
            }
            return false;
        }
	</script>
</body>
</html>
