<script src="<?php echo $this->basePath('js/plugins/echarts/echarts.min.js'); ?>"></script>
<script src="<?php echo $this->basePath('js/plugins/echarts/theme/shine.js'); ?>"></script>
<div class="content-wrapper">
    <section class="content-header">
        <?php echo $this->partial('layout/breadcrumb'); ?>
        <h1 class="pull-right" id="dbshop-menu-top">
            <?php echo $this->HelpUrl('userStatistics'); ?>
        </h1>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box">
                    <div class="box-body">
                        <h2 class="page-header">
                            <?php echo $this->translate('客户统计'); ?>
                        </h2>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <td><span class="text-bold"><?php echo $this->translate('今日新增'); ?>：</span><?php echo $this->todayUserNum; ?></td>
                                        <td><span class="text-bold"><?php echo $this->translate('本周新增'); ?>：</span><?php echo $this->weekUserNum; ?></td>
                                        <td><span class="text-bold"><?php echo $this->translate('本月新增'); ?>：</span><?php echo $this->monthUserNum; ?></td>
                                        <td><span class="text-bold"><?php echo $this->translate('客户总数'); ?>：</span><?php echo $this->userNum; ?></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <?php
                            $form = $this->form;
                            $form->prepare();
                            echo $this->form()->openTag($form);
                            ?>
                            <div class="col-xs-7 text-right">
                                <a href="<?php echo $this->url('analysis', []); ?>" class="btn <?php echo $this->type == 'week' ? 'btn-primary' : 'btn-default'; ?>"><?php echo $this->translate('本周'); ?></a>
                                &nbsp;&nbsp;
                                <a href="<?php echo $this->url('analysis', [], ['query' => ['type' => 'month']]); ?>" class="btn <?php echo $this->type == 'month' ? 'btn-primary' : 'btn-default'; ?>"><?php echo $this->translate('本月'); ?></a>
                            </div>
                            <div class="col-xs-2">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                    <?php echo $this->formElement($form->get('startDate')); ?>
                                </div>
                            </div>
                            <div class="col-xs-2">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                    <?php echo $this->formElement($form->get('endDate')); ?>
                                </div>
                            </div>
                            <div class="col-xs-1">
                                <button type="submit" class="btn btn-info"><?php echo $this->translate('查看'); ?></button>
                            </div>
                            <?php echo $this->form()->closeTag(); ?>
                        </div>
                        <div id="user_chart" style="width: 100%;height: 400px;margin-top: 40px;">
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </section>
</div>
<script type="text/javascript">
    laydate.render({elem: '#startDate'});
    laydate.render({elem: '#endDate'});

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('user_chart'), 'shine');
    option = {
        title: {
            text: '<?php echo $this->translate('客户统计图表'); ?>'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['<?php echo $this->translate('新增客户'); ?>']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : [<?php echo $this->dataStr; ?>]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'<?php echo $this->translate('新增客户'); ?>',
                type:'line',
                data:[<?php echo $this->userStr; ?>]
            }
        ]
    };
    myChart.setOption(option);
</script>