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

  
    <style>            
       
    </style>

    {% block js %}
        {{ block.super }}       

        $('#user_label').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/user/',
                    dataType: "json",
                    data: {
                        term:   $("#user_label").val() ,//搜索栏里的内容
                        company_id:  $('#id_company').val() ,//额外参数
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#id_user").val(ui.item.value);
                $("#user_label").val(ui.item.label);
                $('#user_name').text(ui.item.user_name);
                $('#user_group').text(ui.item.groups);
                return false;
            }
        }); 

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

        {% if form.instance.id %}
            $('#user_label').val('{{form.instance.user.username}}');
            $('#id_user').val('{{form.instance.user.id}}');     
            $('#user_name').text('{{form.instance.user.last_name}}');;
            var a=[];
            {% for g in form.instance.user.groups.all %}                
                a.push('{{g.name}}');
            {% endfor %};   
            if(a.length>0){
                $('#user_group').text(a.join(','));            
            };
        {% endif %}  

        $('.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(){    
            event.preventDefault();   
            var a=[];
            a=[];
            $("#sel-agent option").each(function (){
                a.push($(this).val());
            });  
            if(a.length>0){
                $('#id_agent_ids').val(a.join(','));
            }else{
                $('#id_agent_ids').val('');
            };       
            $.SubmitForm('#obj_form form','{{request.path}}');
        });       

        $('.btn-delete').click(function(){    
            event.preventDefault();  
            $.ajax({
                url: "/company/edit/user_with_agents/{{form.instance.id}}/delete/",
                type: 'POST',
                headers:{'X-CSRFToken': $('input[name="csrfmiddlewaretoken"]').val()},                
                success:function(data){
                    jQuery.RefreshContent('/company/list/user_with_agents/');
                }
            });
        });

    {% endblock %}


    {% block subtitle-1 %}
        {% trans "公司管理" %}
    {% endblock %}
    {% block subtitle-2 %}
        {% trans "人员与经销商" %}
    {% endblock %}

    <span style="margin-left:10px; color:green; ">
        {% block subtitle-3 %}
            {% if form.instance.id %}
                {% trans "修改" %}
            {% else %}
                {% trans "新建" %}
            {% endif %}
        {% endblock %}

    </span>



{% block form_content %}
    {{ block.super }}    
 
    <input type="hidden" id="id_user" name="user"/>
    <input type="hidden" id="id_company" name="company" value="{{request.user.ancestor_id}}"/>
    <input type="hidden" id="id_agent_ids" name="agent_ids"/>
   
    <div class="form-group ">      
        <label class="col-sm-1 control-label ">{% trans "用户帐号" %} </label>
        <div class="col-sm-11">
            <input id='user_label' />
        </div>        
    </div>
    <div class="form-group ">      
        <label class="col-sm-1 control-label "> </label>
        <div class="col-sm-11">
            {% trans "用户姓名：" %}<span id='user_name'></span>
            <span   style='margin-left:50px;'>{% trans "功能组别：" %}</span><span id='user_group'></span>            
        </div>        
    </div>


    <div class="form-group">
        <label class="col-sm-1">{% trans "负责经销商" %}</label>
        <div class='col-sm-6 mrgnbttm0'>
            <div class="input-group">
                <input type="text" class="form-control" id="agent_label">
                <input type="hidden" id="agent_id" />
                <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" >  
        <div class='col-sm-6 col-md-offset-1'  style="top:-20px;">
            <select class="select2_multiple form-control" id='sel-agent' multiple="multiple" style="height: 200px;">
                {% for o in agents %}
                    <option value='{{o.0}}'>{{o.1}}</option>
                {% endfor %}                                    
            </select>        
        </div>        
    </div>    

    <div>
        {% if form.instance.id %}
            <button class="btn btn-danger btn-delete"    >{% trans '删除' %}</button>
        {% endif %}

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

{% endblock %}
