<template>
  <div class="form-component-view">
    <div class="form-range">
      <!-- 空数据 -->
      <a-empty class="empty-text" v-show="formConfig.formItems?.length === 0" description="从左侧选择控件添加" />
      <!-- 表单数据 -->
      <a-form v-bind="formConfig.config" style="height: 100%">
        <a-row :style="{ height: '100%' }" :gutter="formConfig.config.rowGutter">
          <draggable
            class="draggable-box"
            group="form-draggable"
            ghost-class='draggable-ghost'
            chosen-class='draggable-chosen'
            drag-class='draggable-drag'
            :animation="180"
            :disabled="props.disabled"
            handle=".drag-move"
            v-model="formConfig.formItems"
            itemKey="itemId"
            @start="handleDragStart"
          >
            <template #item="{ element }">
                <form-layout-item
                  :key="element.itemId"
                  class="drag-move"
                  :record="element"
                  :formRef="null"
                  :disabled="props.disabled"
                  :showFieldId="props.showFieldId"
                  :isHidden="props.isHidden"
                  :isDesgin="props.isDesgin"
                  :current-item="formConfig.currentItem"
                ></form-layout-item>
            </template>
          </draggable>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script setup name="FormComponentView">
import { inject, provide } from 'vue';
import draggable from 'vuedraggable';
import FormLayoutItem from './form-layout-item.vue';

const props = defineProps({
  // 是否禁用拖拽
  disabled: {
    type: Boolean,
    default: false,
  },
  // 是否显示选中字段
  showFieldId: {
    type: Boolean,
    default: true
  },
  // 是否能隐藏当前字段
  isHidden: {
    type: Boolean,
    default: true
  },
  // 是否是设计
  isDesgin: {
    type: Boolean,
    default: false
  },
})

const emits = defineEmits(['handleSetSelectItem']);

// 表单配置项
const formConfig = inject('formConfig');
provide('formObj', null);

/**
 * 拖拽开始事件
 * @param e {Object} 事件对象
 */
const handleDragStart = e => {
  emits('handleSetSelectItem', formConfig.value.formItems[e.oldIndex]);
};
</script>

<style></style>
