<script setup lang="ts">
import HttpRequestBodySetting from './HttpRequestBodySetting.vue';
import HttpRequestHeaderSetting from './HttpRequestHeaderSetting.vue';
import HttpResponseSetting from './HttpResponseSetting.vue';

const props = defineProps({
  setting: {
    type: Object,
    required: true,
  },
  responseEnable: {
    type: Boolean,
    required: true,
  },
  formItemPrefix: {
    type: String,
    required: true,
  },
});
const emit = defineEmits(['update:setting']);
const { setting } = toRefs(props);
watch(
  () => setting,
  (val) => {
    emit('update:setting', val);
  },
);
const formRef = ref<any>();
function validateSetting() {
  return formRef.value.validate();
}
defineExpose({
  validateSetting,
});
</script>

<template>
  <a-form ref="formRef" :model="setting" layout="vertical">
    <a-form-item>
      <a-alert message="仅支持 POST 请求，以请求体方式接收参数" type="warning" show-icon />
    </a-form-item>
    <!-- 请求地址 -->
    <a-form-item
      label="请求地址"
      name="url"
      :rules="{
        required: true,
        message: '请求地址不能为空',
        trigger: ['blur', 'change'],
      }"
    >
      <a-input v-model:value="setting.url" placeholder="请输入请求地址，以https://或者http://开头" />
    </a-form-item>
    <!-- 请求头设置 -->
    <a-form-item label="请求头">
      <HttpRequestHeaderSetting :header="setting.header" :bind="formItemPrefix" />
    </a-form-item>
    <!-- 请求体设置 -->
    <a-form-item label="请求体">
      <HttpRequestBodySetting :body="setting.body" :bind="formItemPrefix" />
    </a-form-item>
    <!-- 返回值设置 -->
    <div v-if="responseEnable">
      <a-form-item label="返回值">
        <a-alert message="通过请求返回值, 可以修改流程表单的值" type="warning" show-icon />
        <HttpResponseSetting class="mt-8px" :response="setting.response" :bind="formItemPrefix" />
      </a-form-item>
    </div>
  </a-form>
</template>

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