<style>
    .div-tb{
        margin-top:20px;
        height:150px;
        font-size:16px;
        color:black;
    }
    .div-tb table{
        width:100%;
    }
    .div-tb table td{
        height:50px;
    }

    .div-tb td img{
        height:100px;
    }
    
    #print-area .div-tb table tbody td{
        border: 1px solid black;            
    } 

    

    #pg-title .tt{
        color:black;
        font-weight:bold;
        font-size:20px;
        padding-right:20px;
    }


</style>

<script type="text/JavaScript" src="/static/js/jquery-print.min.js"></script>
<link rel="stylesheet" href="/static/css/print/inventorytickets.css" media="print">

<script type="text/javascript">    
    $(document).ready(function(){
    
        $('.btn-print').click(function(){
            $("#print-area").print({
        	    globalStyles: false,
        	    mediaPrint: true,
        	    stylesheet: null,
        	    noPrintSelector: ".no-print",
        	    iframe: true,
        	    append: null,
        	    prepend: null,
        	    manuallyCopyFormValues: true,
        	    deferred: $.Deferred(),
        	    timeout: 750,
        	    title: null,
        	    doctype: '<!doctype html>'
	        });            
        });
    });
</script>

<ol class="breadcrumb">        
    <li>物流工具</li>
    <li>销售启票</li>          
</ol>
<div id='pg-title' style="display:flex;">
    <span class='tt'>销售启票打印列表</span>
    <span class='input-group-btn'>
        <a type="button" class='btn btn-primary btn-print'>
            <span class='glyphicon glyphicon-print' style='padding-right:5px;'>
        </span>打印</a>
    </span>
</div>

<div id='print-area'>
    {% for t in tickets %}
    <div class='div-tb'>
        <div>
            <span class='tt' style='font-size:20px;margin-right:20px;'>销售启票</span>
            <span class='dt'>录入日期：{{t.date}}</span>
            <span class='tm pull-right'>打印时间：{{time}}</span>
        </div>
        <table class="table" style='border-collapse: collapse;'>            
            <tbody>
                <tr>
                    <td style='width:30%;'>经销商</td>
                    <td style='width:20%;'>产品</td>
                    <td style='width:10%;'>数量</td>
                    <td style='width:15%;'>仓库</td>
                    <td style='width:10%;'>订单号</td>
                    <td style='width:8%' rowspan=2><img src="/media/{{user.company.name}}/inventorytickets/{{t.id}}.png"></img></td>
                </tr>
                <tr>
                    <td>{{t.agent}}</td>
                    <td>{{t.product}}</td>
                    <td>{{t.qty}}</td>
                    <td>{{t.store}}</td>
                    <td>{{t.order_sn}}</td>                
                </tr>
            </tbody>
        </table>
    </div>
    {% endfor %}
</div>
