<template>
  <div class="multiple-layout" :key="layOutData.layoutStyle.height" :style="{height: Math.round(layOutData.layoutStyle.height * ratio) + 'px'}">
    <template v-for="(item,index) in layOutData.list">
      <div 
       class="multiple-item"
       :style="{
        width: Math.round(item.baseStyle.w * ratio) + 'px',
        height: Math.round(layOutData.layoutStyle.height * ratio) + 'px',
        zIndex: currentIndex == index?1:'auto'
       }">
        <singleLayout v-bind="$attrs" v-on="$listeners" :layOutData="item" :componentList="item.componentList" :parent-l="item.baseStyle.l" :ratio="ratio" :recordId="recordId" :mode="mode"></singleLayout>
      </div>
    </template>
  </div>
</template>

<script>
import multipleLayoutJs from "./multipleLayout.js";
export default multipleLayoutJs;
</script>

<style lang="scss" scoped>
@import "multipleLayout";
</style>