<template>
  <el-row type="flex" align="middle" justify="start" :gutter="8">
    <!--  :setData="()=>{}" 可阻止拖动后打开新窗口   -->
    <draggable :disabled="!labDesign.switch"
               v-model="element.elements" :setData="()=>{}"
               v-bind="{ group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-element' }"
               @add="onDragAdd" style="height: 100%;width: 100%"
    >
      <transition-group name="fade" tag="div">
        <template v-if="element.elements.length === 0">
          <div v-if="labDesign.switch" key="empty" style="height: 100px">拖动组件到此处</div>
        </template>
        <template v-else v-for="(item, itemIndex) in element.elements" >
          <el-col v-if="item.key && item.visible && ['all', 'form'].includes(item.lifeScope)" :key="item.key" :xs="item.xs" :sm="item.sm" :lg="item.lg"
                  @click.native.stop="labDesign.activeChange(item, element.elements, itemIndex)"
                  :class="{ 'active': item.key === labDesign.activity.key, 'drag-element':labDesign.switch }">
            <el-form-item :label="(item.level > 1 || item.labelWidth === '0') ? '' : item.label"
                          :label-width="item.labelWidth" :required="item.needValue">
              <lab-element :element="item" :elements="element.elements" :index="itemIndex" :model-data="modelData" />
            </el-form-item>
          </el-col>
        </template>
      </transition-group>
    </draggable>
  </el-row>
</template>

<script>
import LabBase from "../../mixins/LabBase";
import LabDrag from "../../mixins/LabDrag";

export default {
  name: "LabFormItem",
  mixins: [ LabBase,LabDrag ],
}
</script>

<style scoped>

</style>
