<template>
  <div ref="cms">
    <div
      :class="['lay-wrap', { mobile: mode == 'mobile' }]"
    >
      <div
        class="lay-item"
        v-for="(item, index) in cmsList"
        :key="item.sort"
      >
        <div
          class="layout-set"
          :style="{
            width: item.attributeJson.layoutStyle && item.attributeJson.layoutStyle.widthStyle.type === 2 ? item.attributeJson.layoutStyle.widthStyle.width + '%' : '100%',
            height: item.attributeJson.layoutStyle ? Math.round(item.attributeJson.layoutStyle.height * ratio) + 'px' : 'auto'
          }"
        >
          <singleLayout v-if="item.layoutType === 1" v-bind="$attrs" v-on="$listeners" :layOutData="item.attributeJson" :sort="item.attributeJson.sort" :ratio="ratio" :mode="mode" :recordId="item.recordId"></singleLayout>
          <multipleLayout v-if="item.layoutType === 2" v-bind="$attrs" v-on="$listeners" :layOutData="item.attributeJson" :sort="item.attributeJson.sort" :ratio="ratio" :mode="mode" :recordId="item.recordId"></multipleLayout>
          <customLayout v-if="item.layoutType === 3" v-bind="$attrs" v-on="$listeners" :layOutData="item.attributeJson">
            <template slot="customComponent" slot-scope="scope">
              <slot name="customComponent" :attributeJson="scope.attributeJson"></slot>
            </template>
          </customLayout>
          <tabLayout  v-if="item.layoutType === 4" v-bind="$attrs" v-on="$listeners" :layOutData="item.attributeJson" :sort="item.attributeJson.sort" :ratio="ratio" :mode="mode" :recordId="item.recordId"></tabLayout>
          <slideLayout v-if="item.layoutType === 5" v-bind="$attrs" v-on="$listeners" :layOutData="item.attributeJson" :sort="item.attributeJson.sort" :ratio="ratio" :mode="mode" :recordId="item.recordId"></slideLayout>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cmsJs from "./cms.js";
export default cmsJs;
</script>

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