<template>
  <div :class="classes">
    <paper-template-view
      v-if="pages.length"
      ref="PaperTemplateView"
      class="preview-body"
      :pages="pages"
      :page-config="pageConfig"
    ></paper-template-view>
  </div>
</template>

<script>
import PaperTemplateView from "../components/PaperTemplateView.vue";
import { deepCopy } from "../../card/plugins/utils";
import { paperTemplateDetailApi } from "../api";

export default {
  name: "PaperTemplatePreview",
  components: {
    PaperTemplateView,
  },
  data() {
    return {
      isPrint: this.$route.params.viewType !== "view",
      isFrame: this.$route.params.viewType === "frame",
      tid: this.$route.params.tid,
      pages: [],
      pageConfig: {},
    };
  },
  computed: {
    classes() {
      return [
        "card-preview",
        {
          "card-print": this.isPrint,
        },
      ];
    },
  },
  mounted() {
    if (this.isFrame) {
      this.initFrame();
    } else {
      this.init();
    }
  },
  methods: {
    initFrame() {
      const paperTempData = window.parent.paperTempData;
      if (!paperTempData) return;

      const { pages, pageConfig } = deepCopy(paperTempData);
      this.pages = pages;
      this.pageConfig = pageConfig;
    },
    async init() {
      const detDataRes = await paperTemplateDetailApi(this.tid);

      if (!detDataRes.data || !detDataRes.data.content) {
        this.$message.error("无模板内容");
        return;
      }

      const { pages, pageConfig } = JSON.parse(detDataRes.data.content);
      this.pages = pages;
      this.pageConfig = pageConfig;
    },
  },
};
</script>
