teachcloud-print-web/card/modules/free/cardFormatTransform.js

import { CARD_VERSION } from "../../enumerate";
import { deepCopy } from "../../plugins/utils";

const initIndex = {
  question: 1,
  absent: 1,
  paperType: 1,
  examNumber: 1,
  selective: 1,
  pageNumber: 1
};
let fillAreaIndex = { ...initIndex };

const VALID_ELEMENTS_FOR_EXTERNAL = [
  "LOCATOR",
  "BARCODE",
  "FILL_QUESTION",
  "FILL_LINE",
  "FILL_NUMBER",
  "FILL_FIELD",
  "FILL_TABLE",
  "LINES",
  "GRIDS"
];

function initFillAreaIndex() {
  fillAreaIndex = { ...initIndex };
}

function getFillAreaIndex(type) {
  return fillAreaIndex[type]++;
}

function getPreviewElementById(id) {
  return document.getElementById(`preview-${id}`);
}

function getOffsetInfo(dom) {
  let { offsetTop, offsetLeft } = dom;
  let parentNode = dom.offsetParent;
  while (parentNode.className.indexOf("page-box") === -1) {
    offsetTop += parentNode.offsetTop;
    offsetLeft += parentNode.offsetLeft;
    parentNode = parentNode.offsetParent;
  }
  const pw = parentNode.offsetWidth;
  const ph = parentNode.offsetHeight;

  const infos = [
    offsetLeft / pw,
    offsetTop / ph,
    dom.offsetWidth / pw,
    dom.offsetHeight / ph
  ];

  return infos.map(num => num.toFixed(10) * 1);
}

// locator: this.getLocatorInfo(page.locators),
// barcode: [],
// info_area: [],
// fill_area: [],
// answer_area: []

const elementInfoFunc = {
  LOCATOR: locators => {
    const result = locators.map(locatorGroup => {
      const locatorInfos = locatorGroup.map(locator => {
        return getOffsetInfo(document.getElementById(locator.id));
      });
      return {
        top: locatorInfos[0],
        bottom: locatorInfos[1]
      };
    });
    return {
      locator: result
    };
  },
  BARCODE: element => {
    return {
      barcode: [
        {
          field: element.field,
          area: getOffsetInfo(getPreviewElementById(element.id))
        }
      ]
    };
  },
  FILL_QUESTION: element => {
    const dom = getPreviewElementById(element.id);
    const single = !element.isMultiply;
    const horizontal = element.optionDirection === "horizontal";

    let fillAreas = [];
    dom.querySelectorAll(".group-item").forEach(groupItem => {
      let listInfos = [];

      groupItem
        .querySelectorAll(".question-item")
        .forEach((questionItem, questionIndex) => {
          let options = [];
          questionItem.childNodes.forEach((optionItem, optionIndex) => {
            if (optionIndex)
              options[optionIndex - 1] = this.getOffsetInfo(optionItem);
          });
          listInfos[questionIndex] = {
            main_number: element.topicNo,
            sub_number: questionItem.firstChild.textContent * 1,
            options
          };
        });
      fillAreas.push({
        field: "question",
        index: getFillAreaIndex("question"),
        single,
        horizontal,
        items: listInfos
      });
    });

    return {
      fill_area: fillAreas
    };
  },
  FILL_LINE: element => {
    const dom = getPreviewElementById(element.id);
    let sub_numbers = [];
    for (
      let i = element.startNumber,
        len = element.startNumber + element.questionsCount;
      i < len;
      i++
    ) {
      sub_numbers.push(i);
    }

    return {
      answer_area: [
        {
          main_number: element.topicNo,
          sub_numbers,
          area: getOffsetInfo(dom)
        }
      ]
    };
  },
  FILL_NUMBER: element => {
    let listInfos = [];
    const dom = getPreviewElementById(element.id);

    dom
      .querySelectorAll(".fill-number-list")
      .forEach((questionItem, questionIndex) => {
        let options = [];
        questionItem.childNodes.forEach((optionItem, optionIndex) => {
          options[optionIndex] = getOffsetInfo(optionItem);
        });
        listInfos[questionIndex] = {
          main_number: null,
          sub_number: null,
          options
        };
      });

    return {
      fill_area: [
        {
          field: "examNumber",
          index: getFillAreaIndex("examNumber"),
          single: true,
          horizontal: false,
          items: listInfos
        }
      ]
    };
  },
  FILL_FIELD: element => {
    const dom = getPreviewElementById(element.id);

    return {
      info_area: [getOffsetInfo(dom)]
    };
  },
  FILL_TABLE: element => {
    const dom = getPreviewElementById(element.id);

    return {
      info_area: [getOffsetInfo(dom)]
    };
  },
  LINES: element => {
    const dom = getPreviewElementById(element.id);

    return {
      answer_area: [
        {
          main_number: null,
          sub_numbers: null,
          area: getOffsetInfo(dom)
        }
      ]
    };
  },
  GRIDS: element => {
    const dom = getPreviewElementById(element.id);

    return {
      answer_area: [
        {
          main_number: null,
          sub_numbers: null,
          area: getOffsetInfo(dom)
        }
      ]
    };
  }
};

