<template>
  <div class="card-free-view">
    <template v-for="(page, pageNo) in pages">
      <div
        :class="[
          'page-box',
          `page-box-${page.pageSize}`,
          `page-box-${pageNo % 2}`,
          { 'page-box-less': pages.length <= 2 },
        ]"
        :id="`preview-page-box-${pageNo}`"
        :key="pageNo"
      >
        <!-- locator -->
        <div class="page-locator page-locator-top">
          <div
            v-for="elem in page.locators.top"
            :key="elem.id"
            :id="elem.id"
            class="page-locator-item"
          ></div>
        </div>
        <div class="page-locator page-locator-bottom">
          <div
            v-for="elem in page.locators.bottom"
            :key="elem.id"
            :id="elem.id"
            class="page-locator-item"
          ></div>
        </div>
        <!-- inner edit area -->
        <div class="page-main-inner">
          <div
            :class="['page-main', `page-main-${page.columns.length}`]"
            :style="{ margin: `0 -${page.columnGap / 2}px` }"
          >
            <div
              class="page-column"
              v-for="(column, columnNo) in page.columns"
              :key="columnNo"
              :style="{ padding: `0 ${page.columnGap / 2}px` }"
            >
              <div
                class="page-column-main"
                :id="[`column-${pageNo}-${columnNo}`]"
              >
                <div class="page-column-body" v-if="column.elements.length">
                  <topic-element-preview
                    class="page-column-element"
                    v-for="element in column.elements"
                    :key="element.id"
                    :data="element"
                  ></topic-element-preview>
                </div>
                <div class="page-column-body" v-else>
                  <div
                    class="page-column-forbid-area"
                    v-if="cardConfig.showForbidArea"
                  >
                    <p>该区域严禁作答</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- outer edit area -->
        <div class="page-main-outer">
          <page-number
            type="rect"
            :total="pages.length"
            :current="pageNo + 1"
          ></page-number>
          <page-number
            type="text"
            :total="pages.length"
            :current="pageNo + 1"
          ></page-number>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import TopicElementPreview from "./TopicElementPreview";
import PageNumber from "../../../components/PageNumber";
import previewTemp from "../../../previewTemp";
import { getPageModel } from "../cardFormatTransform";

export default {
  name: "card-free-view",
  components: { TopicElementPreview, PageNumber },
  props: {
    pages: {
      type: Array,
      default() {
        return [];
      },
    },
    cardConfig: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    getPageModel(cardData) {
      return getPageModel(cardData);
    },
    getPreviewTemp(htmlContent) {
      return previewTemp(htmlContent);
    },
  },
};
</script>