<template>
  <div>
    <BasicForm @register="register">
      <template #outputParamSlot>
        <div>
          <template v-for="(item, index) in outputParamData" :key="item">
            <span style="display: none">{{ item + index }}</span>
            <InputParamItem
              :title="item.name"
              :item="item"
              class="mt-4"
              :index="item.id"
              :ref="dynamicBindRef.outputParamItemRef"
              @delete="deleteOutParItem"
              @edit="editOutParItem"
            />
          </template>
          <div style="display: flex" :class="{ 'mt-2': outputParamData.length > 0 }">
            <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 { attrSchemas } from './config';
  import { useModal } from '/@/components/Modal';
  import InputParamItem from './components/InputParamItem.vue';
  import AddParamsModal from './components/AddParamsModal.vue';
  import { validateValueStruct } from '../hook/useValidateParital';
  import { useChangeTypeGetTypeForm } from '../hook/useTypeGetForm';
  import { buildUUID } from '/@/utils/uuid';

  const outputParamData: any = ref([]);
  const dynamicBindRef = {
    outputParamItemRef: ref([]),
  };
  const [registerModal, { openModal }] = useModal();
  const [register, { validate, setFieldsValue, resetFields }] = useForm({
    labelWidth: 100,
    schemas: attrSchemas,
    actionColOptions: {
      span: 14,
    },
    showResetButton: false,
    submitOnReset: false,
    showActionButtonGroup: false,
  });
  const getData = (d, f) => {
    if (f == 'output') {
      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 handleAddOutParam = () => {
    openModal(true, {
      isUpdate: true,
      flag: 'output',
      excludeStruct: true,
    });
  };

  const deleteOutParItem = (index) => {
    unref(outputParamData).splice(index, 1);
  };

  const editOutParItem = (item) => {
    openModal(true, {
      isUpdate: false,
      record: item,
      flag: 'output',
      excludeStruct: true,
    });
  };

  //回显数据
  const setFormData = (v) => {
    setFieldsValue(v[0]);
    setFieldsValue({
      ...v[0].dataSpecs,
      valueRange: v[0].dataSpecs,
      boolClose:
        v[0].dataSpecsList !== undefined || v[0].dataSpecsList !== null
          ? v[0].dataSpecsList[0].name
          : '',
      boolOpen:
        v[0].dataSpecsList !== undefined || v[0].dataSpecsList !== null
          ? v[0].dataSpecsList[1].name
          : '',
    });
    const { dataSpecsList } = v[0];
    if (dataSpecsList !== undefined) {
      outputParamData.value = [...new Array(dataSpecsList.length).keys()];
      outputParamData.value = dataSpecsList;
    }
  };
  //获取结构体数据
  const getStructList = () => {
    const val = unref(dynamicBindRef.outputParamItemRef)?.map((item: any) => item.getFormData());
    return val;
  };
  const getBoolOrStruct = (T, S, B) => {
    if (T === 'STRUCT') {
      return S;
    } else {
      return B;
    }
  };

  async function getFormData() {
    const values = await validate();
    if (!values) return;
    const dataSpecsList = getStructList();
    if (values.dataType === 'STRUCT') {
      validateValueStruct(dataSpecsList as any);
    }
    const dataSpecs = useChangeTypeGetTypeForm(values.dataType, values);
    const dataSpecsListBool = useChangeTypeGetTypeForm(values.dataType, values);
    const { valueRange = null, step = null, unit = null, outputParam = null, ...value } = values;
    console.log(outputParam);
    console.log(step);
    console.log(unit);
    console.log(valueRange);
    return {
      ...value,
      ...{ dataSpecs },
      ...{
        dataSpecsList: getBoolOrStruct(values.dataType, dataSpecsList, dataSpecsListBool),
      },
    };
  }
  //清空数据
  const resetFormData = () => {
    resetFields();
    outputParamData.value = [];
  };

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