<style>
    .div-tb{
        margin-top:20px;
        
        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: true,
        	    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>


<div class="btn-print" style="width: 100px;line-height: 40px; text-align: center; float: right; background-color: blue;border-radius: 20px;color: white; cursor: pointer;">打印</div>
<div id='print-area'>
    {% for t in orders %}
    <div class='div-tb'>
        <div style='font-size:20px;margin-right:20px;text-align: center;'>蒙古王出库单</div>
        <div class="" style="display: flex;flex-direction: row; justify-content: space-between;align-items: center;">
            <div style="display: flex; flex-direction: row;align-items: center;">
              <img src="data:image/jpg;base64,{{t.img}}" style="width: 130px;"/>
              <span class='tt' style='font-size:20px;'>{{t.order_code}}</span>
            </div>
            <div class="" style="vertical-align: middle;">
              <p class='tt'>打印时间:{{t.tm_print}}</p>
              <p class=''>出库方：{{t.vendor_name}}</p>
            </div>
        </div>
        <div>
            <span>客户名称:{{t.agent_name}} {{t.agent_code}}
            </span>
            <span class='pull-right' style='min-width:200px;'>
                客户电话:{{t.agent_telephone}}
            </span>
        </div>
        <div>
            <span>客户地址:</span><span>{{t.agent_address}}</span>            
        </div>
        <div>
            <span>备注:</span><span>{{t.remark}}</span>            
        </div>

        <div class="clearfix"></div>
        <div class="table-responsive">
            <table class="table" style='border-collapse: collapse;'>    
            <thead><tr>
                <th>商品编码</th>
                <th>商品名称</th>
                <th>产品类型</th>
                <th>数量</th>
                <th>单位</th>
                <th>单价</th>
                <th>合计</th> 
            </tr></thead>
            <tbody>
            {% for p in t.products %}
            <tr>
                <td>{{p.code}}</td>
                <td>{{p.name}}</td>
                <td>{{p.type}}</td>
                <td>{{p.qty}}</td>
                <td>{{p.unit}}</td>   
                <td>{{p.price}}</td>
                <td>{{p.amt}}</td> 
            </tr>
            {% endfor %}
            <tr>
                <td>合计</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>{{t.tt_amt}}</td>
            </tr>
            </tbody>
            </table>
        </div>

        <div>
            应收款金额：{{t.amt_receivable}}
        </div>
        <div>
            收货签字：
        </div>

        <div>
            <span>业务员:{{t.salesman_name}}</span>
            <span class='pull-right' style='min-width:200px;'>业务员电话:{{t.salesman_telephone}}</span>
        </div>

    </div>
    {% endfor %}
</div>
