{% load i18n %}

<ol class="breadcrumb">
        <li>{% trans "进销存报表" %}</li>
        <li>{% trans "进出存报表" %}</li>
</ol>

<script type="text/javascript">
    $(document).ready(function(){
        var months='';
        for (i = 1; i <13; i++) {
            months=months+"<option values='"+i+"'>"+i+"</option>";
        };
        $('#month').html(months);   
        $('#month').val('{{month}}');
        $('form .btn-qry').click(function(){
            refreshTable();
        });


        $('form .btn-close').click(function(){
             event.preventDefault();
             $.OpenDlg('/inventory/stock/report/preclose/','期结记录列表：',1000,700);
        });


        var table;      

        function refreshTable(){  
            $.ajax({
                type:'GET',
                processData: false,  
                contentType: 'application/json; charset=utf-8',
                url:'/inventory/ajax/stock/report/development/?year='+$('#year').val()+'&month='+$('#month').val(),
                success:function(data){  
                    if(data.e){
                        toastr.error(data.e, "操作错误：",
                            {timeOut: 800, positionClass: "toast-center-center"}
                        );
                        return;
                    };
                    var hd='',ft='';
                    for (i in data.clmns){
                        hd=hd+"<th>"+data.clmns[i]+"</th>";
                        ft=ft+"<th><input type='text' placeholder='"+data.clmns[i]+"'  /></th>";
                    };
                    $('#tb thead').html('<tr>'+hd+'</tr>');
                    $('#tb tfoot').html('<tr>'+ft+'</tr>');
                    table=$('#tb').DataTable({                        
                        data:data.data,
                        dom: 'Bfrtip',
                        autoWidth:true,
                        destroy: true,
                        pageLength: 10,
                        buttons: [{extend:'excelHtml5',text: '导出到Excel'}],   
                        language:lng                          
                    });

                    table.columns().every( function () {                        
                        var that = this;             
                        $('input', this.footer() ).on( 'keyup change clear', function () {
                            if ( that.search() !== this.value ) {
                                that.search( this.value ).draw();
                            }
                        });
                    });  
                }
            });        
        };

    });
</script>

<form role="form"  class="form-inline" style="margin-top:35px;">
    <div class="col-sm-4 input-group">
        {% trans "会计期："%} 
        <div class="col-sm-2 input-group">       
            <select  class="form-control" id="year" style='width:120px;'>
            {% for y in years %}
                <option value='{{y}}'>{{y}}</option>
            {% endfor %}
            </select>
            <span class="input-group-addon">{% trans "年" %}</span>
        </div>
        <div class="col-sm-2 input-group">       
            <select  class="form-control" id="month" style='width:80px;'></select>        
            <span class="input-group-addon">{% trans "月" %}</span>
            
            <span class='input-group-btn' style='padding-left:10px;'>
                <a type="button" class='btn btn-primary btn-qry'>
                    <span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>{% trans '查看' %}
                </a>
            </span>
        </div>           
    </div>
    

    <div class='col-sm-2 col-md-offset-5 input-group'>
        <span>
            {% trans '期结:' %}
            {% if last_period.year %}
                {% trans '已期结至' %}{{last_period.year}}{% trans '年' %}{{last_period.month}}{% trans '月' %}
            {% else %}
                {% trans '末做任何期结' %}
            {% endif %}
        </span>
        {% if show_close %}
            <a type="button" class='btn btn-close btn-primary'>
                {% trans '期结' %}
            </a>        
        {% endif %}
    </div>

</form>
<div class="clearfix"></div>
<div id="inventory-list" class="table-responsive">
    <div class='x_panel'>
    <table id="tb" class="table table-striped table-bordered" width="100%" > 
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>    
    </div>
</div>
