{extend name="layout/user"}
{block name="css"}
<link href="__CSS__/plugins/datatables/css/jquery.datatables.min.css" rel="stylesheet" type="text/css"/>	
<link href="__CSS__/plugins/datatables/css/jquery.datatables_themeroller.css" rel="stylesheet" type="text/css"/>
<style>
#picLi{
 height:500px;
 overflow-y:scroll;
}
.pic{
  display:block;
  }
.pic ul{
    display: inline-block;
	}
.pic li{
 margin:8px;
 float:left;
 width:22%;
 list-style: none;
 min-width:160px;
text-align: center;
}
.pic img{
height:180px;
margin-bottom:8px
}
</style>	
{/block}
{block name="text"}
 <div class="page-inner">
	<div class="page-title">
		<h3 class="breadcrumb-header">收款API</h3>
	</div>
	<div id="main-wrapper">
		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-white">
					<div class="panel-body">
						<div class="row">
							 <div class="col-md-12 text-left" style="padding-left:0;">
								<h4>API配置</h4>
								  <div class="panel-body col-md-6">
									<div class="alert alert-default" style="padding:8px" role="alert">
										<small style="margin-left:6px" class="h5">微信通道开关：</small><small style="margin-left:12px"><input type="checkbox" id="wxpay" class="js-switch" {eq name="$u['wxpay'][1]" value="1"} checked{/eq}  ></small>
									</div>
									<div class="alert alert-default" style="padding:8px" role="alert">
										<small style="margin-left:6px" class="h5">支付通道开关：</small><small style="margin-left:12px"><input type="checkbox" id="alipay" class="js-switch" {eq name="$u['alipay'][1]" value="1"} checked{/eq} ></small>
									</div>
									<div class="alert">
										<small class="h5"><button type="button" id="repay" class="btn btn-danger btn-addon"><i class='fa fa-dollar'></i> 支付演示</button></small><small class="h5" style="margin-left:12px"><button type="button" onclick="xiazai()" class="btn btn-default"><i class="fa fa-cloud-download"></i>  接口文档下载</button></small>
									</div>
									
								</div>
							</div>
						   
						</div>
						<div class="col-md-12" style="padding-left:0;margin-bottom: 12px;">
							<hr>
							<p>
								<strong class="h4 text-danger">收款账号</strong><small style="float:right"><button type="button"  data-toggle="modal" data-target="#myModal" class="btn btn-default">添加收款账号</button></small><br>
							</p>
						</div>
						 <div class="panel-body">
                                    
                                </div>
						<div class="table-responsive">
								<table id="zhanghao" class="display table" style="width: 100%; cellspacing: 0;">
									<thead>
										<tr>
											<th>记录编号</th>
											<th>收款账号</th>
											<th>账号类型</th>
											<th>收款限额</th>
											<th>账号状态</th>
											<th>开关</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody></tbody>
								</table>
						</div>
		   
					</div>
				</div>
			</div>
		</div><!-- Row -->
    </div><!-- Main Wrapper -->
</div>
<div class="modal fade" id="recharge" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document" style="margin-top: 10%;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">余额充值</h4>
      </div>
      <div class="panel panel-white">
        <form id="tix">
         <div class="alert alert-default" role="alert" style="padding:1px;text-align:center;background:#FFF">
				<img src="/static/home/images/weixin.jpg" height="60px">
          </div>
		  <div class="thumbnail" style="width: 200px; height: 300px; margin: 2% auto;">
            <img id="img" src="" width="200" height="300">
          </div>
		  <div class="form-group" style="text-align: center;font-size: 24px;">
            <label for="recipient-name" class="control-label">指定金额:</label>
			<label for="recipient-name" id="money" class="control-label text-danger"></label>
          </div>
		  <div class="form-group" style="text-align: center;font-size: 20px;">
            <label for="recipient-name" class="control-label">订单号:</label>
			<label for="recipient-name" id="order" class="control-label text-success" ></label>
          </div>
		   <div class="form-group" style="text-align: center;font-size: 20px;">
			<label for="recipient-name" id="djs" class="control-label text-danger" >剩余05分00秒订单失效</label>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document" style="margin-top: 10%;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">添加支付账号</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">收款账号:</label>
            <input type="text" class="form-control" maxlength="20" id="name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">账号类型:</label>
            <select class="form-control" id="type">
			 <option value="wxpay">微信</option>
			  <option value="alipay">支付宝</option>
			</select>
          </div>
		  <div class="form-group">
            <label for="recipient-name" class="control-label">限额:</label>
             <input type="number" class="form-control" pattern="[0-9]" maxlength="12" id="money">
          </div>
        </form>
      </div>
      <div class="modal-footer">
	    <button type="button" id="Addbtn" class="btn btn-primary">确定添加</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="bhao" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document" style="margin-top: 10%;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">编辑账号</h4>
      </div>
      <div class="modal-body">
        <form id="formk">
          <div class="form-group">
            <label for="recipient-name" class="control-label">收款账号:</label>
            <input type="text" class="form-control" maxlength="20" id="name">
          </div>
		  <div class="form-group">
            <label for="message-text" class="control-label">账号类型:</label>
            <select class="form-control" id="type">
			 <option value="wxpay">微信</option>
			  <option value="alipay">支付宝</option>
			</select>
          </div>
		  <div class="form-group">
            <label for="recipient-name" class="control-label">限额:</label>
             <input type="number" class="form-control" pattern="[0-9]" maxlength="12" id="money">
          </div>
          <input type="hidden" id="idg" value="">
        </form>
      </div>
      <div class="modal-footer">
	    
        <button type="button" id="bttn"  class="btn btn-primary">确认修改</button>
		 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myLargeModalLabel">二维码目录</h4>
					</div>
					<div class="modal-body" id="picLi">
					</div>
					<div class="modal-footer">
					    <button type="button" class="btn btn-info" toid="" id="upPic">上传二维码</button>
						<button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
