<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-button link type="primary" @click="handlePrint">
      打印 html-to-paper
    </el-button>

  </ContentWrap>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogTableVisible" title="打印预览" width="640">

    <div id="printTest">
      <el-row style="border:1px solid #333;padding:20px;width: 600px;height: 360px;font-size: 16px;" id="printMe">
        <el-col :span="24" style="font-size: 26px;font-weight: bold;line-height: 36px;border-bottom: 1px solid #333;">
          标题</el-col>
        <el-col :span="16" style="line-height: 26px;padding-top:20px;">
          贮存条件：冷藏<br />
          生产日期：2024-05-26<br />
          保质期至：2024-05-26<br />
          供应商：华为<br />
        </el-col>
        <el-col :span="8" style='text-align:right'>
          <span style='font-size:36px;line-height:70px;font-weight: bold;'>23元</span><br />
          净含量：23g
        </el-col>
        <el-col :span="24">
          <img :src="barcodeImage" alt="Barcode Image" v-if="barcodeImage" />
          <canvas id="barcode" ref="barcodeCanvas"
            style="width: 560px; height: 100px; margin: 10px auto; display: none"></canvas>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <el-button type="primary" @click="printHtml">打印html-to-paper</el-button>
      <el-button type="primary" @click="printHtml2">打印 printjs</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import JsBarcode from 'jsbarcode';

import printJS from 'print-js';

// const message = useMessage()
const state: any = reactive({
  // 查询条件
  queryParams: {
    creatTime: [],
    endTime: '',
    startTime: '',
    pageNo: 1,
    pageSize: 10,
  },
  // 表格查询加载
  loading: true,
  // 表格总数
  total: 0,
  // 表格数据
  list: [{
    productListName: '打印'
  }],
  formData: {},
  iframeSrc: ''
})



/** 重置按钮操作 */
const queryFormRef = ref()

/** 打印预览 */

const barcodeValue = ref("");
const barcodeImage = ref("");
const barcodeCanvas = ref();


const dialogTableVisible = ref(false)

const handlePrint = () => {
  dialogTableVisible.value = true
  // state.iframeSrc= await Api.getTask(row.id)
  nextTick(() => {

    const canvas = barcodeCanvas.value;
    JsBarcode('#barcode', '12342234', {
      format: "CODE128",
      width: 2,
      height: 100,
      displayValue: true,
    });
    barcodeImage.value = canvas.toDataURL("image/png");
  })

}
const { proxy } = getCurrentInstance();
/***打印 */
const printHtml = (params) => {
  console.log(proxy, 'proxy')
  proxy.$htmlToPaper("printTest", {
    name: '_blank',
    specs: [
      'fullscreen=yes',
      'titlebar=yes',
      'scrollbars=yes'
    ],
    styles: [
      'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
      'https://unpkg.com/kidlat-css/css/kidlat.css'
    ],
    timeout: 100000, // default timeout before the print window appears
    autoClose: true, // if false, the window will not close after printing
    windowTitle: window.document.title, // override the window title
  })
}

const printHtml2 = () => {
  dialogTableVisible.value = true
  printJS({
    printable: 'printTest', // 要打印内容的id
    type: 'html', // 可以打印html,img详细的可以在官方文档https://printjs.crabbly.com/中查询
    targetStyles: ['*'],
    // style: ``, // 打印的内容是没有css样式的，此处需要string类型的css样式
    // style: `@page{size:auto;margin: 0cm;}`, // 打印的内容是没有css样式的，此处需要string类型的css样式
    scanStyles: true,
    onLoadingEnd() {
      // showPrintNode.value = false
    }
  })
}

</script>