<template>
  <div class="flex" style="align-items: center">
    <BasicForm @register="registerFormCondition" class="basicStyle" />
    <Tooltip title="移除" class="ml-4">
      <Icon
        icon="fluent:delete-off-20-regular"
        size="20"
        class="mr-2 cursor-pointer"
        @click="deleteConditionForm(index)"
      />
    </Tooltip>
  </div>
</template>

<script lang="ts" setup>
  import { watch, ref, onMounted, inject } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { Icon } from '/@/components/Icon';
  import { Tooltip } from 'ant-design-vue';
  import { isType } from '../config/formatData.ts';
  defineProps({
    index: {
      type: Number,
      required: true,
    },
    conditionScreeningList: {
      type: Array,
      default: () => [],
    },
  });
  const emit = defineEmits(['deleteConditionForm']);
  const operationType = inject('operationType');
  let schemas = ref([]);
  onMounted(() => {
    schemas.value = isType(operationType.value);
  });
  watch(operationType, (newValue) => {
    schemas.value = isType(newValue);
    resetFields();
  });
  const [
    registerFormCondition,
    {
      resetFields,
      appendSchemaByField,
      removeSchemaByFiled,
      getFieldsValue,
      setFieldsValue,
      validate,
    },
  ] = useForm({
    showActionButtonGroup: false,
    labelWidth: 100,
    compact: true,
    schemas,
  });
  const deleteConditionForm = (index: number) => {
    emit('deleteConditionForm', index);
  };
  defineExpose({
    appendSchemaByField,
    removeSchemaByFiled,
    getFieldsValue,
    setFieldsValue,
    validate,
  });
</script>

<style lang="less">
  .basicStyle {
    margin-top: 0.5rem;
    width: 80%;
    border: 1px dashed #d9d9d9;
    padding: 1rem 0 0.5rem;
    border-radius: 0.25rem;
  }
</style>