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





    {% block js %}
        {{ block.super }}
        $('.btn-save').click(function(){

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


        });


        $('.datepicker').datepicker({dateFormat: 'yy-mm-dd'});        
        setDatePickerZh();
       
        $("#agent_label").val('{{form.instance.agent.name}}'); 

        function verificationPicFile(file) {
            var fileSize = 0;
            var fileMaxSize = 1024;//1M
            var filePath = file.value;
            if(filePath){
                fileSize =file.files[0].size;
                var size = fileSize / 1024;
                if (size > fileMaxSize) {
                    alert("文件大小不能大于1M！");
                    file.value = "";
                    return false;
                }else if (size <= 0) {
                    alert("文件大小不能为0M！");
                    file.value = "";
                    return false;
                }
            }else{
                return false;
            }
        };     
        



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


        //$('#tb td.img a').click(function(){
        //    var div="<div style='zindex:100;'></div>"
        //});


        $('#tb td.img a').attr('target','_blank');

        $('#tb td.img a').hover(
            function(){ 
                $('#div_img img').attr('src',$(this).attr('href'));
                if($(window).width()<480){
                    $('#div_img')
                        .css({
                            //'left':'42px',
                            'left':($(window).width()-270)/2+'px',
                            'top':'146px'})
                        .show();                          
                }else{
                    $('#div_img')
                        .css({
                            'left':($(window).width()-270)/2+'px',
                            'top':($(window).height()-300)/2+'px'})
                        .show();
                }
            },
            function(){
                $('#div_img').hide();
            }
        );



        $('.btn-add-attach').click(function(){           
            var prefix='#id_rebateinvoiceattach_set-';              
            var count = $('#tb tbody tr').length; 
            var tmplMarkup = '<tr class="p">'+$(prefix+'__prefix__').html()+'</tr>';    
            var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);     
            $('#tb tbody').append(compiledTmpl);             
            $(prefix+'TOTAL_FORMS').attr('value', (count+1));   
        });
    
        $('#tb td.img input').removeClass('form-control');
        $('#tb td.img br').remove();

        {% if is_saved %}
            $.RefreshContent('/obj/list/rebateinvoice/');
        {% endif %}

    {% 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 }}    
    <style>
         #div_img{
            width:270px;
            height:270px;       
            z-index:100;    
            background:#FFF;
            border:solid 1px #BBBBBB;
            border-radius:5px;
            box-shadow:1px 1px 5px #999;          
            background-color:#F0FFF0;  
            position:absolute;          
        
        }
        #div_img div{
            width:258px;       
            height:258px;
            margin:5px;          
            border:1px solid #BBBBBB;
            border-radius:5px; 
            text-align:center;         
            overflow:hidden;    
            background-color:#FFF;   
    
        }

        #div_img img{
            max-width:270px;  
            margin-top:-10px;
            margin-left:-10px;

        }




    </style>


    <div id='div_img' style='display:none;'>
        <div>
            <img src='' ></img>
        </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-10">{{ form.numbers }}</div>
    </div>
    <div class="form-group ">
        <label class="col-sm-2 control-label ">报销人</label>
        <div class="col-sm-10">{{ form.claimant }}</div>
    </div>
    <div class="form-group ">
        <label class="col-sm-2 control-label ">开票日期</label>
        <div class="col-sm-10">{{ form.dt_billing }}</div>
    </div>
    <div class="form-group ">
        <label class="col-sm-2 control-label ">发票金额</label>
        <div class="col-sm-10">{{ form.amount }}</div>
    </div>
    <div class="form-group ">
        <label class="col-sm-2 control-label ">经销商</label>
        <div class="col-sm-10"><input class='form-control' id='agent_label' /></div>
    </div>    
    
    <div>


        <span><a type="button" class='btn btn-success btn-add-attach'>
                <span class='glyphicon glyphicon-arrow-down' style='padding-right:5px;'></span>{% trans '增加' %}
        </a></span>


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



{% block fmset %}  

    <table style="display:none;">
            <tr id="id_rebateinvoiceattach_set-__prefix__" >                
                {{formset.empty_form.id}}                           
                <td>{{formset.empty_form.DELETE }}</td>                   
                <td>{{formset.empty_form.title}}</td> 
                <td class='img'>{{formset.empty_form.img}}</td>           
               
            </tr>
        </table>

    <div class='table-responsive'>
        <table id='tb' class="table table-condensed table-bordered table-hover">
            <thead><tr>
                <th>{% trans '删除' %}</th>
                <th>{% trans '标题' %}</th>               
                <th>{% trans '发票图片' %}</th>                  
            </tr></thead>
            <tbody>
                {% for f in formset %}
                <tr  class='p'>
                    {{f.id}}                    
                    <td>{{f.DELETE}}</td>                         
                    <td>{{ f.title }}</td>                    
                    <td class='img'>{{ f.img}}</td>   
                   
                </tr>
                {% endfor %}
            </tbody>
            {{ formset.management_form }}                
        </table>
    </div>
{% endblock %}
