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

{% block css %}
    {{ block.super }}
    #obj_form .datepicker{
        width:100px
    }
    #obj_form select.adm{
        min-width:100px;
        margin-left:5px;
    }
    #product_label{
        min-width:380px;
        margin-left:15px;
        margin-right:7px;
    }
    #obj_form .btn-del{
        float:right;
    }  

    #obj_form .checkbox { 
        padding-left:20px;
    }
    #obj_form .select2_multiple{
        max-height:80px;
    }

{% endblock %}



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


    {% if is_saved %}
        $('#tb_outlet .btn-location').unbind('click');
        $.RefreshContent('/obj/list/agent/');  
    {% endif %}



    $.ajax({
        url: "/gis/adm/1/",
        success: function(data) { 
            var provinces="<option value=''>---------------</option>";
            $.each(data,function(i,d){
                provinces=provinces+"<option value='"+d[0]+"'>"+d[1]+"</option>";
            });
            $('#obj_form select.province').html(provinces);
            $('#tb_outlet tbody tr').each(function(){    
                var me=$(this);
                var s,v;
                s=$(me).find('.province_gis').val();
                if (s!='{}'){
                    v=JSON.parse(s).id;
                    $(me).find('.province option[value="'+v+'"]').attr("selected",true);
                    $.ajax({
                        url: "/gis/adm/2/"+v+"/",
                        success: function(data) {
                            var html="<option value='' selected='selected'>---------</option>";
                            $.each(data,function(i,d){
                                html=html+"<option value='"+d[0]+"'>"+d[1]+"</option>";
                            });
                            $(me).find('.city').html(html);
                            s=$(me).find('.city_gis').val();
                            if (s!='{}'){
                                v=JSON.parse(s).id;
                                $(me).find('.city option[value="'+v+'"]').attr("selected",true);
                                $.ajax({
                                    url: "/gis/adm/3/"+v+"/",
                                    success: function(data) {
                                        var html="<option value='' selected='selected'>---------</option>";
                                        $.each(data,function(i,d){
                                            html=html+"<option value='"+d[0]+"'>"+d[1]+"</option>";
                                        });
                                        $(me).find('.county').html(html);
                                        s=$(me).find('.county_gis').val();
                                        if (s!='{}'){
                                            v=JSON.parse(s).id;
                                            $(me).find('.county option[value="'+v+'"]').attr("selected",true);
                                        }
                                    },
                                    dataType: 'jsonp',
                                    jsonp: 'callback'
                                });
                            }
                        },
                        dataType: 'jsonp',
                        jsonp: 'callback'
                    });
                };
            });
        },
        dataType: 'jsonp',
        jsonp: 'callback'
    });    

    $('#tb_outlet').on('change','.province',function(){
        var id=$(this).val();
        var tr=$(this).closest('tr');
        $.ajax({
            url: "/gis/adm/2/"+id+"/",
            success: function(data) {
                var html="<option value='' selected='selected'>---------</option>";               
                $.each(data,function(i,d){
                    html=html+"<option value='"+d[0]+"'>"+d[1]+"</option>";
                });
                $(tr).find('.city').html(html);
            },
            dataType: 'jsonp',
            jsonp: 'callback'
        }); 
    });
    $('#tb_outlet').on('change','.city',function(){
        var id=$(this).val();
        var tr=$(this).closest('tr');
        $.ajax({
            url: "/gis/adm/3/"+id+"/",
            success: function(data) {
                var html="<option value='' selected='selected'>---------</option>";               
                $.each(data,function(i,d){
                    html=html+"<option value='"+d[0]+"'>"+d[1]+"</option>";
                });
                $(tr).find('.county').html(html);
            },
            dataType: 'jsonp',
            jsonp: 'callback'
        }); 
    });

    $('.btn-add-outlet').click(function(){
        var prefix='#id_outlet_company-';             
        var count = $('#tb_outlet tbody tr').length; 
        var tmplMarkup = '<tr class="p">'+$(prefix+'__prefix__').html()+'</tr>';    
        var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);     
        $('#tb_outlet tbody').append(compiledTmpl);    
        $(prefix+'TOTAL_FORMS').attr('value', (count+1));

        $('#tb_outlet tbody tr:last').find('.btn-location').tooltip({
            title:'点击设置门店地理位置',
		    placement:'left',
		    animation:'true',
		    container:'#tb_outlet',
		    trigger:'hover'        
        });
    });

    $('.select2_multiple').on('dblclick','option',function(){
        $(this).remove();
    });  

    $('.add-status').click(function(){   
        var id=$("#status").val();
        var label=$("#status").find("option:selected").text();            
        var e=false;
        $("#sel-status 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-status').append("<option value='"+id+"'>"+label+"</option>");
        };              
    });
    $('.add-series').click(function(){   
        var id=$("#series").val();
        var label=$("#series").find("option:selected").text();            
        var e=false;
        $("#sel-series 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-series').append("<option value='"+id+"'>"+label+"</option>");
        };              
    });   
    
    $('.btn-save').click(function(){
        $('.btn').hide();        
        var a=[];
        $("#sel-status option").each(function (){ 
            a.push({
                'id':$(this).val(),
                'name':$(this).text()
            }); 
        });  
        if(a.length>0){
            $('#id_franchise_status').val(JSON.stringify(a));
        }else{
            $('#id_franchise_status').val('[]');
        };
        var a=[];
        $("#sel-series option").each(function (){ 
            a.push({
                'id':$(this).val(),
                'name':$(this).text()
            }); 
        });        
        if(a.length>0){
            $('#id_franchise_series').val(JSON.stringify(a));         
        }else{
            $('#id_franchise_series').val('');
        };

        $('#tb_outlet tbody tr').each(function(){    
            var me=$(this);
            var v,d;            
            v=$(me).find('.province').val();
            if (v!=''){
                d={
                    'id':v,
                    'name':$(me).find(".province option:selected").text()
                };
                $(me).find('.province_gis').val(JSON.stringify(d));
            };  
            v=$(me).find('.city').val();
            if (v!=''){
                d={
                    'id':v,
                    'name':$(me).find(".city option:selected").text()
                };
                $(me).find('.city_gis').val(JSON.stringify(d));
            };           
            v=$(me).find('.county').val();
            if (v!=''){
                d={
                    'id':v,
                    'name':$(me).find(".county option:selected").text()
                };
                $(me).find('.county_gis').val(JSON.stringify(d));
            };        
            if($(me).find('.name').val()==''){
                $(me).find('input[type="checkbox"]').prop('checked',true);
            };
        });   
        
        $.SubmitForm('#obj_form form','{{request.path}}');
    });

    $('#id_division').change(function(){
        var me=$('#id_sub_division');
        var d=$(this).val();
        $('#id_sub_division').empty();
        if (d!=''){
            $.ajax({
                url: "/company/json/subdivision/"+d+"/",
                success: function(data) {
                    data=data.details;
                    $.each(data,function(i,d){$(me).append("<option value='"+d[0]+"'>"+d[1]+"</option>")});
                    $(me).append("<option value='' selected='selected'>---------</option>");
                }
            });
        }
    });    




    $('#obj_form .select2_multiple option').tooltip({
		title:'双击删除',
		placement:'left',
		animation:'true',
		container:'#obj_form',
		trigger:'hover'
	});

    $('#obj_form .btn-location').tooltip({
        title:'点击设置门店地理位置',
		placement:'left',
		animation:'true',
		container:'#tb_outlet',
		trigger:'hover'        
    });







    
    //2020-11-24
    $('#data-content .btn-delete').click(function(){
        $.ajax({
            url:'/obj/delete/agent/{{form.instance.id}}/',                             
            success: function(data) {
                if(data.cnt>0){  
                    toastr.success('当前经销商已删除!', '操作成功：',
                        {timeOut: 800, positionClass: "toast-center-center"}
                    );
                    $.RefreshContent("/obj/list/agent/");                   
                };
            },

        });       
    
    });




    




    $('#tb_outlet').on('click','.btn-location',function(){ 
        event.preventDefault(); 
        var tr=$(this).closest('tr');
        var gis_city_id=$(tr).find('.city').val();
        var name=$(tr).find('.name').val();
        var series_name=$(tr).find('.series option:selected').text(); 
        var obj_id=$(tr).find("input[id$='-id']").val(); 
        if($.isEmpty(gis_city_id) || $.isEmpty(name) || $.isEmpty(series_name)){
            toastr.error("请先设置门店名称和所在城市及授权品牌！", "操作错误：",
                {timeOut: 800, positionClass: "toast-center-center"}
            );
            return;            
        }else{            
            var url='/company/franchise/outlet/';                
            url=url+"?lng_lat="+$(tr).find('.lng_lat').val()+
                "&el_id="+$(tr).find('.lng_lat').attr('id')+
                "&gis_city_id="+gis_city_id+
                "&outlet_name="+name+
                "&obj_id="+obj_id; 
       
        $.OpenUrlCfmDlg(url,name+" ["+series_name+"] 地理位置：","保存","取消");
        }
    }); 









   
{% endblock %}

 
{% block subtitle-1 %}
    {% trans '经销商管理' %}
{% endblock %}
{% block subtitle-2 %}
    {% trans '加盟商信息' %}
{% endblock %}       


