<template>
  <div
    class="single-layout"
    :style="layoutStyle"
  >
    <div
      style="width: 100%; height: 100%"
    >
      <template v-for="(item, index) in layOutData.componentList">
        <component
          :is="item.component"
          :ratio="ratio"
          :attributeJson="item.attributeJson"
          :sortId="item.sort"
          :key="item.sort"
          v-bind="$attrs"
          v-on="$listeners"
          v-if="item.displayType == 1"
          :style="{zIndex: index + 1}"
        >
          <template slot="customComponent" slot-scope="scope">
            <slot name="customComponent" :attributeJson="scope.attributeJson"></slot>
          </template>
        </component>
      </template>
      <!--辅助线END-->
    </div>
  </div>
</template>

<script>
import singleLayoutJs from "./singleLayout.js";
export default singleLayoutJs;
</script>

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