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

<script>
import TopicElementPreview from "./TopicElementPreview";
import FreeElementPreview from "./FreeElementPreview";
import PageNumber from "./PageNumber";
import previewTemp from "../previewTemp";
import exchangeMixins from "../mixins/exchange";

export default {
  name: "CardView",
  components: { TopicElementPreview, FreeElementPreview, PageNumber },
  mixins: [exchangeMixins],
  props: {
    pages: {
      type: Array,
      default() {
        return [];
      },
    },
    cardConfig: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    getPreviewTemp(htmlContent) {
      return previewTemp(htmlContent);
    },
  },
};
</script>
