{extend name="public/base" /}
{block name="body"}
<style>
.clinhei{width:100%;height:25px;}	
.inp{width:200px;}
.inpdiv{width:25%;float:left;}
.inpdivbut{width:10%;float:left;}
.so{width:80px;height:30px;border:0;margin-top:25px;text-align:center;line-height:30px;cursor: pointer;}
.tdinp{width:100%;border:0;}
.up{border:0;cursor: pointer;}
.infolist{float: left;font-weight:bold;width:20%;display:block;text-align:center;}
.moneycss{color:red;}
</style>
<div class="alert alert-danger alert-dismissable" id="alertmgs" style="display:none;position:fixed;top:10;">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		&times;
	</button>
	<p>错误！请进行一些更改。</p> 
</div>
<div class="alert alert-success alert-dismissable" id="alertyes" style="display:none;position:fixed;top:10;">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		&times;
	</button>
	成功！
</div>
<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-left">
			<h2><<{$bookname}>> 的用户数据详情</h2>
		</div>
		
	</header>
	<div class="main-box-body clearfix">
        
		<div class="row">
			<form method="get" class="target_form" id="formtime">
				<div class="col-sm-12 col-md-3 col-lg-3">
					
					<div class="input-group">
						<input type="text" class="form-control" name="startdata" id="startdata" value="{$startdata}" placeholder="">
						<span class="input-group-addon"><i class="fa fa-th"></i></span>
					</div>
				</div>
				<div class="col-sm-12 col-md-3 col-lg-3">
					<div class="input-group">
						<input type="text" class="form-control" name="enddata" id="enddata" value="{$enddata}" placeholder="">
						<span class="input-group-addon"><i class="fa fa-th"></i></span>
					</div>
				</div>
                <input type="hidden" name="id" value="{$id}"> 
				<div class="col-sm-12 col-md-3">
					<button class="btn btn-primary" type="button" onclick="verificationfrom()">搜索</button>
				</div>
			</form>
		</div>
		
		    <div class="clinhei"></div>
		    <p class="text-success">{$text}</p>
		    <div class="panel panel-default">
                 <div class="panel-body">
                    <div class="infolist">充值金额<p class="text-warning moneycss">￥{if $data.money==''}0{/if}{$data.money}</p></div>
                    <div class="infolist">充值次数<p class="text-warning">{$data.Numberofpayments}</p></div>
                    <div class="infolist">新增用户<p class="text-warning">{$data.mumusers}</p></div>
                    <div class="infolist">付费率<p class="text-warning">{$data.payrate}%</p></div>
                    <div class="infolist">客单价<p class="text-warning moneycss">￥{$data.price}</p></div>
                 </div>
                 
            </div>
            <div class="clinhei"></div>
            <div class="container">
                <p class="text-success">该书最近的10条充值记录如下:</p>          
				<table class="table table-bordered">
					<thead>
						<tr>
							<th>用户ID</th>
							<th>头像</th>
                            <th>昵称</th>
                            <th>充值金额</th>
                            <th>订单号</th>
                            <th>时间</th>
                            <th>状态</th>
						</tr>
					</thead>

					<tbody id="tables">
                        {volist name="user" id="v"}
                            <tr>
                                <td class="text-center">{$v.userid}</td>
                                <td class="text-center" style="color:red;"><img src="{$v.avatar}" style="width:50;height:50px;"></td>
                                <td class="text-center">{$v.username}</td>
                                <td class="text-center" style="color:red">￥{$v.money}</td>
                                <td class="text-center" style="color:#689f38">{$v.out_trade_no}</td>
                                <td class="text-center">{$v.times|date='Y-m-d H:i:s',###}</td>
                                <td class="text-center" style="color:#689f38;font-weight:bold;">充值成功</td>
                            </tr>
                        {/volist}   
					</tbody>
                </table>
			</div>

	</div>
	
</div>
{/block}
{block name="script"}
<!-- datepicker statr -->
<link href="/public/plugs/datepicker/css/foundation-datepicker.min.css" rel="stylesheet" type="text/css">
<script src="/public/plugs/datepicker/js/foundation-datepicker.js"></script>
<script src="/public/plugs/datepicker/js/foundation-datepicker.zh-CN.js"></script>
<script>
$('#startdata').fdatepicker({
    clearBtn: true,
    todayBtn: true,
	format: 'yyyy-mm-dd h:i',
	pickTime: true
});
$('#enddata').fdatepicker({
    clearBtn: true,
    todayBtn: true,
	format: 'yyyy-mm-dd h:i',
	pickTime: true
});

function alertmgs(mgs){
    $('#alertmgs').show();
	$('#alertmgs').children('p').html(mgs);
	setTimeout(function(){ gb('no'); }, 3000);
}
function alertyes(mgs){
    $('#alertyes').show();
	$('#alertyes').children('p').html(mgs);
	setTimeout(function(){ gb('yes'); }, 3000);
}
function gb(type){
     if(type=='yes'){
		$('#alertyes').css('display','none');
         
	 }else{
		$('#alertmgs').css('display','none'); 
	 }
}

// 验证表单
function verificationfrom(){
    var formtime = $('#formtime');
        if(formtime.find('input:eq(0)').val()==''){
            alertmgs('时间不能为空')
        }else if(formtime.find('input:eq(1)').val()==''){
            alertmgs('时间不能为空')
        }else{
            formtime.submit();
        }
}


</script>
{/block}