<template>
    <div>
        <!-- 打印二维码 弹框部分 -->
        <el-dialog title="打印条码预览" :visible.sync="printDialog" width="30%">
            <div class="qrCodeList">
                <div v-for="(item, index) in chooseList" :key="index">
                    <div class="titlShow">东营市二中</div>
                    <div class="flexBlock qrCode">
                        <div class="qrCodeLeft">
                            <div :id="'qrcode' + index"></div>
                            <div>{{ item.encode }}</div>
                        </div>
                        <div class="qrCodeRight">
                            <div>{{ item.equipmentName }}：{{ item.model }}</div>
                            <div>地点：{{ item.place }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="printCode">打 印</el-button>
            </div>
        </el-dialog>
        <!-- 打印二维码 弹框部分 -->

        <!-- 隐藏二维码页面样式 -->
        <div id="printBlock">
            <div v-for="(item, index) in printList" :key="index" class="printBody">
                <div class="titlePrint">东营市二中</div>
                <div class="flexBlock printQrCode">
                    <div class="printLeft">
                        <div :id="'print' + index" class="printImg"></div>
                        <div>{{ item.encode }}</div>
                    </div>
                    <div class="printRight">
                        <div>{{ item.equipmentName }}：{{ item.model }}</div>
                        <div>地点：{{ item.place }}</div>
                    </div>
                </div>
                <div style="page-break-after:always"></div>
            </div>
        </div>
        <!-- 隐藏二维码页面样式 -->

    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import QRCode from "qrcodejs2"; // 生成二维码插件
import printJS from "print-js"; // 打印插件
import {
    equipmentPrint
} from "../../../../api/smartSchool/schoolProperty/equipmenTledger";

export default {
    name: "index",
    data() {
        return {
            loading: true, // 遮罩层
            total: 0, // 总条数
            deviceData: [], // 设备台账表格数据
            title: "", // 弹出层标题
            dialogVisible: false, // 添加或修改
            queryParams: { // 查询参数
                pageNum: 1,
                pageSize: 10,
                equipmentName: '',
                classificationCode: undefined,
                equipmentState: '',
                affiliationType: '',
            },
            classificationOptions: [], // 分类编码树状结构
            formModel: {},
            nowOptionType: '', // 0 入库 1 编辑 2 查看
            electItem: [], // 选中的数据
            isDisabledBtn: true,
            chooseList: [], //用户选择的table数据
            printDialog: false, // 打印二维码预览
            printList: [],
            userList: [] //使用人列表
        };
    },
    created() {
        this.getList();
    },


    methods: {
        getList() {
            this.loading = true
            const ids = this.$route.query.ids;
            console.log(ids, 'ids');
            equipmentPrint(ids).then(res => {
                this.printList = res;
                console.log(this.printList, 'this.printList');
                this.chooseList = res;
                console.log(this.chooseList, 'this.chooseList');
                this.loading = false
                this.printBarcodes();

            })
        },
        //生成批量打印条码
        printBarcodes() {
            this.printDialog = true;
            this.$nextTick(() => {
                this.printList.map((item, index) => {
                    const domPrint = document.getElementById(`print${index}`).lastElementChild;
                    if (domPrint == null) {
                        new QRCode(`print${index}`, {
                            width: 60,
                            height: 60,
                            text: item.encode,
                        });
                    }
                });
                this.chooseList.map((item, index) => {
                    const dom = document.getElementById(`qrcode${index}`).lastElementChild;
                    if (dom == null) {
                        new QRCode(`qrcode${index}`, {
                            width: 150,
                            height: 150,
                            text: item.encode,
                        });
                    }
                });

            });
        },

        //打印条码
        printCode() {
            printJS({
                printable: printBlock,
                type: 'html',
                targetStyles: ['*'],
                font_size: '10px',
                style: `
        @media print{
          @page{
            size:auto;
            margin:4mm 0mm 0mm 0mm
          }
          @page :first{
            margin-top:2mm
          }
          #printBlock{
            display:block!important
          }
         #tabnav, #pagenum {
          display: none !important;
        }
     

        }`
            });
        }
    },




}
</script>

<style scoped>
::v-deep .el-form-item,
::v-deep .el-select {
    width: 100%;
}

::v-deep .el-form-item--small .el-form-item__content {
    width: 75%;
}

.qrCodeList {
    max-height: 500px;
    overflow-y: scroll;
}

.qrCode {
    width: 300px;
    font-size: 14px;
    line-height: 30px;
    align-items: flex-start;
    margin: 0 auto 20px auto;
}

.qrCodeLeft {
    text-align: center;
}

.qrCodeRight {
    padding: 20px 0 20px 15px;
}

.titlShow {
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    font-size: 16px;
}

#printBlock {
    display: none;
    margin: 0px !important;
}

.printLeft {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.printBody {
    width: 250px;
}

.printQrCode {
    font-size: 6px;
    line-height: 20px;
    align-items: center;
    padding: 8px;
}

.printRight {
    width: 60%;
    padding: 0 5px;
}

.titlePrint {
    font-size: 8px;
    font-weight: bold;
    text-align: center;
}

.printImg {
    display: block;
}
</style>
