{% load i18n %}
<style>

    .highlight {
        background-color: limegreen;
    }
</style>

 

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




        var table=$('#tb').DataTable({  
            dom: 'Bfrtip',
            autoWidth: true,
            pageLength: page_length,
            buttons: [{extend:'excelHtml5',text: '导出到Excel'}],
            language:lng,
            data:{{data|safe}}
        });
        table.on('draw', function () {
             var body = $(table.table().body());
                 body.unhighlight();
                 body.highlight(table.search());
             });

        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();
                }
            });
        });


        $('#data-content').on("click","a.btn-obj-add",function(){
            event.preventDefault();
            $.RefreshContent($(this).attr('href'));
        });
        $('#tb').on("click","td a",function(event){
            event.preventDefault();
            $.RefreshContent($(this).attr('href'));
        });


        $('#tb tbody').on('click','img',function(){
            var src=$(this).attr('src');
            var tt=$(this).closest('tr').find('a').text();
            if(tt==''){
                tt=$(this).attr('tt');
            };
            var i="<div style='text-align:center;'><img src='"+src+"' style='height:400px;'></img></div>";
            $.OpenCfmDlg(tt,i);
        });
 

        $('.btn-save').click(function (){
            var name = '经销商信息.xlsx'
            $('#tb').table2excel({
                filename:name,
                name:'Excel Name',
             })
        })

        $('#xFile').change(function () {
            var f = document.getElementById('xFile').files[0];
            var formData = new FormData();
            formData.append("file", f);
            $.ajax({
                url: "/company/list/",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) { 
                        $('#tb').dataTable().fnDestroy();
                        table = $('#tb').DataTable({
                            dom: 'Bfrtip',
                            autoWidth: true,
                            distory: true,
                            pageLength: 20,
                            buttons: [{extend: 'excelHtml5', text: '导出到Excel'}],
                            language: lng,
                            data: data.data
                        });
                        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>



<ol class="breadcrumb">
        <li>{% trans '基础信息' %}</li>
        <li>{% trans '经销商列表' %}</li>
</ol>

{% if add %}
    <div class="title_right">
        <div class="pull-right">
            <span class='input-group'>
                    <a type="button" class='btn btn-obj-add l-a create-btn' href='/obj/edit/agent/'>
                    <span class='glyphicon glyphicon-plus' style='padding-right:15px;'></span>{% trans '新建' %}</a>
            </span>
        </div> 
    </div>
{% endif %}

<div class="title_right">

        <div class="pull-right">
            <span class='input-group'>

                    <label type="button" for="xFile" class='btn btn-obj-add l-a create-btn'>
                    <span class='glyphicon glyphicon-plus' style='padding-right:5px;'>

                    </span>{% trans '从EXcel导入' %}</label>
            </span>
             <input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
        </div>

    </div>

{% if dt %}
    <form role="form"  class="form-inline" style="margin-top:0px;padding-left:10px;">
        <div class="col-sm-2 input-group">
            <span class="input-group-addon">{% trans "开始日期"%}</span>
            <input class="datepicker form-control" id="dt_fr" />
        </div>
        <div class="col-sm-2 input-group">
            <span class="input-group-addon">{% trans "结束日期"%}</span>
            <input class="datepicker form-control" id="dt_to" />
        </div>
        <div  class="col-sm-2 input-group">
            <span class='input-group-btn'>
                <a type="button" class='btn btn-primary btn-qry'>
                    <span class='glyphicon glyphicon-search' style='padding-right:5px;'></span>{% trans '查找' %}
                </a>
            </span>
        </div>
    </form>
    <div class="clearfix"></div>
{% endif %}




<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <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}}</th>
                {% endfor %}
            </thead>
            <tbody></tbody>
            <tfoot>
                {% for c in clmns %}
                    <th><input type="text" placeholder="{{c}}"></th>
                {% endfor %}
            </tfoot>
            </table>
        </div>
    </div>
</div>
