<template>
  <div class="form-widget-container">
    <el-form class="full-height-width widget-form" :label-position="labelPosition" :class="[customClass, layoutType + '-layout']" :size="size" :validate-on-rule-change="false">
      <div v-if="designer.widgetList.length === 0" class="no-widget-hint">{{ i18nt('designer.noWidgetHint') }}</div>

      <draggable
        :list="designer.widgetList"
        v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 300 }"
        handle=".drag-handler"
        @end="onDragEnd"
        @add="onDragAdd"
        @update="onDragUpdate"
        :move="checkMove"
      >
        <transition-group name="fade" tag="div" class="form-widget-list">
          <template v-for="(widget, index) in designer.widgetList">
            <template v-if="'container' === widget.category">
              <component
                :is="getWidgetName(widget)"
                :widget="widget"
                :designer="designer"
                :key="widget.id"
                :parent-list="designer.widgetList"
                :index-of-parent-list="index"
                :parent-widget="null"
              ></component>
            </template>
            <template v-else>
              <component
                :is="getWidgetName(widget)"
                :field="widget"
                :designer="designer"
                :key="widget.id"
                :parent-list="designer.widgetList"
                :index-of-parent-list="index"
                :parent-widget="null"
                :design-state="true"
              ></component>
            </template>
          </template>
        </transition-group>
      </draggable>
    </el-form>
  </div>
</template>

<script>
import Draggable from 'vuedraggable';
import '../../../../components/xform/form-designer/form-widget/container-widget/index';
import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index';
import indexMixin from './indexMixin';

export default {
  name: 'VFormWidget',
  components: {
    Draggable,

    ...FieldComponents
  },
  componentName: 'VFormWidget',
  mixins: [indexMixin],
};
</script>

<style lang="scss" scoped>
.container-scroll-bar {
  ::v-deep .el-scrollbar__wrap,
  ::v-deep .el-scrollbar__view {
    overflow-x: hidden;
  }
}

.form-widget-container {
  padding: 10px;
  background: #f1f2f3;

  overflow-x: hidden;
  overflow-y: auto;

  .el-form.full-height-width {
    height: 100%;
    padding: 3px;
    background: #ffffff;

    .no-widget-hint {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 14px;
      color: #999999;
    }

    .form-widget-list {
      min-height: calc(100vh - 98px);
      padding: 3px;
    }
  }

  .el-form.PC-layout {
    //
  }

  .el-form.Pad-layout {
    margin: 0 auto;
    max-width: 960px;
    border-radius: 15px;
    box-shadow: 0 0 1px 10px #495060;
  }

  .el-form.H5-layout {
    margin: 0 auto;
    width: 500px;
    border-radius: 15px;
    //border-width: 10px;
    box-shadow: 0 0 1px 10px #495060;
  }

  .el-form.widget-form ::v-deep .el-row {
    padding: 2px;
    border: 1px dashed rgba(170, 170, 170, 0.75);
  }
}

.grid-cell {
  min-height: 38px;
  border-right: 1px dotted #cccccc;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
