<script lang="ts" setup>
import type { PropType } from 'vue';

import type { IVFormComponent } from '../types';

import { cloneDeep } from '@vben/utils';

import { Form } from 'ant-design-vue';
import Draggable from 'vuedraggable';

import { useFormDesignState } from '../hooks/useFormDesignState';
import formEditItem from './form-edit-item.vue';

defineProps({
  formConfigSelect: {
    type: Object as PropType<IVFormComponent>,
    required: true,
  },
});

const emit = defineEmits(['change']);

const { formConfig } = useFormDesignState();

const handleMoveAdd = ({ newIndex }: any) => {
  formConfig.value.schemas = formConfig.value.schemas || [];

  const schemas = formConfig.value.schemas;
  schemas[newIndex] = cloneDeep(schemas[newIndex]) as IVFormComponent;
  emit('change', schemas[newIndex]);
};

/**
 * 拖拽开始事件
 * @param e {Object} 事件对象
 */
const handleDragStart = (e: any) => {
  emit('change', formConfig.value.schemas[e.oldIndex]);
};
</script>
<template>
  <div class="form-edit">
    <div class="form-edit-container">
      <div v-if="formConfig.schemas.length === 0" class="form-edit-empty">
        表单未添加组件
      </div>
      <Form
        label-align="right"
        :label-col="{
          style: { width: `${formConfig.config.commonConfig.labelWidth}px` },
        }"
      >
        <div class="form-edit-list">
          <Draggable
            class="grid items-start"
            group="form-draggable"
            :class="formConfig.config.wrapperClass"
            :component-data="{
              name: 'fade',
              tag: 'div',
              type: 'transition-group',
            }"
            ghost-class="ghost"
            :animation="180"
            handle=".drag-widget"
            v-model="formConfig.schemas"
            item-key="key"
            @add="handleMoveAdd"
            @start="handleDragStart"
          >
            <template #item="{ element, index }">
              <formEditItem
                :key="index"
                :schema="element"
                :form-config-select="formConfigSelect"
              />
            </template>
          </Draggable>
        </div>
      </Form>
    </div>
  </div>
</template>

<style scoped lang="less">
.form-edit {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;

  &-container {
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
  }

  &-list {
    height: 100%;
    min-height: calc(100vh - 228px);

    & .ghost {
      background: #f56c6c;
      border: 2px solid #f56c6c;
      outline-width: 0;
      height: 3px;
      box-sizing: border-box;
      font-size: 0;
      content: '';
      overflow: hidden;
      padding: 0;

      &::after {
        background: #f56c6c;
      }
    }
  }

  &-empty {
    position: absolute;
    text-align: center;
    width: 300px;
    font-size: 20px;
    top: 200px;
    left: 50%;
    margin-left: -150px;
    color: #ccc;
  }
}
</style>
