{extend name="public/base"/}
{block name="body"}
<style>
.pull-left li{display:inline;}
</style>
<div class="main-box clearfix">
	<header class="main-box-header clearfix">
		<div class="pull-left">
			<ul class="nav nav-tabs">
					<li ><a href="{:url('statistics/order')}">订单统计</a></li>
					<li><a href="{:url('statistics/user')}">用户统计</a></li>
					
					{if session('user_auth.group')!=4}
					<li><a href="{:url('statistics/agentlog')}">下线统计</a></li>
					{/if}
					{if session('user_auth.group')!=4&&session('user_auth.group')!=3}
					<li><a href="{:url('statistics/novel')}">小说统计</a></li>
					<li><a href="{:url('statistics/kouliang')}">通道统计</a></li>
					<li ><a href="{:url('bookbonus/index')}">打赏记录</a></li>
					{/if}
					<li ><a href="{:url('subscription/index')}">订阅记录</a></li>
					<li class="active"><a href="{:url('statistics/vipstat')}">包月统计</a></li>
				</ul>
		</div>
		<div class="pull-right">
			<div class="col-sm-12 col-md-2">
			<!---
					<button class="btn btn-primary" id="btn-export-links"><i class="fa fa-download"></i>导出</button>
			--->
			</div>
		</div>
	</header>
	<div class="main-box-body clearfix">
		<div class="row">
			<form method="get">
				<div class="col-sm-12 col-md-4 col-lg-3">
					<input type="text" class="form-control" name="keyword" value="{$keyword|default=''}" placeholder="请输入关键字">
				</div>
				<div class="col-sm-12 col-md-4">
					<button class="btn btn-primary" type="submit">搜索</button>
				</div>
			</form>
		</div>
		<div class="table-responsive clearfix">

			<div class="table-responsive clearfix">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>月份</th>
							<th>名称</th>
							<th>结算(阅读币)</th>
							
						</tr>
					</thead>
					<tbody>
						{if condition="empty($list)"}
						<tr>
							<td colspan="5" align="center">暂无数据！</td>
						</tr>
						{else/}
						{volist name="list" id="item"}
						<tr>
							<td>{$item.month|date='Y-m',###}</td>
							<td>{$item.articlename}</td>
							<td>{$item.sumvipegold}</td>
						</tr>
						{/volist}
						{/if}
					</tbody>
				</table>
			</div>
			{$page}
		</div>
	</div>
</div>
<div class="modal fade" id="export-referral-links-modal" tabindex="-1">
    <div class="modal-dialog" role="document">
        <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">选择创建时间</h4>
            </div>
            <div class="modal-body">
                <div class="form-inline">
                    <div class="form-group">
                        <div class='input-group date from-date-picker'>
                            <input type='text' class="form-control" id="from-date-picker" placeholder="开始日期" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class='input-group date to-date-picker'>
                            <input type='text' class="form-control" id="to-date-picker" placeholder="结束日期" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-export">确认导出</button>
            </div>
        </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>
<link rel="stylesheet" type="text/css" href="/public/plugs/board/board.min.css">
<script>
    $(function () {
		$('#btn-export-links').click(function () {
			ExportReferralLinksModal.instance.open();
            return false;
		})
	});
    var ExportReferralLinksModal = function () {
        var self = this;
        var $modal = null;
        var inited = false;

        this.open = function () {
            if (!$modal) {
                $modal = $('#export-referral-links-modal');
                $modal.on('shown.bs.modal', function () {
                    init();
                });
            }

            $modal.modal('show');
        };

        this.dateRange = function () {
           return {
               from: $modal.find('.from-date-picker :text').val(),
               to: $modal.find('.to-date-picker :text').val()
           };
        };

        function doExport() {
            var range = self.dateRange();			
            if (!range.from || !range.to) {
                alert('请选择日期范围');
                return false;
            }
			$modal.modal('hide');
			var url ="{:url('outxls')}";
           location.href = url + "?fromtime="+range.from+"&totime="+range.to;
        }

        function init() {
            if (inited) {
                return false;
            }
			
			$modal.find('#from-date-picker').fdatepicker({
				format: 'yyyy-mm-dd',
				pickTime: false
			});
			$modal.find('#to-date-picker').fdatepicker({
				format: 'yyyy-mm-dd',
				pickTime: false
			});


            $modal.find('.btn-export').click(function () {
                doExport();
                return false;
            });

            inited = true;
        }
    };

    ExportReferralLinksModal.instance = new ExportReferralLinksModal();
</script>
{/block}