{% 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 () {
        {% if form.instance.id %}
            $('#company_label').val('{{form.instance.company.name}}');
        {% endif %}




        $('#agent_label').autocomplete({   
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/agent/',
                    dataType: "json",
                    data: {
                        term:   $("#agent_label").val() ,//搜索栏里的内容
                        company_id:  $('#id_company').val() ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },            
            select: function (event, ui) {
                $("#agent_id").val(ui.item.value);
                $("#agent_label").val(ui.item.label);
                return false;
            }
        });
        $('#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>");
                }
            };
        });
        $('.add-agent').click(function(){
            var id=$('#agent_id').val();
            var label=$('#agent_label').val();
            if(id==''){
                toastr.error("请先选择经销商！", "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;
            }else{
                var e=false;
                $("#sel-agent 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-agent').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('');
            };
            a=[];
            $("#sel-agent option").each(function (){
                a.push({'id':$(this).val(),'name':$(this).text()});
            });  
            if(a.length>0){
                $('#id_agents').val(JSON.stringify(a));
            }else{
                $('#id_agents').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 ">
    <label class="col-sm-2 control-label ">所属企业</label>
    <div class="col-sm-10">{{ form.company }}
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">第三方单位</label>
    <div class="col-sm-10">{{ form.vendor }}</div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">代码</label>
    <div class="col-sm-10">{{ form.code }}</div>
</div>
<div class="form-group ">
    <label class="col-sm-2 control-label ">扫码跳转链接</label>
    <div class="col-sm-4">{{ form.redirect }}</div>

    <label class="col-sm-2 control-label ">是否已上线</label>
    <div class="col-sm-1">{{ form.is_active }}</div>
    <label class="col-sm-2 control-label ">需同步物流数据</label>
    <div class="col-sm-1">{{ form.synclogistics }}</div>    
</div>

<div class="form-group ">
    <label class="col-sm-2 control-label ">限定产品</label>
    <input type='hidden' id='product_id' />
    <div class="col-sm-4">
        <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>
    <label class="col-sm-2 control-label ">限定经销商</label>    
    <div class="col-sm-4">
        <div class="input-group">  
            <input type='hidden' id='agent_id' />
            <input id='agent_label' class='form-control' />
            <span class="input-group-btn"><button type="button" class="btn btn-success add-agent">
                <span class='glyphicon glyphicon-arrow-down'></span></button></span>
        </div>
    </div>
</div>
<div class="form-group" style='margin-top:-28px;'>
    <div class='col-sm-4 col-md-offset-2'>
        <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 class='col-sm-4 col-md-offset-2'>
        <select class="select2_multiple form-control" id='sel-agent' multiple="multiple">
            {% for o in form.instance.agents %}
                <option value='{{o.id}}'>{{o.name}}</option>
            {% endfor %} 
                                  
        </select>       
        {{form.agents}}
    </div>
</div>





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