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

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

/**
 * 格式文档：https://doc.qmth.com.cn/pages/viewpage.action?pageId=19661052
 */
export default {
  data() {
    return {
      fillAreaIndex: {
        ...initIndex,
      },
      VALID_ELEMENTS_FOR_EXTERNAL: [
        "LOCATOR",
        "BARCODE",
        "CARD_HEAD",
        "FILL_QUESTION",
        "FILL_LINE",
        "EXPLAIN",
      ],
    };
  },
  methods: {
    getFillAreaIndex(type) {
      return this.fillAreaIndex[type]++;
    },
    getElementHumpName(cont) {
      return cont
        .split("_")
        .map((item) => item[0] + item.substr(1).toLowerCase())
        .join("");
    },
    getPreviewElementById(id) {
      return document.getElementById(`preview-${id}`);
    },
    parsePageExchange(pages) {
      const npages = deepCopy(pages);
      // 单页题卡不显示页码涂块
      const pageNumberInfo =
        pages.length <= 2 ? null : this.getPageNumberInfo();
      npages.forEach((page, pindex) => {
        let exchange = {
          card_type: 2,
          page_size: page.pageSize,
          page_image: "",
          locator: this.getLocatorInfo(page.locators),
          fill_locator: [],
          check_area: {
            black_line: [],
            white_line: [],
          },
          barcode: [],
          qrcode: [],
          ocr_area: [],
          info_area: [],
          fill_area: [],
          answer_area: [],
          extension: {
            barcode: [],
            fill_area: [],
            ocr_area: [],
            qrcode: [],
          },
        };

        page.columns.forEach((column) => {
          column.elements.forEach((element) => {
            if (this.VALID_ELEMENTS_FOR_EXTERNAL.includes(element.type)) {
              const funcName = this.getElementHumpName(element.type);
              // console.log(funcName);
              const info = this[`get${funcName}Info`](element);
              Object.entries(info).forEach(([key, vals]) => {
                exchange[key] = [...exchange[key], ...vals];
              });
            }
          });
        });

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

        page.exchange = exchange;
      });

      this.fillAreaIndex = { ...initIndex };

      return npages;
    },
    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,
              recog_info: [],
            },
          ],
        },
      ];
    },
    getLocatorInfo(locators) {
      const tops = locators.top.map((locator) => {
        return this.getOffsetInfo(document.getElementById(locator.id));
      });
      const bottoms = locators.bottom.map((locator) => {
        return this.getOffsetInfo(document.getElementById(locator.id));
      });

      return {
        top: tops,
        bottom: bottoms,
      };
    },
    getCardHeadInfo(element) {
      const dom = this.getPreviewElementById(element.id);
      const headArea = this.getOffsetInfo(dom);
      let fill_area = [];
      let barcode = [];

      // 缺考涂填
      // 研究生题卡没有缺考填涂
      if (element.examAbsent) {
        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")
                ),
              ],
              recog_info: [],
            },
          ],
        });
      }

      return {
        info_area: [headArea],
        fill_area,
        barcode,
      };
    },
    getFillQuestionInfo(element) {
      const dom = this.getPreviewElementById(element.id);
      const single = !element.isMultiply;
      const paperStruct = element.parent.paperStruct;

      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);
            });

            let info = {
              main_number: paperStruct.detailNo,
              sub_number: questionItem.firstChild.textContent * 1,
              options,
              recog_info: [],
            };
            // if (!paperStruct.isCommon) {
            //   info.sub_number = paperStruct.nestedQNo;
            //   info.sub_number = questionItem.firstChild.textContent * 1;
            // }

            listInfos[questionIndex] = info;
          });
        fillAreas.push({
          field: "question",
          index: this.getFillAreaIndex("question"),
          single,
          horizontal: true,
          items: listInfos,
        });
      });

      return {
        fill_area: fillAreas,
      };
    },
    getFillLineInfo(element) {
      const dom = this.getPreviewElementById(element.id);
      const paperStruct = element.parent.paperStruct;

      return {
        answer_area: [
          {
            main_number: paperStruct.detailNo,
            sub_number: element.questionNo,
            // sub_number: paperStruct.isCommon
            //   ? element.questionNo
            //   : `${paperStruct.nestedQNo}-${element.questionNo}`,
            area: this.getOffsetInfo(dom),
          },
        ],
      };
    },
    getExplainInfo(element) {
      const dom = this.getPreviewElementById(element.id);
      const paperStruct = element.parent.paperStruct;
      // 多个答题区，会有多个数据

      return {
        answer_area: [
          {
            main_number: paperStruct.detailNo,
            sub_number: element.serialNumber,
            // sub_number: paperStruct.isCommon
            //   ? element.serialNumber
            //   : `${paperStruct.nestedQNo}-${element.serialNumber}`,
            area: this.getOffsetInfo(dom),
          },
        ],
      };
    },
    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);
    },
    getPageModel({ cardConfig, pages, paperSimpleStruct }) {
      let npages = this.parsePageExchange(pages);
      npages.forEach((page) => {
        page.exchange.page_size = cardConfig.pageSize;
      });
      return JSON.stringify(
        {
          version: CARD_VERSION,
          cardConfig,
          pages: npages,
          paperSimpleStruct,
        },
        (k, v) => (k.startsWith("_") ? undefined : v)
      );
    },
  },
};
