<template>
    <div>
        <el-dialog v-model="centerDialogVisible" title="二维码" width="666" center>
            <div class="dialog-footer" style="text-align: center">
                <!-- <qrcode-vue :value="form.url" :size="200" /> -->
                <div class="qrcodefooter">{{ props.form.article }}</div>
                <div class="qrcodefooter">{{ props.form.type }}</div>
                <div class="qrcodefooter">
                    <el-select v-model="rintermodel" placeholder="请选择打印机" @change="changerintermodel">
                        <el-option v-for="item in rintermodeldata" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </div>

                <el-button @click="centerDialogVisible = false">关闭</el-button>
                <el-button type="primary" :disabled="rintermodel ? false : true" @click="Printing"> 打印 </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { dayjs } from 'element-plus'
import { ref } from 'vue'
import _lodash from 'lodash'
import getLodop from './LodopFuncs'
const props = defineProps({
    form: Object,
})

const centerDialogVisible = ref(false) //显示隐藏
const rintermodeldata = ref([]) // 获取打印机列表
const rintermodel = ref() //打印机类型
// 确定打印机类型
const changerintermodel = (i: string) => {
    rintermodel.value = i
}
const emit = defineEmits(['somethingDone'])
// 以下是打印
const Printing = () => {
    let LODOP = getLodop()
    centerDialogVisible.value = false
    rintermodeldata.value = [] //清空
    emit('somethingDone')
    LODOP.PRINT_INIT('')
    // 设置打印纸大小D
    LODOP.SET_PRINT_PAGESIZE(3, 800, '', '')
    // 二维码控制大小
    LODOP.ADD_PRINT_BARCODE('', '30px', '150px', '150px', 'QRCode', props.form.url) //打印产品代码条码
    LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Width ') //设置打印风格，这里是等宽打印
    LODOP.SET_PRINTER_INDEX(rintermodel.value) //设置默认打印机(这里用的是打印机名称)
    LODOP.SET_PRINT_STYLE("TextAlign", "Center");
    // 文字内容
    LODOP.ADD_PRINT_HTM(
        '150px',
        '5px',
        '100%',
        '100%',
        `<div style="width: 100%;font-size: 12px; ">项目分类:${props.form.article}</div>
        <div style="width: 100%;font-size: 12px; margin-top:6px;">发票类型:${props.form.type}</div>
        <div style="width: 100%;font-size: 12px; margin-top:6px;">生成时间:${dayjs().format('YYYY-MM-DD HH:mm:ss')}</div>
        <div style="width: 100%;font-size: 12px; margin-top:6px;">*二维码有效期30天,超过自动失效！</div>
        <div style="width: 100%;font-size: 14px; margin-top: 15px;">您可以使用微信，扫码开票</div>`,
        '150px',
        '5px',
        '100%',
        '100%',
    )
    LODOP.SET_LICENSES('', 'DCFF409304DFCEB3E2C644BF96CD0720', '', '')
    LODOP.PRINT()
}
const initialization = async () => {
    rintermodeldata.value = [] //清空
    let LODOP = getLodop()
    setTimeout(() => {
        if (LODOP == null) {
            alert('请先安装打印控件')
            return
        }
        for (var i = 0; i < LODOP.GET_PRINTER_COUNT(); i++) {
            let obj: {
                id: string
                name: string
            } = {
                id: '',
                name: '',
            }
            obj.id = LODOP.GET_PRINTER_NAME(i)
            obj.name = LODOP.GET_PRINTER_NAME(i)
            // console.log(obj)
            rintermodeldata.value.push(obj)
        }
    }, 1000)
}
const centerDialogVisibleshow = () => {
    centerDialogVisible.value = !centerDialogVisible.value
}
defineExpose({
    Printing,
    centerDialogVisibleshow,
    initialization,
})
</script>

<style scoped lang="scss">
.dialog-footer {
    text-align: center;

    .qrcodefooter {
        text-align: center;
        margin: 10px;
    }
}
</style>
