<template>
    <div class="container">
        <button @click="handleDown">导出</button>
        <div id="content">
           <div class="box qc orderInformation">
            <h1><img src="https://www.orico.com.cn//uploads/default/logo-black.png"><span id="cgzz"></span></h1>
            <h2>采购订单</h2>
            <ul class="InformationUl">
                <li>TO：<span id="gysname"></span></li>
                <li>日期：<span id="cgdate"></span></li>
                <li>地址：<span id="gysdz"></span></li>
                <li>电话：<span id="gyssj"></span></li>
                <li>联系人：<span id="gyslxr"></span></li>
            </ul>
            <div class="tableA">
                <table>
                    <thead>
                        <tr>
                            <td>采购订单号</td>
                            <td>物料编码</td>
                            <td>物料名称</td>
                            <td>规格型号</td>
                            <td>数量</td>
                            <td>单位</td>
                            <td>含税单价</td>
                            <td>总价</td>
                            <td>交货日期</td>
                            <td>备注</td>
                        </tr>
                    </thead>
                    <tbody id="t_body">
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>合计</td>
                            <td>人民币</td>
                            <td colspan='2'><span id="sumprice_to_Chinese"></span></td>
                            <td><span id="sum_count"></span></td>
                            <td>Pcs</td>
                            <td colspan='2'><strong id="sumprice"></strong></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
                <div class="InformationTxt">
                    <p>1.包装方式：根据我司品质规定的包装方式；</p>
                    <p>2.付款方式：<b id="fktype" style=" font-weight: normal;"> </b></p>
                    <p>3.备品要求：<span></span>0.3%&#12288;&#12288;<span></span>0.5%&#12288;&#12288;<span></span>10%&#12288;&#12288;<span></span>20%&#12288;&#12288;<span></span>其他</p>
                    <p>4.交货地点：<b id="sgdz" style=" font-weight: normal;"></b></p>
                    <p>5.质量要求：供应商所提供的产品质量必须达到我国环保标准和我方客户所在地标准，如果供应商提供有质量问题或不符合环保标准的产品，我司可以无条件退货，且供应商需承担我司的一切损失；</p>
                    <p>6.若供应商逾期交货，我司有权依照以逾期所交货物的货款为基数每日千分之三向供应商收取违约金，逾期10日交货的，我司有权单方解除合同；</p>
                    <p>7.有关本采购单的任何争议，双方应协商解决，协商不成的，应向深圳市元创时代科技有限公司所在地法院诉讼；</p>
                    <p>8.所送的物品请保证数量及质量 、送货前请通知我司采购，否则我司将拒收货物；</p>
                    <p>9.送货时烦请在请货单上注明相应的PO号码,送货单上必需有我司收货专用章，否则无效,谢谢合作；</p>
                </div>
                <div class="confirm">
                    <ul>
                        <li>供应商确认：</li>
                        <li>核准：</li>
                        <li>审核：<span id="editer"></span> </li>
                        <li>制表人：<span id="manperson"></span> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import htmlToPdf from '@/utils/htmlToPdf.js';
    export default {
        name: "OrderToPdf",
        data(){
            return {

            }
        },
        methods: {
            handleDown(){
                htmlToPdf.downloadPDF( document.querySelector('#content'),'订单合同');
            }
        }
    }
</script>

<style scoped>
* {
    margin: 0px;
    padding: 0px;
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit
}

td {
    padding: 5px 5px;
    border: 1px solid #333;
    vertical-align: middle
}

.box {
    /*width: 900px;*/
    margin: 0 auto
}

.qc:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.orderInformation {
    /*box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2);*/
    margin: 10px auto;
    padding: 10px
}

.orderInformation h1 {
    padding: 10px 80px;
    font-weight: normal;
    font-size: 30px;
}

.orderInformation h1 img {
    position: relative;
    float: left;
    top: 2px;
    margin-right: 10px;
}

.orderInformation h2 {
    text-align: center;
    background: #f1f1f1;
    /*margin: 15px 0;*/
    font-weight: normal;
    font-size: 24px;
    padding: 5px 0;
}

.InformationUl {
    margin-left: 35px;
    overflow: hidden
}

.InformationUl li {
    /*width: 50%;*/
    float: left;
    font-size: 14px;
    margin-bottom: 10px
}

.InformationUl li:nth-child(1) {
    width: 60%
}

.InformationUl li:nth-child(3) {
    width: 60%
}

.InformationUl li:nth-child(5) {
    width: 60%
}

.tableA {
    margin-bottom: 5px
}

.tableA table {
}

.tableA td {
    font-size: 12px;
    border: 1px solid #000
}

.tableA td * {
    font-size: 12px
}

.tableA td:nth-child(1), .tableA td:nth-child(2), .tableA td:nth-child(3), .tableA td:nth-child(8), .tableA td:nth-child(9) {
    white-space: nowrap
}

.tableA td:nth-child(10) {
    width: 6em
}

.InformationTxt {
}

.InformationTxt p {
    font-size: 14px;
    /*margin-bottom: 0.5em*/
}

.InformationTxt p span {
    width: 10px;
    height: 10px;
    border: 1px solid #000;
    display: inline-block;
    position: relative;
    top: 1px;
    margin-right: 4px
}

.confirm {
}

.confirm ul {
    overflow: hidden;
    padding: 20px 0
}

.confirm ul li {
    width: 25%;
    float: left;
    font-size: 14px
}
</style>
