<template>
  <div class="paper-template-view card-view paper-page">
    <template v-for="(page, pageNo) in pages">
      <div
        :key="pageNo"
        :class="[
          'page-box',
          `page-box-${page.pageSize}`,
          `page-box-${pageNo % 2}`,
        ]"
      >
        <!-- 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 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>
                  <!-- paper question info  -->
                  <template v-if="column.texts && column.texts.length">
                    <elem-rich-text
                      v-for="elem in column.texts"
                      :id="`rich-text-${elem.id}`"
                      :key="elem.id"
                      :data="elem"
                    ></elem-rich-text>
                  </template>
                </div>
              </div>
              <page-number
                v-if="page.showPageNo"
                type="text"
                :total="pages.length * page.columns.length"
                :current="pageNo * page.columns.length + columnNo + 1"
              ></page-number>
            </div>
          </div>
        </div>
        <!-- side edit erea -->
        <div v-if="page.showSide" class="page-column-side">
          <div class="column-side-body">
            <box-element-preview
              v-for="element in page.sides"
              :key="element.id"
              class="page-side-element"
              :data="element"
            ></box-element-preview>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import TopicElementPreview from "./TopicElementPreview";
import BoxElementPreview from "./BoxElementPreview.vue";
import PageNumber from "./PageNumber";
import ElemRichText from "../elements/rich-text/ElemRichText.vue";

export default {
  name: "PaperTemplateView",
  components: {
    TopicElementPreview,
    BoxElementPreview,
    PageNumber,
    ElemRichText,
  },
  props: {
    pages: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
