<template>
    <el-dialog :title="title" visible :before-close="closeDialog" width="1200px">
        <div id="laay">
            <!--startprint-->
            <div id="myproa">
                <p style="padding-bottom:10px;font-size:16px;">
                    订单号：ECP0063705N
                    &nbsp;&nbsp;&nbsp;发货人电话：Alex +8613802728881
                    &nbsp;&nbsp;&nbsp;提货地点：Alaba
                    <img src="http://v4.groupage.cn//qrcode/images/ECP0063705N_rcd.png" alt="ECP0063705N" style="margin-left: 10px;width:17mm;vertical-align:middle">
                </p>
                <div id="table1" width="205mm">
                    <table class="ptab" id="rclist" cellspacing="0" cellpadding="0" style="border:1px dashed #ccc;width:100%;">
                        <tr>
                            <th style="text-align:center;width: 50px;" v-if="!preview">
                                <label class="checkbox checkbox-indent">
                                    <input type="checkbox" name="" value="" id="checkboxa" data-on="0" onclick="checkboxs();">
                                    <i class="fa fa-check-square"></i>
                                </label>
                            </th>
                            <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">唛头</th>
                            <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">货物描述</th>
                            <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">箱数</th>
                            <th style="text-align:center;padding:0 0px;width:150px;text-align: center;font-size: 14px;border:1px dashed #ccc;">尺寸</th>
                            <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">方数</th>
                            <th style="text-align:center;padding:0 0px;width:80px;text-align: center;font-size: 14px;border:1px dashed #ccc;">重量</th>
                            <th style="text-align:center;padding:0 0px;width:110px;text-align: center;font-size: 14px;border:1px dashed #ccc;">入仓时间</th>
                        </tr>
                        <tr>
                            <td style="text-align:center;width: 50px;" v-if="!preview">
                                <label class="checkbox checkbox-indent">
                                    <input type="checkbox" class="alla" name="ids[]" value="111819" data-on="0" >
                                    <i class="fa fa-check-square"></i>
                                </label>
                            </td>
                            <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">QQ</td>
                            <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">
                                手机皮套<br/>phone leather cover
                            </td>
                            <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">50</td>
                            <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">cm x cm x cm</td>
                            <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">0.01</td>
                            <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">0</td>
                            <td style="text-align:center;padding:0 0px;border:1px dashed #ccc;">2022-07-20 18:23:29</td>
                        </tr>
                        
                    </table>
                </div>
                <!--edit by liuyc 20210121 结尾增加文字-->
                <p>
                    1.控货成功标准：入仓3天内收到我司控货短信视为控货成功；否则视为不控货，如未收到请在2个工作日内与我司联系.
                    2.如需保价赔付需在入仓3天内告知。
                </p>
            </div>
            <p class="subs" style="text-align:center">
                <el-button v-if="!preview" type="primary" @click="preview=true">去打印</el-button>
                <el-button v-if="preview" type="primary" @click="print">确定打印</el-button>
            </p>
        </div>
    </el-dialog>
</template>
<script>
import {parseTime} from '@/utils/ruoyi'
import lodop from '@/utils/lodop'

export default {
    filters: {parseTime},
    props:{
        orderId: [String, Number]
    },
    data(){
        return {
            show: false,
            detail: null,
            preview: false
        }
    },
    computed:{
        title(){
            let t = '打印入仓单'
            if(this.detail){
                t += '-' + this.detail.orderNo
            }
            return t
        }
    },
    created(){
        this.show = true
        this.loadData()
    },
    methods:{
        loadData(){
            
        },
        closeDialog(){
            this.show = false
            this.$emit('close');
        },
        print(){
            this.$nextTick(() => {
                lodop().then(LODOP => {
                    LODOP.PRINT_INIT(this.title);
                    LODOP.SET_PRINT_STYLE("FontSize",18);
                    LODOP.SET_PRINT_STYLE("Bold",1);
                    LODOP.SET_PRINT_PAGESIZE(0);
                    LODOP.SET_PRINT_PAGESIZE(0,2970,2100,"A4");
                    LODOP.ADD_PRINT_HTM("5%","5%","90%","90%", document.getElementById("myproa").innerHTML);
                    LODOP.PRINT();
                    this.$alert('已发起打印任务');
                    
                    // LODOP.PREVIEW(); // 预览
                    /* LODOP.PRINTA(); // 选择打印机
                    // 直接打印 */
                    console.log('打印哦')
                }).catch(err => {
                    console.error('lodop异常', err)
                    alert('请检查LODOP打印控件是否安装并启动');
                })
            })
            
            
        }
    }
}
</script>
<style scoped>
.ptab th{border:1px solid #333;text-align: center;font-size: 14px;border:1px dashed #ccc;}
.ptab td{border:1px solid #333;padding:0px 5px;font-size: 14px;border:1px dashed #ccc;word-wrap:break-word}
.ptab td input[type='text']{width:60%;}
.ptab td a{color:#4e9cdd;font-weight:600;}
#laay{width:98%;margin:0 auto;margin-top: 30px;}
#laay table{width:100%;margin:0 auto;}
#laay table tr{min-height:30px;}
#laay table tr th{font-size: 16px;text-align: right;vertical-align: top;padding: 15px 0px;width:120px;}
#laay table tr th span{color:red;padding:0px 0px 0px 5px;}
#laay table tr td{font-size: 16px;text-align: left;padding:10px 10px; position: relative;}
#laay table tr td #xlss{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;}
#laay table tr td #xlss p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;}
#laay table tr td #xlssa{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;}
#laay table tr td #xlssa p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;}
#laay table tr td #xlssaa{position:absolute;width:60%;max-height:100px;border:1px solid #d7d7d7;background:#fff;top:41px;left:10px; overflow:hidden;overflow-x: hidden; overflow-y: auto;display:none;z-index: 99999;padding: 0 10px;}
#laay table tr td #xlssaa p{line-height: 20px;padding:0px 10px;cursor:pointer;font-size: 16px;}
#laay table tr td input[type='text']{height: 30px;border:1px solid #ddd;padding: 0 15px;font-size: 16px;width:60%;}
#laay table tr td textarea{height:50px;border:1px solid #ddd;padding: 10px 15px;font-size: 16px;width:60%;}
#laay table tr td input[type='radio']{height:30px;float:left;cursor: pointer;}
#laay table tr td .span{float:left;line-height: 30px;}
#laay table tr td .p{border:1px solid #ddd;font-size:16px;width:60%;padding: 0 16px;line-height:30px;cursor: pointer;}
#laay table tr td select{height: 30px;border:1px solid #ddd;padding: 0 15px;font-size: 16px;width:67%;}
#laay table tr td div p{padding: 5px 0px;line-height: 40px;}
#laay table tr td .dels{padding: 1px 8px;color: #fff;background: red;border-radius: 100%;font-size: 18px;font-weight: 600;cursor: pointer;}
#laay table tr td .adds{padding: 1px 5px;color: #fff;background: red;border-radius: 100%;font-size: 18px;font-weight: 600;cursor: pointer;}
.checkbox{text-align: center;}
.checkbox input{text-decoration: none;padding:10px 15px;background:#ccc;border-radius: 5px; cursor: pointer;margin-bottom: 15px;font-size: 16px;margin:0 2px;}

</style>