<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}`,
        ]"
      >
        <div
          :class="['page-locators', `page-locators-${page.locators.length}`]"
        >
          <ul
            v-for="(locator, iind) in page.locators"
            :key="iind"
            class="page-locator-group"
          >
            <li
              v-for="(elem, eindex) in locator"
              :id="elem.id"
              :key="eindex"
            ></li>
          </ul>
        </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>
            </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 "./PageNumber";
import previewTemp from "../previewTemp";
import exchangeMixins from "../mixins/exchange";

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