<template>
  <a-col :span="record.itemColumnNumber" :class="{ 'hidden-item': record.hidden }">
    <!-- 表格 table、折叠面板 collapse -->
    <template v-if="['table', 'collapse'].includes(record.componentCode)">
      <div
        class="drag-move-table"
        :class="{ active: record.itemId === formConfig.currentItem.itemId, notip: !record.children || record.children.length == 0 }"
        @click.stop="formDesignMethods.handleSetSelectItem(record)"
      >
        <a-form-item class="table-item">
          <template #label v-if="!props.hidden || record.itemLabelShowFlag">
            <span
              >{{ record.itemLabelName }}
              <a-tooltip v-if="record.itemTipFlag">
                <template #title>{{ record.itemTipContent }}</template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span v-if="formConfig.config.layout == 'vertical'"> :</span></span
            >
            <span class="selected" v-if="showFieldId && record.fieldCode"></span>
          </template>
        </a-form-item>
        <draggable
          tag="div"
          class="draggable-box"
          v-bind="{ group: 'form-draggable', ghostClass: 'moving', animation: 180, handle: '.drag-move' }"
          @add="addGrag"
          itemKey="itemId"
          v-model="record.children"
        >
          <template #item="{ element }">
            <FormLayoutItem
              class="drag-move"
              :key="element.itemId"
              :record="element"
              :disabled="props.disabled"
              :showFieldId="props.showFieldId"
              :isHidden="props.isHidden"
              :isDesgin="props.isDesgin"
              :formRef="props.formRef"
              :current-item="props.currentItem"
            />
          </template>
        </draggable>
        <!-- 操作事件 -->
        <div class="copy-delete-box" v-show="!props.disabled">
          <a class="delete" @click.stop="handleDelete">
            <delete-filled class="delete" />
          </a>
        </div>
      </div>
    </template>
    <!-- 栅格 -->
    <template v-else-if="['grid'].includes(record.componentCode)">
      <div
        class="drag-move-table grid-box"
        :class="{ active: record.itemId === formConfig.currentItem.itemId }"
        @click.stop="handleSelectItem(record)"
      >
        <a-row class="grid-row" :gutter="[record.gutter, record.gutter]">
          <a-col class="grid-col" v-for="(colItem, idnex) in record.children" :key="idnex" :span="colItem.itemColumnNumber || 0">
            <draggable
              tag="div"
              class="draggable-box"
              v-bind="{ group: 'form-draggable', ghostClass: 'moving', animation: 180, handle: '.drag-move' }"
              v-model="colItem.children"
              itemKey="itemId"
              @add="addGrag"
            >
              <template #item="{ element }">
                <FormLayoutItem
                  class="drag-move"
                  :key="element.itemId"
                  :record="element"
                  :disabled="props.disabled"
                  :showFieldId="props.showFieldId"
                  :isHidden="props.isHidden"
                  :isDesgin="props.isDesgin"
                  :formRef="props.formRef"
                  :current-item="props.currentItem"
                />
              </template>
            </draggable>
          </a-col>
        </a-row>
        <!-- 操作事件 -->
        <div class="copy-delete-box" v-show="!props.disabled">
          <a class="delete" @click.stop="handleDelete">
            <delete-filled class="delete" />
          </a>
        </div>
      </div>
    </template>
    <!-- 其他 -->
    <div class="drag-move-box" v-else @click.stop="handleSelectItem" :class="{ active: record.itemId === formConfig.currentItem.itemId }">
      <div class="form-item-box">
        <form-item
          :formConfig="formConfig"
          :hidden="props.isHidden"
          :isDesgin="props.isDesgin"
          :formRef="props.formRef"
          :record="record"
          :showFieldId="props.showFieldId"
          readonly
        ></form-item>
      </div>

      <!-- 操作事件 -->
      <div class="copy-delete-box" v-show="!props.disabled">
        <a class="copy" @click.stop="handleCopy">
          <copy-filled class="copy" />
        </a>
        <a class="delete" @click.stop="handleDelete">
          <delete-filled class="delete" />
        </a>
      </div>
    </div>
  </a-col>
</template>

<script setup name="FormLayoutItem">
import { inject } from 'vue';
import { removeItem } from '../utils/index';
import FormItem from './form-item.vue';
import draggable from 'vuedraggable';

// 表单配置
const formConfig = inject('formConfig');
// 表单操作
const formDesignMethods = inject('formDesignMethods');

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

// 获取 formDesignMethods
const handleSelectItem = () => {
  // 调用 formDesignMethods
  formDesignMethods.handleSetSelectItem(props.record);
};

// 复制
const handleCopy = () => {
  formDesignMethods.handleCopy(props.record);
};

/**
 * 删除当前项
 */
const handleDelete = () => {
  const traverse = formItems => {
    formItems.some((formItem, index) => {
      const { componentCode, itemId } = formItem;
      // 表格布局、折叠面板
      ['table', 'collapse'].includes(componentCode) && formItem.children && traverse(formItem.children);
      if (['grid'].includes(componentCode) && formItem.children?.length) {
        formItem.children.forEach(item => {
          traverse(item.children);
        });
      }
      if (itemId === props.record.itemId) {
        let params =
          formItems.length === 1 ? { componentCode: '' } : formItems.length - 1 > index ? formItems[index + 1] : formItems[index - 1];
        formDesignMethods.handleSetSelectItem(params);
        removeItem(formItems, index);
        return true;
      }
    });
  };
  traverse(formConfig.value.formItems);
};

const addGrag = ({ newIndex }) => {
  if (props.record.componentCode == 'table') {
    formConfig.value.currentItem.itemColumnNumber = 24;
  }
};
</script>

<style scoped lang="less">
.hidden-item {
  display: none;
}

.table-item {
  :deep(.ant-form-item-control) {
    display: none !important;
  }
  margin-bottom: 10px !important;
}

.form-container .form-view-container .form-component-view .form-range .drag-move-table .draggable-box {
  height: calc(100% - 60px) !important;
  padding: 100px 0;
  background-color: #fff;
}
.selected {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: rgba(42, 130, 228, 1);
  border-radius: 50%;
  margin-left: 10px;
}
</style>
