<!--
/**
 * author: vformAdmin
 * email: vdpadmin@163.com
 * website: https://www.vform666.com
 * date: 2021.08.18
 * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
 */
-->

<template>
  <div>
    <el-form
      :label-position="labelPosition"
      :size="size"
      :class="[customClass]"
      class="render-form"
      :label-width="labelWidth"
      :validate-on-rule-change="false"
      :model="formDataModel"
      ref="renderForm"
      @submit.native.prevent
    >
      <template v-if="showFormContent">
        <template v-for="(widget, index) in widgetList">
          <template v-if="'container' === widget.category">
            <component
              :is="getContainerWidgetName(widget)"
              :widget="widget"
              :field="widget"
              :key="widget.id"
              :parent-list="widgetList"
              :index-of-parent-list="index"
              :parent-widget="null"
            >
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                <slot :name="slot" v-bind="scope" />
              </template>
            </component>
          </template>
          <template v-else>
            <component
              :is="getWidgetName(widget)"
              :field="widget"
              :form-model="formDataModel"
              :designer="null"
              :key="widget.id"
              :parent-list="widgetList"
              :index-of-parent-list="index"
              :parent-widget="null"
            >
              <!-- 递归传递插槽！！！ -->
              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
                <slot :name="slot" v-bind="scope" />
              </template>
            </component>
          </template>
        </template>
      </template>
    </el-form>
    <searchFormDialog
      v-if="showSearchDialog"
      :visiable.sync="showSearchDialog"
      ref="searchFormDialog"
      :option="searchDialogOption"
    ></searchFormDialog>
    <formDialog
      v-if="showFormDialog"
      :visiable.sync="showFormDialog"
      ref="formDialog"
      :option="formDialogOption"
    ></formDialog>
    <importDialog
      v-if="showImportDialog"
      :visiable.sync="showImportDialog"
      :param="importDialogOption"
      :parentTarget="_self"
    ></importDialog>
    <formDrawer
      v-if="showFormDrawer"
      :visiable.sync="showFormDrawer"
      :option="formDrawerOption"
    ></formDrawer>
    <fileReferenceDialog
      v-if="showFileReferenceDialog"
      :visiable.sync="showFileReferenceDialog"
      :option="fileReferenceDialogOption"
    ></fileReferenceDialog>
    <formulaDialog
      v-if="formulaDialogVisible"
      :visiable.sync="formulaDialogVisible"
      :option="formulaDialogOption"
    ></formulaDialog>
    <baseFormulaDialog
      v-if="baseFormulaDialogVisible"
      :visiable.sync="baseFormulaDialogVisible"
      :option="baseFormulaDialogOption"
    ></baseFormulaDialog>
    <template v-if="showQrCanvas">
      <canvas ref="qrCanvas" v-show="false" :width="qrWidth" :height="qrHeight"></canvas>
    </template>
    <univerDialog
      v-if="showUniverDialog"
      :visiable.sync="showUniverDialog"
      :option="univerDialogOption"
    ></univerDialog>
  </div>
</template>

<script>
//import ElForm from 'element-ui/packages/form/src/form.vue'  /* 用于源码调试Element UI */
import "./container-item/index";
import FieldComponents from "../../../components/xform/form-designer/form-widget/field-widget/index";
import indexMixin from "../../../components/xform/form-render/indexMixin";

export default {
  name: "VFormRender",
  components: {
    ...FieldComponents,
    searchFormDialog: () =>
      import(
        "../../../components/xform/form-designer/form-widget/dialog/searchFormDialog.vue"
      ),
    formDialog: () =>
      import("../../../components/xform/form-designer/form-widget/dialog/formDialog.vue"),
    importDialog: () =>
      import(
        "../../../components/xform/form-designer/form-widget/dialog/importDialog.vue"
      ),
    formDrawer: () =>
      import("../../../components/xform/form-designer/form-widget/dialog/formDrawer.vue"),
    fileReferenceDialog: () =>
      import(
        "../../../components/xform/form-designer/form-widget/dialog/fileReferenceDialog.vue"
      )
  },
  mixins: [indexMixin],
};
</script>

<style lang="scss" scoped>
.el-form ::v-deep .el-row {
  // padding: 8px;
}
</style>
