<template>
    <el-config-provider :locale="zhCn">
        <el-row>
            <el-button style="margin-left: 25px;" color="#626aef" v-print="'#printArea'"><el-icon>
                    <Printer />
                </el-icon>打印标签</el-button>
        </el-row>
        <el-container class="content">
            <!-- <div style="width: 0;height: 0;overflow: hidden"> -->
            <div>
                <div id="printArea" class="objectDialogFlowPrint">
                    <div class="myPrint">
                        <div class="pageWarp" v-for="item in printTabs">
                            <el-card :body-style="{ padding: '0px', display: 'flex' }">
                                <qrcode-vue :value="item.name + '&' + item.quantity" :size="size" :foreground="color"
                                    level="H" style="margin: 15px" />
                                <div style="padding: 14px; text-align: left;">
                                    <span style="font-size: 27pt;font-weight: bold; margin-left: 0;">零件号：{{ item.name
                                    }}</span>
                                    <br />
                                    <span style="font-size: 27pt;font-weight: bold; margin-left: 0;">数&#8195;量：{{
                                        item.quantity }}</span>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div>
        </el-container>
    </el-config-provider>
</template>

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'
</script>

<script>
export default {
    name: 'printDemo',
    components: {
    },
    data() {
        return {
            printTabs: [
                {
                    name: '测试物料1',
                    quantity: 1
                },
                {
                    name: '测试物料2',
                    quantity: 2
                }
            ],
            size: ref(200),
            color: ref('#000000')
        }
    },
    methods: {

    }
}
</script>

<style scoped>
.content {
    display: flex;
    width: 100%;
}

.objectDialogFlowPrint .pageWarp {
    /*这句话很重要，控制时候强制分页 https://www.w3school.com.cn/cssref/pr_page-break-after.asp*/
    page-break-after: always;
    height: 100%;
    width: 100%;
    text-align: center;
    margin: 5px auto;
    padding: auto;
}

.objectDialogFlowPrint .myPrint {
    /* 打印的时候是否显示底色 */
    print-color-adjust: exact;
}</style>