<template>
  <div class="elem-pane-box">
    <div class="elem-body" :style="bodyStyle">
      <!-- 子元件区域 -->
      <div class="elem-pane-box-elements">
        <box-element-preview
          v-for="element in data.elements"
          :key="element.id"
          :data="element"
          class="elem-pane-box-element"
        ></box-element-preview>
      </div>
    </div>
  </div>
</template>

<script>
import BoxElementPreview from "../../components/BoxElementPreview.vue";

export default {
  name: "ElemPaneBox",
  components: {
    BoxElementPreview,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      bodyStyle: {},
    };
  },
  mounted() {
    let bodyStyle = {
      height: this.data.h + "px",
    };
    if (this.data.borderStyle !== "none") {
      bodyStyle.border = `1px ${this.data.borderStyle} #333`;
    }
    this.bodyStyle = bodyStyle;
  },
  methods: {},
};
</script>
