{% load i18n %}


<style> 
    #tb .btn{
        margin-top:0px;
        margin-bottom:0px;
    }

    #tb .btn-generate{
        margin-left:5px;
    }

    #params label{
        padding-top:4px;
    }

</style>



<script type="text/javascript">
    $(document).ready(function(){

        $('.datepicker').datepicker({dateFormat: 'yy-mm-dd'});
        //$('.datepicker').datepicker('setDate',new Date());        
        setDatePickerZh();      

        //设置默认值
        $('#dt_inform').val('2024-01-01');
        $('#days').val('90');
        $('#percent').val('0');


        var table=$('#tb').DataTable({
            dom: 'Bfrtip',
            autoWidth: true,
            pageLength: 10,
            buttons: [{extend:'excelHtml5',text: '导出到Excel'}],   
            language:lng,	
            columns:{{clmns|safe}},			
            data:{{data|safe}}, 
        });    
    
        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();
                }
            });
        });    
        
        // 隐藏id
        $('#tb').DataTable().column(0).visible(false);
        
        function tbRefresh(){
            var dt_inform=$('#dt_inform').val();
            var days=$('#days').val();
            var percent=$('#percent').val();
            $.ajax({
                url:'/bottlecap/inform/postpone/?dt_inform='+dt_inform+'&days='+days+'&percent='+percent,
                success:function (data){
                    $('#tb').DataTable({
                        //"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        //"bLengthChange":true,
                        dom: 'Bfrtip',
                        autoWidth: false,
                        destroy:true,
                        buttons: [{extend:'excelHtml5',text:'导出到Excel'}],
                        language:lng,
                        data:data.data
                    });   
                    $('#tb').DataTable().column(0).visible(false);
                }
            })
        };

        tbRefresh();

        $('.btn-inform-qry').click(function(){
            tbRefresh();        
        });
        
            
    
           

        

    });


     /*
    dt_inform=request.GET.get('dt_inform','')
    interval=request.GET.get('interval','')
    percent=request.GET.get('percent','')    
    */

</script>



<ol class="breadcrumb">
        <li>瓶盖码数据</li>
        <li>上传迟延业务通知单列表</li>     
</ol>




<div class='clear-fix'></div>
   
   
       
<div class="x_panel">
    
    <div class="form-group" id='params' >

        <label class="col-sm-1 control-label">{% trans '业务通知单晚于:' %}</label> 
        <div class="col-sm-2">
            <input class="datepicker form-control" id="dt_inform" />
        </div>     


        <label class="col-sm-1 control-label">{% trans '瓶盖厂上传迟延:' %}</label> 
        <div class="col-sm-2">
            <select id='days' class='form-control'>
                <option value='30'>30天以上</option>
                <option value='60'>60天以上</option>
                <option value='90'>90天以上</option>
                <option value='120'>120天以上</option>
                <option value='150'>150天以上</option>
                <option value='180'>180天以上</option>                
            </select>        
        </div>
        <label class="col-sm-1 control-label">{% trans '上传百分比低于:' %}</label> 
        <div class="col-sm-2">
            <select id='percent' class='form-control'>
                <option value='0' >从未上传</option>
                <option value='10'>10%</option>                
                <option value='20'>20%</option>
                <option value='30'>30%</option>                
                <option value='40'>40%</option>
                <option value='50'>50%</option>                
                <option value='60'>60%</option>
                <option value='70'>70%</option>
            </select>
        </div>
    
        <div class="col-sm-1">
            <button class='btn btn-primary btn-inform-qry'>查询</button>
        </div>
    </div>

    <div class='clearfix'></div>
    <div  class="table-responsive">
    <table id='tb'  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
        <thead>
            {% for c in clmns %}
                <th>{{c.title}}</th>
            {% endfor %}
                
        </thead>
        <tbody></tbody>
        <tfoot>
            {% for c in clmns %}
                <th><input type="text" placeholder="{{c.title}}"></th>            
            {% endfor %}            
        </tfoot>
    </table>
    </div>

</div>
