<script setup lang="ts">
// import type { HttpRequestParam } from '../../interface.ts';
import { useFormFields } from './utils.ts';

defineOptions({
  name: 'HttpResponseSetting',
});

const props = defineProps({
  response: {
    type: Array as () => Record<string, string>[],
    required: false,
    default: () => [],
  },
  bind: {
    type: String,
    required: true,
  },
});

/** 流程表单字段 */
const formFields = useFormFields();

/** 添加 HTTP 请求返回值设置项 */
function addHttpResponseSetting(responseSetting: Record<string, string>[]) {
  responseSetting.push({
    key: '',
    value: '',
  });
}

/** 删除 HTTP 请求返回值设置项 */
function deleteHttpResponseSetting(responseSetting: Record<string, string>[], index: number) {
  responseSetting.splice(index, 1);
}
</script>

<template>
  <div>
    <a-form v-for="(item, index) in props.response" :key="index" :model="item" class="mb-4px!" layout="inline">
      <a-form-item name="key">
        <a-select v-model:value="item.key" class="w-160px!" placeholder="请选择表单字段" :options="formFields" :field-names="{ label: 'title', value: 'field' }" />
      </a-form-item>
      <a-form-item name="value">
        <a-input v-model:value="item.value" class="w-160px" placeholder="请求返回字段" />
      </a-form-item>
      <a-form-item>
        <DeleteOutlined :style="{ fontSize: '18px' }" @click="deleteHttpResponseSetting(props.response, index)" />
      </a-form-item>
    </a-form>
    <a-button type="link" @click="addHttpResponseSetting(props.response)">
      <PlusOutlined class="mr-5px" />添加一行
    </a-button>
  </div>
</template>

<style scoped>
:deep(.ant-form-item-control) {
  flex: unset !important;
  flex-grow: 1 !important;
}
</style>
