<template>
  <el-dialog
    :visible="visible"
    :maskClosable="false"
    @cancel="hideModal"
    :width="width + 'mm'"
    :append-to-body="true"
    :modal-append-to-body="true"
    custom-class="dialog-style dialog-printPreview"
    top="20px"
    v-el-dialog-center
    v-el-drag-dialog
    @close="hideModal"
  >
    <div style="min-height: 100px" v-loading="spinning">
      <div id="preview_content_design" ref="preview_content_design"></div>
    </div>
    <template slot="title">
      <div>
        <div class="name">打印预览</div>
        <el-button
          :loading="waitShowPrinter"
          type="primary"
          class="button-sty"
          icon="el-icon-printer"
          @click.stop="print"
          >打印
        </el-button>
        <el-button
          type="primary"
          class="button-sty"
          icon="el-icon-printer"
          @click.stop="toPdf"
          >pdf</el-button
        >
      </div>
    </template>
    <template slot="footer">
      <el-button
        key="close"
        type="info"
        @click="hideModal"
        class="button-sty"
        icon="el-icon-close"
      >
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import { hiprint } from "../../../../components/hiprint";

export default {
  name: "printPreview",
  props: {},
  data() {
    return {
      visible: false,
      spinning: true,
      waitShowPrinter: false,
      // 纸张宽 mm
      width: 0,
      // 模板
      hiprintTemplate: {},
      // 数据
      printData: {},
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    hideModal() {
      this.visible = false;
    },
    show(hiprintTemplate, printData, width = "210") {
      this.visible = true;
      this.spinning = true;
      this.width = hiprintTemplate.editingPanel
        ? hiprintTemplate.editingPanel.width
        : width;
      this.hiprintTemplate = hiprintTemplate;
      this.printData = printData;
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        // $('#preview_content_design').html(hiprintTemplate.getHtml(printData))
        $(this.$refs.preview_content_design).html(hiprintTemplate.getHtml(printData));
        this.spinning = false;
      }, 500);
    },
    print() {
      this.waitShowPrinter = true;
      this.hiprintTemplate.print(
        this.printData,
        {},
        {
          callback: () => {
            console.log("callback");
            this.waitShowPrinter = false;
          },
        }
      );
    },
    toPdf() {
      this.hiprintTemplate.toPdf({}, "打印预览");
    },
    open(printJson, printData, width = "210") {
      let hiprintTemplate = new hiprint.PrintTemplate({
        template: printJson,
        // 自定义可选字体
        // 或者使用 hiprintTemplate.setFontList([])
        // 或元素中 options.fontList: []
        fontList: [
          { title: "微软雅黑", value: "Microsoft YaHei" },
          { title: "黑体", value: "STHeitiSC-Light" },
          { title: "思源黑体", value: "SourceHanSansCN-Normal" },
          { title: "王羲之书法体", value: "王羲之书法体" },
          { title: "宋体", value: "SimSun" },
          { title: "华为楷体", value: "STKaiti" },
          { title: "cursive", value: "cursive" },
        ],
        dataMode: 1, // 1:getJson 其他：getJsonTid 默认1
        history: true, // 是否需要 撤销重做功能
      });
      this.visible = true;
      this.spinning = true;
      this.width = hiprintTemplate.editingPanel
        ? hiprintTemplate.editingPanel.width
        : width;
      this.hiprintTemplate = hiprintTemplate;
      this.printData = printData;
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        // $('#preview_content_design').html(hiprintTemplate.getHtml(printData))
        $(this.$refs.preview_content_design).html(hiprintTemplate.getHtml(printData));
        this.spinning = false;
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ant-modal-body {
  padding: 0px;
}

::v-deep .ant-modal-content {
  margin-bottom: 24px;
}
</style>
