<script setup>
import ContentBlock from './ContentBlock.vue';
import { computed } from "vue"
/* export default {
  props: {
    style: Object,
    startIndex: Number,
    contentData: Array,
  },
  components: {
    ContentBlock,
  },
  computed: {
    rowHeight() {
      return this.style.height / 4;
    },
  }
} */

const props = defineProps({
  style: Object,
  startIndex: Number,
  contentData: Array,
})

const rowHeight=computed(()=>{
  return props.style.height / 4;
})
</script>

<template>
  <div :style=props.style>
    <div v-for="(_, idx) in props.contentData.length" :key=idx>
      <ContentBlock v-if="props.contentData[idx].zoom != 0"
        :style="{ top: rowHeight * idx, width: props.style.width, height: rowHeight * (props.contentData[idx].zoom ?? 1) }"
        :index=props.startIndex + idx :title=props.contentData[idx].title>
        <component :is=props.contentData[idx].obj />
      </ContentBlock>
    </div>
  </div>
</template>

<style></style>