function getPageNumberInfo() {
  const dom = document.querySelector(".page-box-0");
  let options = [];
  dom
    .querySelector(".page-number-rect-list")
    .childNodes.forEach((item, index) => {
      options[index] = this.getOffsetInfo(item);
    });
  return [
    {
      field: "pageNumber",
      index: 1,
      single: true,
      horizontal: true,
      items: [
        {
          main_number: null,
          sub_number: null,
          options
        }
      ]
    }
  ];
}

function parsePageExchange(pages) {
  initFillAreaIndex();

  const npages = deepCopy(pages);
  const pageNumberInfo = getPageNumberInfo();
  npages.forEach((page, pindex) => {
    let exchange = {
      locator: elementInfoFunc.LOCATOR(page.locators),
      barcode: [],
      info_area: [],
      fill_area: [],
      answer_area: []
    };
    const elements = [
      page.globals,
      ...page.columns.map(column => column.elements)
    ];

    elements.forEach(elemGroup => {
      elemGroup.forEach(element => {
        if (!VALID_ELEMENTS_FOR_EXTERNAL.includes(element.type)) return;
        const info = elementInfoFunc[element.typ](element);
        Object.entries(info).forEach(([key, vals]) => {
          exchange[key] = exchange[key].concat(vals);
        });
      });
    });

    if (!(pindex % 2)) {
      let pnoInfo = deepCopy(pageNumberInfo);
      pnoInfo[0].index = getFillAreaIndex("pageNumber");
      exchange.fill_area = exchange.fill_area.concat(pnoInfo);
    }

    page.exchange = exchange;
  });

  return npages;
}

export function getPageModel({ cardConfig, paperParams, pages }) {
  let npages = parsePageExchange(pages);
  npages.forEach(page => {
    page.exchange.page_size = cardConfig.pageSize;
  });
  return JSON.stringify(
    {
      version: CARD_VERSION,
      cardConfig,
      paperParams,
      pages: npages
    },
    (k, v) => (k.startsWith("_") ? undefined : v)
  );
}

// TODO:缺考涂填

// export default {
//   methods: {
//     getCardHeadInfo(element) {
//       const dom = this.getPreviewElementById(element.id);
//       const headArea = this.getOffsetInfo(dom);
//       let fill_area = [];
//       let barcode = [];
//       // 缺考涂填
//       if (element.examAbsent && !element.isSimple) {
//         fill_area.push({
//           field: "absent",
//           index: this.getFillAreaIndex("absent"),
//           single: true,
//           horizontal: true,
//           items: [
//             {
//               main_number: null,
//               sub_number: null,
//               options: [
//                 this.getOffsetInfo(document.getElementById("dynamic-miss-area"))
//               ]
//             }
//           ]
//         });
//       }
//       // A/B卷类型
//       if (element.aOrB && !element.isSimple) {
//         // fill_area
//         let options = [];
//         document
//           .getElementById("head-dynamic-aorb")
//           .querySelectorAll(".head-dynamic-rect")
//           .forEach((optionItem, optionIndex) => {
//             options[optionIndex] = this.getOffsetInfo(optionItem);
//           });
//         fill_area.push({
//           field: "paperType",
//           index: this.getFillAreaIndex("paperType"),
//           single: true,
//           horizontal: true,
//           items: [
//             {
//               main_number: null,
//               sub_number: null,
//               options
//             }
//           ]
//         });
//       }

//       return {
//         info_area: [headArea],
//         fill_area,
//         barcode
//       };
//     }
//   }
// };