<template>
  <div>
    <el-button ref="printBtn" :disabled="disabled" type="primary" class="el-icon-printer" size="mini" v-print="printObj">打印</el-button>
    <div id="demo"></div>
  </div>
</template>
<script>
export default {
  props: {
    printId: {
      type: String,
      default: "demo",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      printObj: {
        id: this.printId,
        popTitle: "", //打印的标题
        extraCss: "", //打印可引入外部的一个css文件
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style> #printMe { height: auto !important; } <style>', // 打印头部文字附加在head标签上的额外标签//可以传进去 style tag 标签；注意要逗号分隔 解决特定区域不显示问题；
        preview: false, // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeOpenCallback: () => {
          this.$emit("beforeOpen");
        }, // 开启打印前的回调事件
        openCallback() {
        }, // 调用打印之后的回调事件
        closeCallback() {
        }, //关闭打印的回调事件（无法确定点击的是确认还是取消）
      },
    };
  },
  methods: {
    clickBtn() {
      this.$refs.printBtn.$el.click();
    },
  },
  watch: {
    printId(value) {
      if (value !== undefined && value !== "") {
        this.printObj.id = value;
      }
    },
  },
};
</script>
