<template>
  <div>
    <BasicForm @register="register">
      <template #inputParamSlot>
        <div>
          <template v-for="(item, index) in inputParamData" :key="item">
            <span style="display: none">{{ item }}</span>
            <InputParamItem
              :title="item.name"
              :item="item"
              class="mt-4"
              :index="index"
              :ref="dynamicBindRef.inputParamItemRef"
              @delete="deleteInParItem"
              @edit="editInParItem"
            />
          </template>
          <div style="display: flex" class="mt-2">
            <span style="color: #0170cc; cursor: pointer">+</span>
            <span style="color: #0170cc; cursor: pointer" @click="handleAddInParam">增加参数</span>
          </div>
        </div>
      </template>
      <template #outputParamSlot>
        <div>
          <template v-for="(item, index) in outputParamData" :key="item">
            <span style="display: none">{{ item }}</span>
            <InputParamItem
              :title="item.name"
              :item="item"
              class="mt-4"
              :index="index"
              :ref="dynamicBindRef.outputParamItemRef"
              @delete="deleteOutParItem"
              @edit="editOutParItem"
            />
          </template>
          <div style="display: flex" class="mt-2">
            <span style="color: #0170cc; cursor: pointer">+</span>
            <span style="color: #0170cc; cursor: pointer" @click="handleAddOutParam">增加参数</span>
          </div>
        </div>
      </template>
    </BasicForm>
    <AddParamsModal @register="registerModal" @data="getData" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { serviceSchemas } from './config';
  import { useModal } from '/@/components/Modal';
  import InputParamItem from './components/InputParamItem.vue';
  import AddParamsModal from './components/AddParamsModal.vue';
  import { buildUUID } from '/@/utils/uuid';

  const inputParamData: any = ref([]);
  const outputParamData: any = ref([]);
  const dynamicBindRef = {
    inputParamItemRef: ref([]),
    outputParamItemRef: ref([]),
  };
  const [registerModal, { openModal }] = useModal();

  const [register, { validate, setFieldsValue, resetFields }] = useForm({
    labelWidth: 100,
    schemas: serviceSchemas,
    actionColOptions: {
      span: 14,
    },
    showResetButton: false,
    submitOnReset: false,
    showActionButtonGroup: false,
  });

  const getData = (d, f) => {
    if (f == 'input') {
      if (d.id !== null) {
        const findIndex = unref(inputParamData).findIndex((f) => f.id == d.id);
        if (findIndex !== -1) unref(inputParamData).splice(findIndex, 1, d);
      } else {
        unref(inputParamData).push({ ...d, id: buildUUID() });
      }
    } else {
      if (d.id !== null) {
        const findIndex = unref(outputParamData).findIndex((f) => f.id == d.id);
        if (findIndex !== -1) unref(outputParamData).splice(findIndex, 1, d);
      } else {
        unref(outputParamData).push({ ...d, id: buildUUID() });
      }
    }
  };

  const handleAddInParam = () => {
    openModal(true, {
      isUpdate: true,
      flag: 'input',
      excludeStruct: false,
    });
  };
  const handleAddOutParam = () => {
    openModal(true, {
      isUpdate: true,
      flag: 'output',
      excludeStruct: false,
    });
  };

  const deleteInParItem = (index) => {
    unref(inputParamData).splice(index, 1);
  };
  const editInParItem = (item) => {
    openModal(true, {
      isUpdate: false,
      record: item,
      flag: 'input',
      excludeStruct: false,
    });
  };
  const deleteOutParItem = (index) => {
    unref(outputParamData).splice(index, 1);
  };
  const editOutParItem = (item) => {
    openModal(true, {
      isUpdate: false,
      record: item,
      flag: 'output',
      excludeStruct: false,
    });
  };

  //回显数据
  const setFormData = (v) => {
    setFieldsValue(v[0]);
    const { inputParams, outputParams } = v[0];
    if (outputParams !== undefined) {
      outputParamData.value = [...new Array(outputParams.length).keys()];
      outputParamData.value = outputParams;
    }
    if (inputParams !== undefined) {
      inputParamData.value = [...new Array(inputParams.length).keys()];
      inputParamData.value = inputParams;
    }
  };
  const getInputStructList = () => {
    const val = unref(dynamicBindRef.inputParamItemRef)?.map((item: any) => item.getFormData());
    return val;
  };
  const getOutputStructList = () => {
    const val = unref(dynamicBindRef.outputParamItemRef)?.map((item: any) => item.getFormData());
    return val;
  };

  //获取数据
  async function getFormData() {
    const values = await validate();
    if (!values) return;
    const inputParams = getInputStructList();
    const outputParams = getOutputStructList();
    const { inputParam, outputParam, ...value } = values;
    console.log(outputParam);
    console.log(inputParam);
    return {
      ...value,
      ...{ inputParams },
      ...{ outputParams },
    };
  }
  //清空数据
  const resetFormData = () => {
    resetFields();
    inputParamData.value = [];
    outputParamData.value = [];
  };

  defineExpose({
    setFormData,
    resetFormData,
    getFormData,
  });
</script>
<style lang="less" scoped></style>