</div>

{/block} 
{block name="js"}
{include file="layout/footda"/}
<script>
function xiazai(){
   window.location.href="/支付接口文档.doc";
}
   var tablel;
   var changeCheckbox = document.querySelector('#wxpay');
		changeCheckbox.onchange = function() {
		 console.log(changeCheckbox);
		   let s=changeCheckbox.checked;
		   let state=s?1:0;
		   $.post("{:U('home/mianqian/setKai')}",{type:'wxpay',kai:state},function(res){
		      if(res.code==1){
					layer.alert(res.msg, {
						  icon: 1,
						  skin: 'layer-ext-moon' },function(){
							location.reload();
						  })
					}else{
					layer.alert(res.msg, {
						  icon: 2,
						  skin: 'layer-ext-moon'})
					}
			  
		      
		   })
		   
		 
		};
	var cbox = document.querySelector('#alipay');
		cbox.onchange = function() {
		   let s=cbox.checked;
		   let state=s?1:0;
		   $.post("{:U('home/mianqian/setKai')}",{type:'alipay',kai:state},function(res){
		      if(res.code==1){
					layer.alert(res.msg, {
						  icon: 1,
						  skin: 'layer-ext-moon'} ,function(){
							location.reload();
						})
					}else{
					layer.alert(res.msg, {
						  icon: 2,
						  skin: 'layer-ext-moon'})
					}
			  
		      
		   })
		 
		};
    	 function CountDown() {
		 if (maxtime >= 0) {
		     sendOrder();
			 minutes = Math.floor(maxtime / 60);
			 seconds = Math.floor(maxtime % 60);
			 if(minutes < 10)minutes="0" + minutes;
			 if(seconds < 10)seconds="0" + seconds;
			 msg="剩余"+minutes+"分"+seconds+"秒订单失效";
			 $("#djs").text(msg);
			 --maxtime;
		 } else{
			 clearInterval(timer);
			 $('#recharge').modal('hide');
		 }
	   }
	 function sendOrder(){
	   let order=$("#order").text();
	   $.post("{:U('api/api/getOrder')}",{order:order},function(e){
	      if(e.code==1){
		      if(e.status==1){
			     layer.msg("支付成功", {time: 1000, icon: 1},function(index){
				     clearInterval(timer);
				     layer.close(index);
					 $('#recharge').modal('hide');
				 });
				 return false;
			  }
		  }
	   });
	 }
   var maxtime,timer;
     $("#repay").click(function(){
	    layer.open({
		id:1,
			type: 1,
			title:'充值金额',
			skin:'layui-layer-rim',
			area:['450px', 'auto'],
			content: '<div class="row" style="width: 420px;  margin-left:7px; margin-top:10px;">'
			    +'<div class="col-sm-12">'
				+'<div class="input-group">'
				+'<span class="input-group-addon">选择支付方式:</span>'
				+' <select class="form-control" id="altype" name="type">'
				+'  <option value="wxpay"> 微信</option>'
				+'  <option  value="alipay"> 支付宝</option>'
				+'	</select>'
				+'</div>'
				+'</div>'
				+'<div class="col-sm-12" style="margin-top:12px">'
				+'<div class="input-group">'
				+'<span class="input-group-addon">充值金额:</span>'
				+'<input id="firstpwd" type="number" class="form-control" placeholder="请输入金额">'
				+'</div>'
				+'</div>'
				  +'</div>'
			,
			btn:['充值','取消'],
			btn1: function (index,layero) {
			   var jin=$("#firstpwd").val(),type=$("#altype").val();
                if(type=="alipay"){
				   layer.alert("支付宝暂时未开通,请使用微信充值", {
						  icon: 2,
						  skin: 'layer-ext-moon'});
						return false;
                }
               var loading = layer.load(2, {shade: [0.1, '#fff']});				
			   $.post("{:U('home/member/Recharge')}",{jin:jin,type:type},function(e){
			       layer.close(loading);
			       if(e.code==1){
				     $("#img").attr("src",e.img);
					 $("#money").text("￥"+e.money);
					 $("#order").text(e.order);
				     $('#recharge').modal('show');
					  maxtime=300;
					  timer = setInterval(CountDown, 1000);
				   }else{
				     layer.alert(e.msg, {
						  icon: 2,
						  skin: 'layer-ext-moon'});
				   }
			   });
			},
			btn2:function (index,layero) {
				 layer.close(index);
			}
	 
		});
	    
	 })
   function kait(q,a){
    $.post("{:U('home/mianqian/kaiSta')}",{id:q,s:a},function(res){
		    if(res.code==1){
					layer.alert(res.msg, {
						  icon: 1,
						  skin: 'layer-ext-moon'},function(index){
							location.reload();
						})
					}else{
					layer.alert(res.msg, {
						  icon: 2,
						  skin: 'layer-ext-moon'})
					}
			  
		    
		 })
   }
   function tuDel(q,a){
     var s=$(q).attr("weih"),bid=$("#upPic").attr('toid');
	 if(bid==""){
	  layer.alert("系统出现错误，请刷新重试！", {icon: 2,skin: 'layer-ext-moon'},function(){
	     layer.close(index);return false;
	  })}
	 layer.confirm('确定删除该图片吗？', {
					  btn: ['确定删除','算了'] //按钮
					}, function(){
		$.post("{:U('home/mianqian/tuDel')}",{id:bid,a:a,b:s},function(res){
					        layer.alert(res.msg, {
								  icon: 1,
								  skin: 'layer-ext-moon'},function(){
								     layer.closeAll();
									 if(s=='false'){
									   $(q).parent().next().remove();
									   $(q).parent().next().remove();
									   $(q).parent().remove();
									 }else{
								       $(q).parent().parent().parent().remove();
									 }
								  })
							})
	})
   } 
 $(function(){
	 $("#Addbtn").click(function(){
	     var name=$("#myModal #name").val(),type=$("#myModal #type").val(),money=$("#myModal #money").val();
		 $.post("{:U('home/mianqian/addPay')}",{account:name,type:type,quota:money},function(res){
		    if(res.code==1){
					layer.alert(res.msg, {
						  icon: 1,
						  skin: 'layer-ext-moon'},function(index){
							layer.close(index);
							$('#myModal').modal('hide');
							var table=$('#zhanghao').DataTable();
							table.ajax.reload();
							table.draw(true);
						})
					}else{
					layer.alert(res.msg, {
						  icon: 2,
						  skin: 'layer-ext-moon'})
					}
			  
		    
		 })
	   
	 })
	 $("#upPic").click(function(){
	   var id=$(this).attr('toid');
	   layer.open({
		  type: 2,
		  title: '上传图片',
		  shadeClose: true,
		  shade: 0.8,
		  area: ['60%','55%'],
		  content: '{:U("home/mianqian/upPic")}?id='+id //iframe的url
		});		
	 })
	  $("#bttn").click(function(){
	     var id=$("#idg").val(),name=$("#bhao #name").val(),type=$("#bhao #type").val(),money=$("#bhao #money").val();
		 $.post("{:U('home/mianqian/editPay')}",{id:id,account:name,type:type,quota:money},function(res){
		    if(res.code==1){
					layer.alert(res.msg, {
						  icon: 1,
						  skin: 'layer-ext-moon'},function(index){
							layer.close(index);
							$('#bhao').modal('hide');
							$('#zhanghao').DataTable().ajax.reload();
							var table=$('#zhanghao').DataTable();
							table.ajax.reload();
							table.draw(true);
						})
					}else{
					layer.alert(res.msg, {
						  icon: 2,
						  skin: 'layer-ext-moon'})
					}
			  
		    
		 })
	   
	 })
	tablel=$('#zhanghao').DataTable({
        'language': {
            "url": url
        },
		'searching': false,
		'bLengthChange':false,
		"pagingType": "full_numbers",
		"serverSide":true,
		'orderable' : false,
		"order": [[ 0, 'desc' ]],
		"ajax": "",
		"columnDefs": [
                    {
                        "targets": -1,
                        "render": function ( data, type, full, meta ) {
                            return "<button type = 'button' class='btn btn-success' id = 'editButton' ><i class='fa fa-edit'></i> 编 辑</button>  <button type = 'button' class='btn btn-danger' id = 'testButton' ><i class='fa fa-close'></i> 删除</button> <button type = 'button' class='btn btn-info' id = 'mulButton' ><i class='fa fa-file-text'></i>  二维码目录</button>";
                        }
                    },
					 {
                        "targets": 4,
                        "render": function ( data, type, full, meta ) {
                            var str="<p class='text-success'>正常</p>";
							if(data==1){
							  var str="<p class='text-danger'>收款限额</p>";
							}
							return str;
                        }
                    },
					 {
                        "targets": 5,
                        "render": function ( data, full, meta ) {
                            var str='<input  class="js-switch"  value="'+data+'" onchange="kait('+meta.id+','+data+')" type="checkbox" id="mybtn" name="my-checkbox1" >';
							if(data==1){
							  var str='<input  class="js-switch"  value="'+data+'" onchange="kait('+meta.id+','+data+')" type="checkbox" id="mybtn" name="my-checkbox1" checked>';
							}
							return str;
                        }
                    }
                ],
	    "columns": [
		    { "data": "id" },
			{ "data": "account" },
			{ "data": "type" },
			{ "data": "quota" },
			{ "data": "status",'orderable' : false},
			{ "data": "state",'orderable' : false},
			{ "data": null,'orderable' : false}

		],
       "initComplete":function(){  
             var f=Array.prototype.slice.call(document.querySelectorAll("#mybtn"));
              f.forEach(function(html,index){
				     let ui=new Switchery(html,{color:"#f5707a"});
			    })
            }
        
	});
	  $("#zhanghao tbody").on("click", "#editButton", function () {
	            var row = $("table#zhanghao tr").index($(this).closest("tr"));
				console.log(row);
                var name = $("table#zhanghao").find("tr").eq(row).find("td").eq(0).text();
				var account = $("table#zhanghao").find("tr").eq(row).find("td").eq(1).text();
				var type = $("table#zhanghao").find("tr").eq(row).find("td").eq(2).text();
				var quota = $("table#zhanghao").find("tr").eq(row).find("td").eq(3).text();
				$("#bhao #name").val(account);
				$("#bhao #type").val(type);
				$("#bhao #money").val(quota);
				$("#idg").val(name);
				$("#bhao").modal("show");
            });   
      $("#zhanghao tbody").on("click", "#testButton", function () {
	            var row = $("table#zhanghao tr").index($(this).closest("tr"));
                var name = $("table#zhanghao").find("tr").eq(row).find("td").eq(0).text();
				layer.confirm('删除账号会连同二维码一起删除，你确定？', {
					  btn: ['确定删除','算了'] //按钮
					}, function(){
					  $.post("{:U('home/mianqian/uplDel')}",{id:name,tab:'up'},function(res){
					        layer.alert(res.msg, {
								  icon: 1,
								  skin: 'layer-ext-moon'},function(index){
								     layer.close(index);
								     $("table#zhanghao").find("tr").eq(row).remove();
								  })
							})
				           })
					});
		$("#zhanghao tbody").on("click", "#mulButton", function () {
	            var row = $("table#zhanghao tr").index($(this).closest("tr"));
                var name = $("table#zhanghao").find("tr").eq(row).find("td").eq(0).text();
				$.post("{:U('home/mianqian/ewmList')}",{id:name},function(res){
				  if(res.code==1){
				   $("#myLargeModalLabel").html("<span style='color:red'>"+res.name+"</span> ——二维码目录");
				   $("#upPic").attr("toid",res.id);
				   let str="",da=res.msg;
				   for(let k in da) {
				       if(k>0){
							str += "<h4><span>"+k+"元二维码</span><button style='margin-left:12px' class='btn btn-danger' type='button' weih='false' onclick='tuDel(this,"+k+")'>删除</button></h4><div class='pic'><ul>";
								for(let i in da[k]) {
								  str +='<li><img src="'+da[k][i]+'"><div class="panel-body"><span style="line-height: 30px;font-size:20px" class="text-success">'+k+'.'+i+'元</span><span style="float:right"><button type="button" weih="'+i+'" onclick="tuDel(this,'+k+')" class="btn btn-danger">删除</button><span></div></li>';
								}
							str +="</ul></div><hr>";
						}else{
						  str += "<h4><span>通用二维码</span><span style='margin-left:18px;color:red'>替换通用二维码请上传非金额命名的图片会自动替换</span></h4><div class='pic'><ul>";
								for(let i in da[k]) {
								  str +="<li><img src='"+da[k][i]+"'><div class='panel-body'><span style='line-height: 30px;font-size:20px' class='text-success'>通用不能删除</span></div></li>";
								}
							str +="</ul></div><hr>";
						}
						}
					$("#picLi").html(str);
				    $(".bs-example-modal-lg").modal("show");
				  }else{
				     layer.alert(res.msg, {
								  icon: 2,
								  skin: 'layer-ext-moon'});
				  }
				})
				
			});
				  			
 })
 
</script>
{/block}