<template>
  <el-dialog
    :title="$t('business.printEditor.preview')"
    align-center
    v-model="dialogVisible"
    destroy-on-close
    append-to-body
    :show-close="false"
    :width="oWidth + 'mm'"
    class="print-preview"
  >
    <template #header>
      <div class="flx-start">
        <div class="flx-1">
          {{ title }}
        </div>
        <div class="flx-shrink">
          <el-button type="primary" :icon="Printer" @click="print" :loading="loadingPrinter">
            {{ $t("common.table.print") }}
          </el-button>
          <el-button type="danger" :icon="Close" text circle @click="dialogVisible = false"></el-button>
        </div>
      </div>
    </template>
    <template #default>
      <el-container v-loading="loading" style="min-height: 120px">
        <div id="preview_content"></div>
      </el-container>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, ref } from "vue";
import { Close, Printer } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const dialogVisible = ref<boolean>(false);
const loadingPrinter = ref<boolean>(false);
const loading = ref<boolean>(true);
const hiprintTemplate = ref();
const printData = ref();
const previewHtml = ref("");
const oWidth = ref("");
const title = ref(t("business.printEditor.title"));

interface showPreviewParams {
  hTemplate: any;
  pData: any;
  width?: string | number;
  sTitle?: string;
}

const show = ({ hTemplate, pData, width = "210", sTitle }: showPreviewParams) => {
  if (sTitle) {
    title.value = sTitle;
  }
  dialogVisible.value = true;
  loading.value = true;
  oWidth.value = hTemplate.editingPanel ? hTemplate.editingPanel.width : width;
  hiprintTemplate.value = hTemplate;
  printData.value = pData;
  console.log("show hiprintTemplate.value :>> ", hiprintTemplate.value);
  console.log("objeprintDatact vvv :>> ", printData.value);
  // setTimeout(() => {
  nextTick(() => {
    // let id_previewContentDesign = document.getElementById("preview_content");
    // if(id_previewContentDesign) {
    //   id_previewContentDesign.innerHTML = hiprintTemplate.getHtml(printData);
    // }
    let data = hTemplate.getHtml(pData);
    console.log("hTemplate.getHtml(pData) :>> ", hTemplate.getHtml(pData));
    // console.log("data :>> ", data);
    // for (const key in data) {
    //   console.log("key :>> ", key);
    //   console.log("data[key] :>> ", data[key]);
    // }
    document.getElementById("preview_content")!.appendChild(data[0]);
    // console.log(
    //   'document.getElementById("preview_content")!.innerHTML :>> ',
    //   document.getElementById("preview_content")!.innerHTML
    // );
    // console.log("hiprintTemplate.getHtml(printData) :>> ", JSON.stringify(data));
    // previewHtml.value = data;
    // console.log("previewHtml.value :>> ", previewHtml.value);
    loading.value = false;
  });
  // }, 500);
};

const print = () => {
  loadingPrinter.value = true;
  console.log("hiprintTemplate.value :>> ", hiprintTemplate.value);
  console.log("printData.value :>> ", printData.value);
  hiprintTemplate.value.print(
    printData.value,
    {},
    {
      callback: () => {
        console.log("callback");
        loadingPrinter.value = false;
      }
      // styleHandler: () => {
      //   let css = '<link href="http://hiprint.io/Content/hiprint/css/print-lock.css" media="print" rel="stylesheet">';
      //   return css;
      // }
    }
  );
};

const onlyPrint = ({ hTemplate, pData, width = "210", sTitle }: showPreviewParams) => {
  oWidth.value = hTemplate.editingPanel ? hTemplate.editingPanel.width : width;
  hiprintTemplate.value = hTemplate;
  printData.value = pData;
  console.log("show hiprintTemplate.value :>> ", hiprintTemplate.value);
  console.log("objeprintDatact vvv :>> ", printData.value);
  // setTimeout(() => {
  nextTick(() => {
    // let data = hTemplate.getHtml(pData);
    // console.log("hTemplate.getHtml(pData) :>> ", hTemplate.getHtml(pData));
    // document.getElementById("preview_content")!.appendChild(data[0]);

    // console.log("hiprintTemplate.value :>> ", hiprintTemplate.value);
    // console.log("printData.value :>> ", printData.value);
    hiprintTemplate.value.print(
      printData.value,
      {},
      {
        callback: () => {
          console.log("callback");
          loadingPrinter.value = false;
        }
      }
    );
  });
};

const toPdf = () => {
  hiprintTemplate.value.toPdf({}, "打印预览");
};

defineExpose({
  show,
  onlyPrint
});
</script>

<style lang="scss">
.print-preview {
  .el-dialog__body {
    padding: 0;
  }
}
</style>
