<!--
 * @Description: 节点操作复制删除控件
-->
<template>
  <div class="copy-delete-box">
    <a class="copy" :class="activeClass" @click.stop="handleCopy">
      <Icon icon="ant-design:copy-outlined" />
    </a>
    <a class="delete" :class="activeClass" @click.stop="handleDelete">
      <Icon icon="ant-design:delete-outlined" />
    </a>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent } from 'vue';
  import { IVFormComponent } from '../../../typings/v-form-component';
  import { remove } from '../../../utils';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import Icon from '@/components/Icon/Icon.vue';

  export default defineComponent({
    name: 'FormNodeOperate',
    components: {
      Icon,
    },
    props: {
      schema: {
        type: Object,
        default: () => ({}),
      },
      currentItem: {
        type: Object,
        default: () => ({}),
      },
    },
    setup(props) {
      const { formConfig, formDesignMethods } = useFormDesignState();
      const activeClass = computed(() => {
        return props.schema.key === props.currentItem.key ? 'active' : 'unactivated';
      });
      /**
       * 删除当前项
       */
      const handleDelete = () => {
        const traverse = (schemas: IVFormComponent[]) => {
          schemas.some((formItem, index) => {
            const { component, key } = formItem;
            // 处理栅格和标签页布局
            if(['Grid', 'Tabs','Card', 'CardGroup'].includes(component)){
              switch(component){
                case 'Grid':
                case 'Card':
                  formItem.columns?.forEach((item) => traverse(item.children))
                  break;
                case 'Tabs':
                case 'CardGroup':
                  console.log(formItem,'formItem')
                  formItem?.componentProps?.options?.forEach(optionItem => {
                    traverse(optionItem.children)
                  })
                  break;
              }
            }
            if (key === props.currentItem.key) {
              let params: IVFormComponent =
                schemas.length === 1
                  ? { component: '' }
                  : schemas.length - 1 > index
                    ? schemas[index + 1]
                    : schemas[index - 1];
              formDesignMethods.handleSetSelectItem(params);
              remove(schemas, index);
              return true;
            }
          });
        };
        traverse(formConfig.value!.schemas);
      };

      const handleCopy = () => {
        formDesignMethods.handleCopy();
      };
      return { activeClass, handleDelete, handleCopy };
    },
  });
</script>
