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

  
    <style>            
       
    </style>

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

        //目前先只考虑指定大区
        {% ifequal request.user.company.id 1644 %}
            $('#subsaldiv_id,.add-subsaldiv,#agent_label,.add-agent').attr('disabled',true);
        {% else %}
        {% endifequal %}
        $('#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;
            }
        });      
       
        $('#saldiv_id').change(function(){
            var saldiv_id=$(this).val();      
            if (saldiv_id==''){
                $('#subsaldiv_id').empty();
                $('#subsaldiv_id').append('<option value="">所有片区</option>')
            }else{
                get_subdivs(saldiv_id);
            }
        });
        function get_subdivs(saldiv_id){
            var me=$('#subsaldiv_id');
            $.ajax({
                url: "/obj/ajax/subsaldiv/"+saldiv_id+"/",
                success: function(data) {
                    $(me).empty();
                    $.each(data,function(i,d){$(me).append("<option value='"+d[0]+"'>"+d[1]+"</option>")});                   
                },
                dataType: 'json'               
            });  
        };        

        $('#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}}');
            $('#user_id').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-saldiv').click(function(){
            var id=$('#saldiv_id').val();            
            var label= $('#saldiv_id').find("option:selected").text();
            if(id==''){
                toastr.error("请先选择营销战区！", "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;
            }else{
                var e=false;
                $("#sel-saldiv 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-saldiv').append("<option value='"+id+"'>"+label+"</option>");
                }
            };
        });
        $('.add-subsaldiv').click(function(){
            var id=$('#subsaldiv_id').val();
            var label=$('#subsaldiv_id').find("option:selected").text();

            if(id==''){
                toastr.error("请先选择营销片区！", "操作错误：",
                    {timeOut: 800, positionClass: "toast-center-center"}
                );
                return;
            }else{
                var e=false;
                $("#sel-subsaldiv 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-subsaldiv').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(){    
            event.preventDefault();   
            var a=[];
            $("#sel-saldiv option").each(function (){
                a.push($(this).val());
            });  
            if(a.length>0){
                $('#id_saldiv_ids').val(a.join(','));
            }else{
                $('#id_saldiv_ids').val('');    
            };
            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('');
            };
            a=[];
            $("#sel-subsaldiv option").each(function (){
                a.push($(this).val());
            });  
            if(a.length>0){
                $('#id_subsaldiv_ids').val(a.join(','));
            }else{
                $('#id_subsaldiv_ids').val('');
            };            
            $.SubmitForm('#obj_form form','{{request.path}}');
        });       

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

    {% 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 }}    
 
   
    <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 control-label">{% trans "负责战区" %}</label>
        <div class='col-sm-3 mrgnbttm0'>
            <div class="input-group">                
                <select  id="saldiv_id">
                    <option valuue=''>所有战区</option>
                    {% for d in sel_saldivs %}
                        <option value='{{d.0}}'>{{d.1}}</option>
                    {% endfor %}
                </select>   
                <span class="input-group-btn"><button type="button" class="btn btn-success add-saldiv">
                <span class='glyphicon glyphicon-arrow-down'></span></button></span>
            </div>        
        </div>  
        <label class="col-sm-1 control-label">{% trans "负责分区" %}</label>
        <div class='col-sm-3'>
            <div class="input-group">                
                <select  id="subsaldiv_id"><option>所有分区</option></select>                
                <span class="input-group-btn"><button type="button" class="btn btn-success add-subsaldiv">
                <span class='glyphicon glyphicon-arrow-down'></span></button></span>

            </div>        
        </div>  
        <label class="col-sm-1">{% trans "负责经销商" %}</label>
        <div class='col-sm-3 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-3 col-md-offset-1' style="top:-20px;">
            <select class="select2_multiple form-control" id="sel-saldiv" multiple="multiple">
                {% for o in saldivs %}
                    <option value='{{o.0}}'>{{o.1}}</option>
                {% endfor %}                                     
            </select>        
        </div>
        <div class='col-sm-3 col-md-offset-1'  style="top:-20px;">
            <select class="select2_multiple form-control" id="sel-subsaldiv" multiple="multiple">
                {% for o in subsaldivs %}
                    <option value='{{o.0}}'>{{o.1}}</option>
                {% endfor %}                       
            </select>        
        </div>       
        <div class='col-sm-3 col-md-offset-1'  style="top:-20px;">
            <select class="select2_multiple form-control" id='sel-agent' multiple="multiple">
                {% 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 %}
