<script setup lang="ts">
import type { HttpRequestParam } from '../../interface.ts';
import {
  BPM_HTTP_REQUEST_PARAM_TYPES,
  BpmHttpRequestParamTypeEnum,
} from '../../enum.ts';
import { useFormFieldsAndStartUser } from './utils.ts';

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

const props = defineProps({
  header: {
    type: Array as () => HttpRequestParam[],
    required: false,
    default: () => [],
  },
  bind: {
    type: String,
    required: true,
  },
});

// 流程表单字段，发起人字段
const formFieldOptions = useFormFieldsAndStartUser();

/** 监听类型变化，清空值 */
function handleTypeChange(item: HttpRequestParam) {
  // 当类型改变时，清空值
  item.value = '';
}

/** 添加请求配置项 */
function addHttpRequestParam(arr: HttpRequestParam[]) {
  arr.push({
    key: '',
    type: BpmHttpRequestParamTypeEnum.FIXED_VALUE,
    value: '',
  });
}

/** 删除请求配置项 */
function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
  arr.splice(index, 1);
}
</script>

<template>
  <div>
    <a-form v-for="(item, index) in props.header" :key="index" :model="item" layout="inline" class="mb-4px!">
      <a-form-item
        name="key"
      >
        <a-input v-model:value="item.key" style="width: 160px;" />
      </a-form-item>
      <a-form-item name="type">
        <a-select v-model:value="item.type" style="width: 160px;" :options="BPM_HTTP_REQUEST_PARAM_TYPES" @change="handleTypeChange(item)" />
      </a-form-item>
      <a-form-item
        v-if="item.type === BpmHttpRequestParamTypeEnum.FIXED_VALUE"
        name="value"
      >
        <a-input v-model:value="item.value" style="width: 200px;" />
      </a-form-item>
      <a-form-item
        v-if="item.type === BpmHttpRequestParamTypeEnum.FROM_FORM"
        name="value"
      >
        <a-select v-model:value="item.value" :options="formFieldOptions" style="width: 200px;" :field-names="{ label: 'title', value: 'field' }" />
      </a-form-item>
      <a-form-item>
        <DeleteOutlined :style="{ fontSize: '18px' }" @click="deleteHttpRequestParam(props.header, index)" />
      </a-form-item>
    </a-form>
    <a-button type="link" @click="addHttpRequestParam(props.header)">
      <PlusOutlined class="mr-5px" />添加一行
    </a-button>
  </div>
</template>

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