{% load i18n %}


<style>
    #tb tbody .r{
        font-weight:bold;
        color:red;
    }
    tbody tr.row_selected{
        color:black;
        background: -moz-linear-gradient(center top , #ff8e1f, #ff7217) repeat scroll 0 0 rgba(0, 0, 0, 0);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff8e1f), to(#ff7217));
    }
    #tb tfoot input{
        width:95%;
    }

    .ui-autocomplete{            
        z-index:99999;  
    }

</style>


<ol class="breadcrumb">
    <li>  {% trans "瓶盖码数据" %}</li> 
    <li> 绑瓶盖产品维护 </li> 
</ol>



<script type="text/javascript">
    $(document).ready(function(){    
        var tb;
        var clmns=[                 
            {'title':'id', 'data':'id'}, 
            {'title':'产品名称', 'data':'product'},  
            {'title':'企业名称', 'data':'company'},             
            {'title':'每箱瓶(盖)数', 'data':'cap_cnt'},  
            {'title':'添加时间', 'data':'tm'}, 
            {'title':'备注说明', 'data':'remark'},
        ];       

        $('#product_label').autocomplete({            
            source: function(request, response) {    
                $.ajax({
                    url: '/obj/ajax/autocomplete/product/',
                    dataType: "json",
                    data: {
                        term:   $("#product_label").val(),      //搜索栏里的内容
                        company_id:  $('#company_id').val(),    //额外参数
                    },
                    success: function(data) {
                        response(data);
                        return false;
                    }
                });
            },
            select: function (event, ui) {
                $("#product_id").val(ui.item.value);
                $("#product_label").val(ui.item.label);
                return false;
            }
        });
        
        $('#company_label').autocomplete({
            source: function(request, response) {                
                $.ajax({
                    url: '/obj/ajax/autocomplete/company/',
                    dataType: "json",
                    data: {
                        term:   $("#company_label").val()//搜索栏里的内容                        
                    },
                    success: function(data) {
                        response(data);
                        return false;
                    }
                });
                
            },
            select: function (event, ui) {
                $("#company_id").val(ui.item.value);
                $("#company_label").val(ui.item.label);
                return false;
            }
        });      


        
        function DataRefresh(){
            $.ajax({
                type:'GET',   
                url:"/mes/product/bind/productcap/list/",                
                dataType:'json',                
                success: function(d) {
                    if (d.e==''){
                        tb=$('#tb').DataTable({
                            dom: 'Bfrtip',
                            autoWidth: true,
                            pageLength: 10,
                            buttons: [{extend:'excelHtml5',text: '导出到Excel'}],   
                            language:lng,	
                            columns:clmns,			
                            data:d.data,  
                            destroy:true,                               
                            createdRow: function ( row, data, index) {      
                                $('td',row).eq(1).html('<a href="/mes/product/bind/productcap/edit/?id='+
                                    data.id+'" class="btn-edit">'+data.product+'</a>'
                                );
                            }                                
                        });   
                        var head='',foot='';
                        for (var i in clmns){                            
                            head=head+ '<th>'+clmns[i].title+'</th>';
                            foot=foot+ '<th><input type="text" placeholder="'+clmns[i].title+'"></th> ';                              
                        };
                        $('#tb thead').html('<tr>'+head+'</tr>');
                        $('#tb tfoot').html('<tr>'+foot+'</tr>');     

                        // 隐藏id
                        //('tb').column(0).visible(false);   
                            

                        
                        tb.columns().every( function () {                                
                            var that = this;             
                            $('input', this.footer() ).on( 'keyup change clear', function () {
                                if ( that.search() !== this.value ) {
                                    that.search( this.value ).draw();
                                }
                            });                          
                            
                        });
                        
                        
                        //tb.column(0).visible(false);                         
                        //$('#tb').column(0).visible(false);                             
                    }else{                        
                        toastr.error(
                            d.e,
                            "操作错误：",
                            {timeOut: 800, positionClass: "toast-center-center"}
                        );
                    }                    
                }
            });  
        }; 
        DataRefresh();    

        
         
        //添加
       $('#list').on("click",".btn-create",function(event){
            $('#dlg-edit').modal('show');
            //清空对modal内的数据
            $('#dlg-edit input').val('');
        });           
        

        //编辑修改
        $('#tb').on("click",".btn-edit",function(event){
            event.preventDefault();
            var url=$(this).attr('href');
            $.ajax({
                type:'GET',
                processData: false,               
                url:url,
                success:function(data){
                    $('#company_id').val(data.company_id);
                    $('#company_label').val(data.company_name);
                    $('#product_id').val(data.product_id);
                    $('#product_label').val(data.product_name);
                    $('#cap_cnt').val(data.cap_cnt);
                    $('#remark').val(data.remark);  
                    $('#dlg-edit').modal('show');
                    $('#rec_id').val(data.id);
                    return false;
                }
            });
        });   


        //保存编辑 
        $(".btn-save").click(function (event) {     
            event.preventDefault();
            var cid=$('#company_id').val(),pid=$('#product_id').val(),cap_cnt=$('#cap_cnt').val(),rmk=$('#remark').val();
            if(cid=='' || pid=='' || cap_cnt==''){            
                toastr.error('企业，产品，每箱盖码数不能为空', "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return false;
            };
            $.ajax({
                type:'POST',
                processData: false,
                url:'/mes/product/bind/productcap/edit/',
                data:JSON.stringify({
                    'company_id':cid,
                    'product_id':pid,
                    'cap_cnt':cap_cnt,
                    'remark':rmk,
                    'id':$('#rec_id').val()
                }),
                
                success:function(data){                    
                    if(data.e==''){
                        toastr.success('修改完成!', '操作成功：',
                            {timeOut: 800, positionClass: "toast-center-center"}
                        );
                        DataRefresh(); 

                    }else{
                        toastr.error(data.e, "操作错误：",
                            {timeOut: 800, positionClass: "toast-center-center"}
                        );
                    }                      
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {                                      
                    $('#dlg-edit').modal("hide");                    
                    alert('连接服务器失败');                        
                }
            });    
        });             


    });
</script>


<div class="clearfix"></div>
<div id="list" class="table-responsive">
    <div class='x_panel'>    
    <button class='pull-right btn btn-primary btn-create'>添加带瓶盖产品</button>
    <table id="tb" class="table table-striped table-bordered dt-responsive" width="100%" >
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>   
    </div>
</div>





<!--编辑修改明细对话框-->
<div class="modal fade bs-example-modal-lg" id='dlg-edit' tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="bgModalLabel">编辑修改：</h4>
            </div>
            
            <div class="modal-body"> 
                <form role="form"       class="form-horizontal"> 

                <input type='hidden' id='rec_id' />

                <div class="form-group ">
                    <label class="col-sm-2 control-label ">{% trans '企业名称:' %} </label>
                    <input type='hidden' id='company_id' />
                    <div class="col-sm-10"><input id="company_label" class="form-control"></div>
                </div>
                <div class="form-group ">
                    <label class="col-sm-2 control-label ">{% trans '产品名称:' %} </label>
                    <input type='hidden' id='product_id' />
                    <div class="col-sm-10"><input id="product_label"  class="form-control"></div>
                </div>
                <div class="form-group ">
                    <label class="col-sm-2 control-label ">{% trans '每箱瓶(盖)数:' %} </label>
                    <div class="col-sm-10"><input Type="Number" id="cap_cnt"  class="form-control"></div>
                </div>   
                <div class="form-group ">
                    <label class="col-sm-2 control-label ">{% trans '备注说明:' %} </label>
                    <div class="col-sm-10"><input id="remark"  class="form-control"></div>
                </div>   
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-save"  data-dismiss="modal">保存</button>  
                <button type="button" class="btn btn-default"  data-dismiss="modal">取消</button> 
            </div>
        </div>
    </div>
</div>