{% block form_content %}
    {{ block.super }}    
    <div class="form-group ">
        <label class="col-sm-1 control-label ">{% trans '外部编码:' %}</label>
        <div class="col-sm-5">{{ form.external_code }}</div>        

        <label class="col-sm-1 control-label ">{% trans '归属部门:' %} </label>
        <div class="col-sm-5">{{ form.sub_division }}</div>
    </div>
    <div class="form-group ">
        <label class="col-sm-1 control-label ">{% trans '加盟商名:' %} </label>
        <div class="col-sm-5">{{ form.name }}</div>  
        
        <label class="col-sm-1 control-label">{% trans '联系电话:' %}</label>
        <div class="col-sm-5">{{ form.cell_phone }} </div>
    </div>

    <div class="form-group">
        <label class="col-sm-1 control-label ">{% trans '备注说明:' %} </label>
        <div class="col-sm-11">{{ form.remark }}</div>
    </div>


    <div class="form-group">
        <label class="col-sm-1 control-label ">{% trans '加盟状态:' %} </label>
        <div class="col-sm-5">
            <div class="input-group">
            <select id='status'>
            {% for s in company.franchisestatus_company.all %}
                <option value='{{s.id}}'>{{s.name}}</option>
            {% endfor %}
            </select><span class="input-group-btn"><button type="button" class="btn btn-success add-status">
                <span class='glyphicon glyphicon-arrow-down'></span></button></span>
            </div>           
        </div>
        <label class="col-sm-1 control-label ">{% trans '授权品牌:' %} </label>
        <div class="col-sm-5">
            <div class="input-group"> 
            <select id='series'>
            {% for s in company.series_company.all %}
                <option value='{{s.id}}'>{{s.name}}</option>
            {% endfor %}
            </select><span class="input-group-btn"><button type="button" class="btn btn-success add-series">
                <span class='glyphicon glyphicon-arrow-down'></span></button></span>
            </div>           
        </div>    
    </div>        

    <div class="form-group" style='margin-top:-56px;'>
        <div class='col-sm-5 col-md-offset-1'>
            <select class="select2_multiple form-control" id="sel-status" multiple="multiple" style="max-height:78px;">
                {% for o in form.instance.franchise_status %}
                    <option value='{{o.id}}'>{{o.name}}</option>
                {% endfor %}                                     
            </select>        
        </div>
        <div class='col-sm-5 col-md-offset-1'>
            <select class="select2_multiple form-control" id='sel-series'  multiple="multiple"  style="max-height:78px;">
                {% for o in form.instance.franchise_series %}
                    <option value='{{o.id}}'>{{o.name}}</option>
                {% endfor %}                                     
            </select>        
        </div>
    </div>  
    <table style="display:none;">
        <tr id="id_outlet_company-__prefix__">                
            {{empty_form.id}}                         
            <td>{{empty_form.DELETE }}</td>   
            <td>{{empty_form.name}}</td> 
            <td>{{empty_form.province_gis}}<select class='province' /></td>
            <td>{{empty_form.city_gis}}<select class='city' /></td> 
            <td>{{empty_form.county_gis}}<select class='county' /></td>
            <td><div class="input-group">{{empty_form.address}}{{empty_form.lng_lat}}
                <span class="input-group-btn"><a class='btn btn-success btn-location'>
                    <span class='glyphicon glyphicon-map-marker'></span></a></span>                  
            </div></td>
            <td>{{empty_form.series}}</td>
            <td>{{empty_form.status}}</td>
            <td>{{empty_form.remark}}</td>
        </tr>
    </table>
    <div  class="form-group">
        <label class='control-label'>加盟商门店信息：</label>
        <a type="button" class='btn btn-success btn-xs btn-add-outlet'>
            <span class='glyphicon glyphicon-plus' style='padding-right:5px;'></span>
            {% trans '添加门店' %}
        </a>       
        <a type="button" class='btn btn-primary btn-save' style="float:right;">
            <span class='glyphicon glyphicon-floppy-disk' style='padding-right:5px;'></span>{% trans '保存' %}
        </a>
    </div>
    <div class='table-responsive'>
        <table id='tb_outlet' class="table table-condensed table-bordered table-hover">
            <thead><tr>
                <th style='width:30px;padding-left:0px;padding-right:0px;'>{% trans '删除' %}</th>
                <th>{% trans '分店名称 ' %}</th>
                <th style='width:100px;'>{% trans '省份' %}</th>
                <th style='width:100px;'>{% trans '城市' %}</th>
                <th style='width:100px;'>{% trans '区/县' %}</th>
                <th>{% trans '详细地址' %}</th>
                <th style='width:80px;'>{% trans '授权品牌' %}</th>     
                <th style='width:100px;'>{% trans '门店状态' %}</th>  
                <th>{% trans '特殊情况' %}</th>  
            </tr></thead>
            <tbody>{% for f in formset %}<tr>
                <td>{{f.DELETE}}{{f.id}}</td> 
                <td>{{f.name}}</td>
                <td>{{f.province_gis}}<select class='province' /></td>
                <td>{{f.city_gis}}<select class='city' /></td>
                <td>{{f.county_gis}}<select class='county' /></td>
                <td><div class="input-group">{{f.address}}{{f.lng_lat}}
                    <span class="input-group-btn"><a class='btn btn-success btn-location'>
                        <span class='glyphicon glyphicon-map-marker'></span></a></span>                  
                </div></td>
                <td>{{f.series}}</td>
                <td>{{f.status}}</td>
                <td>{{f.remark}}</td>
            </tr>{% endfor %}</tbody>
            {{ formset.management_form }}  
        </table>
    </div>
{% endblock %}


