{% load i18n %}


<style> 

</style>



<script type="text/javascript">
    $(document).ready(function(){  
        $('#customer_label').autocomplete({   
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/company/',
                    dataType: "json",
                    data: {
                        term:       $("#customer_label").val() ,//搜索栏里的内容
                        level_id:   1 ,                         //额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },            
            select: function (event, ui) {
                $("#customer_id").val(ui.item.value);
                $("#customer_label").val(ui.item.label);
                return false;
            }
        });
        
        $('.select2_multiple').on('dblclick','option',function(){
            $(this).remove();
        });


        $('.add-customer').click(function(){
            var id=$('#customer_id').val();
            var label=$('#customer_label').val();
            if(id==''){
                toastr.error("请先选择企业！", "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;
            }else{
                var e=false;
                $("#sel-customers option").each(function(){
                    if($(this).val() == id){
                        e=true;
                        return false;          
                    }
                });
                if(e){
                    toastr.error(label+"已在列表中！", "操作错误：",
                        {timeOut: 800, positionClass: "toast-center-center"}
                    );
                    return;
                }else{
                    $('#sel-customers').append("<option value='"+id+"'>"+label+"</option>");
                }
            };
        });

        $('.btn-save').click(function(){
            var cid=$('#sel-company').val();
            a=[];
            $("#sel-customers option").each(function (){
                a.push({
                    "id":   $(this).val(),
                    "name": $(this).text()
                });
            });  
            
            if ($.isEmpty(cid)){
                toastr.error(label+"请先选择瓶盖厂！", "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;                
            }else{
                $.ajax({
                    type: 'post',
                    data:JSON.stringify({
                        "company_id":cid,
                        "customers":a
                    }), 
                    url: '/bottlecap/factory/post/',    
                    success: function(data) {
                         toastr.success("数据已保存", "成功：",
                            {timeOut: 800, positionClass: "toast-center-center"}
                        );
                        return;                                               
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert('连接服务器失败');                        
                    }
                });
            };
        });

        $("#sel-company").change(function(){
            $('#sel-customers').empty();
            var cid=$(this).val();
            if(!$.isEmpty(cid)){
                $.ajax({
                    type: 'get',
                    contentType: 'application/json; charset=utf-8',
                    url: '/bottlecap/factory/get/?company_id='+cid,    
                    success: function(data) {                       
                        cs=data.customers;  
                        for (var i in cs){
                            $('#sel-customers').append(
                                '<option value="'+cs[i].id+'">'+cs[i].name+'</option>'
                            )
                        };                                               
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert('连接服务器失败');                        
                    }
                });
            };
        });



       
    });
</script>



<ol class="breadcrumb">
        <li>瓶盖码数据</li>
        <li>瓶盖厂信息</li>     
</ol>




<div class='clear-fix'></div>
<div >
         
   
        <div class="form-group" >
            <label class="col-sm-1 control-label ">工厂名称 </label>
            <div class="col-sm-11">
                <select class='form-control' id='sel-company'>
                    <option value=''>--------</option>
                    {% for f in factories %}
                        <option value='{{f.id}}'>{{f.name}}</option>
                    {% endfor %}                    
                </select>
            </div>
        </div>       
        

        <div class="form-group ">
            <label class="col-sm-1 control-label ">服务企业</label>
            <div class='col-sm-11'>
                <div class="input-group">
                    <input  class='form-control' id="customer_label"  placeholder='请输入要添加的企业名称'/>
                    <input type="hidden" id="customer_id" />
                    <span class="input-group-btn"><button type="button" class="btn btn-success add-customer">
                    <span class='glyphicon glyphicon-arrow-down'></span></button></span>   

                </div>
            </div>
        </div>

        <div class="form-group" >
            <div class='col-sm-11 col-md-offset-1'>
                <select class="select2_multiple form-control" id="sel-customers" multiple="multiple">                                                
                </select>        
            </div>
        </div>  

      
       

    
</div>

<div>
    <button class='btn btn-primary pull-right btn-save' style="margin-top:10px;">保存</button>
</div>
