<template>
  <div style="height: 100%">
    <div class="flex-grow-1">
      <div class="scroll-area">
        <div
          :style="{
            'background-color': formBody.backgroundcolor,
            'min-height': '100%',
            'font-family': formBody.fontType,
            padding: formBody.PaddingTB + 'px 0',
          }"
        >
          <div
            :style="{
              'max-width': formBody.maxWidth + 'px',
              margin: formBody.margain,
              border:
                formBody.borderWidth +
                'px ' +
                formBody.borderType +
                ' ' +
                formBody.borderColor,
              height: '100%',
              'background-color': formBody.innerBackground,
            }"
          >
            <div
              v-for="(widget, index) in widgetType"
              :style="{
                'padding-top': widget.style.padding.top + 'px',
                'padding-bottom': widget.style.padding.bottom + 'px',
                'padding-left': widget.style.padding.left + 'px',
                'padding-right': widget.style.padding.right + 'px',
                'background-color': widget.style.backgroundcolor,
              }"
            >
              <get_widget
                :component-name="widget.type"
                :isRender="true"
                :widget="widget"
                :fileUploadData="fileUploadData"
                v-on:change="$emit('changePost', $event)"
                v-on:submit="$emit('submitPost')"
              ></get_widget>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import get_widget from "@/temp/webform/MainFileImports/get_widget";
export default {
  name: "renderWebForm",
  components: { get_widget },
  props: {
    widgetType: Array,
    formBody: Object,
    fileUploadData: Array,
  },
};
</script>

<style></style>
