{% extends 'obj_form.html' %}
{% load i18n %}


{% block subtitle %}
<ol class="breadcrumb">
        <li>{% trans '产品管理' %}</li>
        <li>{% trans '特例产品' %}</li>
</ol>
{% endblock %}

{% block form_content %}
<script>

    $(document).ready(function () {           


        
        $('#product_label').autocomplete({   
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/product/',
                    dataType: "json",
                    data: {
                        term:   $("#product_label").val() ,//搜索栏里的内容
                        company_id:  $('#id_company').val() ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },            
            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() ,//搜索栏里的内容
                        //company_id:  $('#id_company').val() ,//额外参数
                        //level_id:1
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },            
            select: function (event, ui) {
                $("#id_company").val(ui.item.value);
                $("#company_label").val(ui.item.label);
                return false;
            }
        });
        */



        $('.add-product').click(function(){
            var id=$('#product_id').val();
            var label=$('#product_label').val();
            if(id==''){
                toastr.error("请先选择产品！", "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;
            }else{
                var e=false;
                $("#sel-product 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-product').append("<option value='"+id+"'>"+label+"</option>");
                }
            };
        });
       
        $('.select2_multiple').on('dblclick','option',function(){
            $(this).remove();
        });


        $('.btn-save').click(function () {
            
            var a=[];
            $("#sel-product option").each(function (){
                a.push({'id':$(this).val(),'name':$(this).text()});
            });  
            if(a.length>0){
                $('#id_products').val(JSON.stringify(a));
            }else{
                $('#id_products').val('');
            };                   

            $.SubmitForm('#obj_form form', '{{request.path}}',function (){
                $('.alert').fadeIn();
            });

        });
    })

</script>
<div class="alert alert-success" role="alert" style="display: none">保存成功！</div>


<div class="form-group ">    
    以下产品不做套标绑定检查    
</div>



<input type='hidden' name='company' value="{{request.user.company_id}}"/>  
<input type='hidden' name='category_id' value="{{form.instance.category_id}}"/>  


<div class="form-group ">
    <label class="col-sm-1 control-label ">产品名称</label>
    <input type='hidden' id='product_id' />
    <div class="col-sm-11">
        <div class="input-group">  
            <input type='hidden' id='product_id' />
            <input id='product_label' class='form-control' />
            <span class="input-group-btn"><button type="button" class="btn btn-success add-product">
                <span class='glyphicon glyphicon-arrow-down'></span></button></span>
        </div>
    </div>
    
</div>
<div class="form-group" style='margin-top:-28px;'>    
    <div class='col-sm-11 col-md-offset-1'>
        <select class="select2_multiple form-control" id="sel-product" multiple="multiple">
            {% for o in form.instance.products %}
                <option value='{{o.id}}'>{{o.name}}</option>
            {% endfor %}                                     
        </select>    
        {{form.products}}
    </div>    
</div>





<div>
    <a class="btn btn-primary btn-save" type="button" style="float:right;">保存</a>
</div>
{% endblock %}
