<template>
  <div :class="classes">
    <card-view
      v-if="pages.length"
      ref="CardView"
      class="preview-body"
      :pages="pages"
      :card-config="cardConfig"
    ></card-view>
  </div>
</template>

<script>
import CardView from "../../../../card/components/CardView";
import { getNewPage, getCardHeadModel } from "../../../../card/elementModel";
import { cardConfigInfos } from "../api";
import { getBase64Barcode } from "@/plugins/utils";

export default {
  name: "card-rule-preview",
  components: { CardView },
  props: {
    ruleId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      cardRuleId: this.$route.params.cardRuleId,
      cardConfig: {},
      pages: [],
      sysCardSize: "",
    };
  },
  computed: {
    classes() {
      return ["card-preview", "card-rule-preview"];
    },
  },
  mounted() {
    if (!this.cardRuleId && !this.ruleId) {
      this.$message.error("题卡规则id缺失！");
      return;
    }

    this.sysCardSize = this.$ls.get("schoolInfo", {
      cardSize: this.sysCardSize,
    }).cardSize;
    this.init();
  },
  methods: {
    async init() {
      const data = await cardConfigInfos(this.ruleId || this.cardRuleId);
      if (!data) {
        this.$message.error("找不到题卡规则！");
        return;
      }
      let config = {
        ...data,
        ...{
          pageSize: this.sysCardSize,
          columnNumber: 2,
          columnGap: 20,
          showForbidArea: false,
        },
      };
      config.fillNumber = data.examNumberDigit;
      config.aOrB = false; // 默认关闭A/B卷型
      config.requiredFields = JSON.parse(config.requiredFields);
      config.extendFields = JSON.parse(config.extendFields);
      config.relationList = JSON.parse(config.relationList || "[]");
      config.cardTitle = config.titleRule;

      this.cardConfig = config;
      let cardHeadElement = getCardHeadModel(this.cardConfig);
      cardHeadElement.fieldInfos = this.fetchFieldInfos(config, {});
      let page = getNewPage(0, { pageSize: this.sysCardSize, columnNumber: 2 });
      page.columns[0].elements.push(cardHeadElement);
      this.pages.push(page);
    },
    fetchFieldInfos(cardConfig, stdInfo) {
      let fieldInfos = {};
      const defContent = "相关信息";
      const defNumber = "123456789";
      const isPrintExamNumber = cardConfig.examNumberStyle === "PRINT";
      [...cardConfig.requiredFields, ...cardConfig.extendFields]
        .filter((item) => item.enable)
        .map((item) => {
          // console.log(item);
          fieldInfos[item.code] = isPrintExamNumber
            ? stdInfo[item.code] || defContent
            : "";
        });
      if (isPrintExamNumber) {
        fieldInfos.examNumber = getBase64Barcode(
          stdInfo["examNumber"] || defNumber
        );
        fieldInfos.examNumberStr = stdInfo["examNumber"] || defNumber;
      }
      if (cardConfig.aOrB && cardConfig.paperType === "PRINT") {
        fieldInfos.paperType = getBase64Barcode(
          stdInfo["paperType"] || defNumber
        );
        fieldInfos.paperTypeName = stdInfo["paperTypeName"] || "A";
      }

      return fieldInfos;
    },
  },
};
</script>
