<template>
    <div>
        <el-button type='primary' @click='printClick'>打印</el-button>
        <!-- 打印 start -->
        <div style="display: none;">
            <el-button id="trueBtn" v-print="printObj" type="info" size="mini" icon="el-icon-printer">打印</el-button>
            <!-- <div style="display: none"> -->
            <div v-if="printFlag" id="printId" style="width: 100%;">
                <!-- 打印 （打印元素有边距时，会打印出2张纸；使用svg或img）start-->
                <div class="print-box" style='margin-bottom: 50px;'>
                    <div class="flex align-center border-bottom">
                        <div class="title">单证号</div>
                        <div class="flex-1 center">
                            <span>{{wmsInfo.waybill}}</span><span v-if="wmsInfo.billfhl">_{{wmsInfo.billfhl}}</span>
                        </div>
                    </div>
                    <div class="flex align-center border-bottom">
                        <div class="title">件数</div>
                        <div class="flex-1 center">{{wmsInfo.pcs}}</div>
                    </div>
                    <div class="flex align-center border-bottom">
                        <div class="title">重量</div>
                        <div class="flex-1 center">{{wmsInfo.billweight}}</div>
                    </div>
                    <div class="flex align-center border-bottom">
                        <div class="title">计费重量</div>
                        <div class="flex-1 center">{{wmsInfo.feeweight}}</div>
                    </div>
                    <div class="flex justify-center py-1">
                        <barcode
                                :value="wmsInfo.serialnumber"
                                :options="barcodeOptions1"
                        >
                            条形码生成失败
                        </barcode>
                    </div>
                </div>
                <!-- 打印单个 end -->
                <!-- 打印多个,一张纸一个 start-->
<!--                <div class="print-box"  style='margin-bottom: 50px;page-break-after: always' v-for="(item, index) in selection" :key="index">-->
<!--                    <div class="flex align-center border-bottom">-->
<!--                        <div class="title">模具编码</div>-->
<!--                        <div class="flex-1 center">{{item.moldCode}}</div>-->
<!--                    </div>-->
<!--                    <div class="flex align-center border-bottom">-->
<!--                        <div class="title">规格</div>-->
<!--                        <div class="flex-1 center">{{item.moldSpec}}</div>-->
<!--                    </div>-->
<!--                    <div  class="flex  justify-center py-1">-->
<!--                        <img :id="'barcodeId' + index" class="img-print"></img>-->
<!--                        <VueBarcode-->
<!--                                value="172-12345678"-->
<!--                                :options="{ widht:100,height:50,background:'rgba(255,255,255,.0)'}"-->
<!--                        >-->
<!--                            条形码显示失败时的内容-->
<!--                        </VueBarcode>-->
<!--                    </div>-->
<!--                </div>-->
                <!-- 打印多个 end -->
            </div>
            <!-- </div> -->
        </div>
        <!-- 打印 end -->
    </div>
</template>

<script>
    import jsutil from "@/common/js/util";
    export default {
        components: {
        },
        props:['wmsInfo'],
        data() {
            return {
                printFlag: false,
                printObj: {
                    id: "printId",
                    popTitle: "打印条形码",  //页眉，不传文字默认显示项目名
                    extraCss: "https://www.google.com,https://www.google.com",
                    extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style>html{ margin:0},body:{margin:0} <style>',
                },
                barcodeOptions: {
                    format: "CODE39",
                    height: 60,
                    displayValue: true,
                    // text: barCode,
                    font: "fantasy",
                    textAlign: "center",
                    textPosition: "bottom",
                    textMargin: 10,
                    fontSize: 14,
                    // width:100,
                    // background: "#eee",
                    lineColor: "#333333",
                    margin: 20
                },
                barcodeOptions1:{
                    widht:100,
                    height:50,
                    background:'rgba(255,255,255,.0)',
                    margin: 20
                },
                wmsData:{},
                // 条形码长度是6位数
                selection:[
                    {
                        moldCode:'000001',
                        moldSpec:'56*22'
                    },
                    {
                        moldCode:'000002',
                        moldSpec:'26*20'
                    },
                    {
                        moldCode:'000003',
                        moldSpec:'56*22'
                    },
                    {
                        moldCode:'000004',
                        moldSpec:'26*20'
                    },
                    {
                        moldCode:'000005',
                        moldSpec:'56*22'
                    },
                    {
                        moldCode:'000006',
                        moldSpec:'26*20'
                    },
                ]

            }
        },
        mounted() {
            let itemAttr = "{\"材质\":\"3\",\"厚\":\"4\",\"宽\":\"56\",\"长\":\"1\"}";
            let data = JSON.parse(itemAttr)
            let list1 = Object.entries(data)
            // console.log(2, list1)
            let list = [];
            for (let key in data) {
                list.push({
                    name: key,
                    value: data[key]
                })
            }
            // console.log(1, list)

        },
        methods: {
            printClick() {
                this.printFlag = true;
                //多个
                // this.$nextTick(() => {
                //     this.selection.forEach((v,index)=>{
                //         let options = {
                //             format: 'CODE39',
                //             height: 30,
                //             displayValue:true,
                //             text:v.moldCode,
                //             font:"fantasy",
                //             textAlign:"center",
                //             textPosition:"bottom",
                //             textMargin:2,
                //             fontSize:12,
                //             background:"#eee",
                //             lineColor:"#333333",
                //             // margin:20
                //         }
                //         // JsBarcode('#barcodeId' + index, v.moldCode,options)
                //     })
                // })
                // 单个
                let barCode = this.selection[0].moldCode;
                let options = {
                    format: "CODE39",
                    height: 60,
                    displayValue: true,
                    text: barCode,
                    font: "fantasy",
                    textAlign: "center",
                    textPosition: "bottom",
                    textMargin: 10,
                    fontSize: 14,
                    background: "#eee",
                    lineColor: "#333333",
                    margin: 20
                }
                this.$nextTick(() => {
                    // JsBarcode("#barcodeId", barCode, options);
                });
                setTimeout(() => {
                    document.getElementById("trueBtn").click();
                    this.printFlag = false;
                }, 1000);
            },
        },
        watch: {
            wmsInfo(value) {
                if (jsutil.checkNull(value)){
                    this.wmsData = value;
                }
                console.log("仓库数据已传递:"+value)
            }
        }
    }
</script>
<style media="print">
    @page {
        size: auto;
        margin: 0;
        padding: 0;
    }
    html {
        /* margin: 0; */
    }
    #printId {
        margin: 0;
        padding: 0;
        height: 98%;
    }
    body {
        /* margin: 0; */
    }
</style>
<style scoped>
    /* 大小可根据打印纸调整 */
    .flex{
        display: flex;
    }
    .align-center{
        align-items: center;
    }
    .justify-center{
        justify-content: center;
    }
    .center{
        text-align: center;
    }
    .flex-1{
        flex: 1;
    }
    .py-1{
        /* padding: 4px 0; */
    }
    .print-box {
        margin: 0 !important;
        padding: 0 !important;
        width: 330px;
        border: 1px solid black;
        font-size: 12px;
        transform: scale(0.7);
    }
    .img-print{
        transform: scale(0.8);
    }
    .title {
        width: 90px;
        height: 20px;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        border-right: 1px solid black;
    }

    .border-bottom {
        border-bottom: 1px solid black;
    }
</style>