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

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

import { onMounted } from 'vue';

import { Form, Input, InputNumber } from 'ant-design-vue';

import { Icon } from '#/components/icon';

import { useFormDesignState } from '../hooks/useFormDesignState';
import { remove } from '../utils';

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

const { formConfig, formDesignMethods } = useFormDesignState();

/**
 * 删除当前项
 */
const handleDelete = () => {
  const traverse = (schemas: IVFormComponent[]) => {
    schemas.some((formItem, index) => {
      const { key } = formItem;

      if (key === props.formConfigSelect.key) {
        let params: IVFormComponent;
        if (schemas.length === 1) {
          params = { component: '' } as IVFormComponent;
        } else {
          params =
            schemas.length - 1 > index
              ? (schemas[index + 1] as IVFormComponent)
              : (schemas[index - 1] as IVFormComponent);
        }

        // const params =
        //   schemas.length === 1
        //     ? ({ component: '' } as IVFormComponent)
        //     : schemas.length - 1 > index
        //       ? (schemas[index + 1] as IVFormComponent)
        //       : (schemas[index - 1] as IVFormComponent);
        formDesignMethods.handleSetSelectItem(params);
        remove(schemas, index);
        return true;
      }
      return false;
    });
  };
  traverse(formConfig.value!.schemas);
};

onMounted(() => {});
</script>
<template>
  <div
    class="form-edit-item"
    @click="formDesignMethods.handleSetSelectItem(schema)"
  >
    <Form.Item
      class="form-edit-item-view"
      :key="schema.key"
      :label="schema.hideLabel ? '' : schema.label"
      :required="!!schema.rules"
      :class="{
        active: formConfigSelect.key === schema.key,
      }"
    >
      <Input
        :placeholder="schema.componentProps?.placeholder"
        :suffix="schema.componentProps?.suffix"
        :prefix="schema.componentProps?.prefix"
        :show-count="schema.componentProps?.showCount"
        :maxlength="schema.componentProps?.maxlength"
        v-if="schema.component === 'Input'"
      />
      <Input.TextArea
        :placeholder="schema.componentProps?.placeholder"
        :show-count="schema.componentProps?.showCount"
        :maxlength="schema.componentProps?.maxlength"
        v-if="schema.component === 'Textarea'"
      />
      <Input.Password
        :placeholder="schema.componentProps?.placeholder"
        v-if="schema.component === 'InputPassword'"
      />
      <InputNumber
        :placeholder="schema.componentProps?.placeholder"
        :min="schema.componentProps?.min"
        :max="schema.componentProps?.max"
        :step="schema.componentProps?.step"
        style="width: 100%"
        v-if="schema.component === 'InputNumber'"
      />
    </Form.Item>
    <div
      class="form-edit-item-action"
      v-if="formConfigSelect.key === schema.key"
    >
      <div class="svgicon form-edit-item-delete">
        <Icon icon="tdesign:delete" @click="handleDelete" />
      </div>
    </div>
    <div class="form-edit-item-drag" v-if="formConfigSelect.key === schema.key">
      <div class="svgicon form-edit-item-move">
        <Icon icon="tdesign:drag-move" class="drag-widget" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.form-edit-item {
  position: relative;
  width: 100%;

  &-view {
    padding: 10px;
    cursor: pointer;
    margin-bottom: 0;
  }

  & > div.active {
    background: #eef4ff;
  }

  &-action {
    position: absolute;
    top: -12px;
    right: 43px;
  }

  &-drag {
    position: absolute;
    top: -12px;
    right: 10px;
  }

  &-delete {
    border: 1px solid #f64c4c !important;
    color: #f64c4c !important;
  }

  &-move {
    border: 1px solid #90b665 !important;
    color: #90b665 !important;
  }

  .svgicon {
    color: #0960bd;
    border: 1px solid #0960bd;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 10px;
  }
}
</style>
