<template>
  <div>
    <a-radio-group
      v-model:value="getRequestBody.content.requestParamsBodyType"
      @change="handleChange"
    >
      <a-radio v-for="item in RequestBodyTypeEnum" :key="item" :value="item">{{ item }}</a-radio>
    </a-radio-group>
    <div class="mt-3">
      <a-textarea
        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.NONE"
        disabled
        placeholder="该接口没有 Body 体"
      />
      <BodyTable
        ref="bodyCellFormDataTableRef"
        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.FORMDATA"
      />
      <BodyTable
        ref="bodyCellXwwwTableRef"
        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.XWWW"
      />
      <JsonEditor
        :showBtn="false"
        style="width: 35vw; height: 25vh"
        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.JSON"
        ref="jsonEditorRef"
      />
      <AceTypeXmlEditor
        ref="aceEditorRef"
        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.XML"
        :scriptType="OnlineEditorTypeEnum.XML"
      />
    </div>
  </div>
</template>
<script lang="ts" setup name="body">
  import { reactive, ref, nextTick } from 'vue';
  import { RequestBodyTypeEnum } from '../../../config/enum';
  import BodyTable from './paramsTable.vue';
  import { isEmpty } from '/@/utils/is';
  import { useUtils } from '../../../hooks/useUtils';
  import JsonEditor from './jsonEditor.vue';
  import AceTypeXmlEditor from './aceEditor.vue';
  import { OnlineEditorTypeEnum } from '../../../config/enum';

  const getRequestBody = reactive({
    content: {
      requestParamsBodyType: 'none',
      json: '',
      xml: '',
      'form-data': {},
      'x-www-form-urlencoded': {},
    },
  });

  const emits = defineEmits(['resetValue']);

  const { pushObj } = useUtils();

  const bodyCellFormDataTableRef = ref<InstanceType<typeof BodyTable>>();

  const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>();

  const aceEditorRef = ref<InstanceType<typeof AceTypeXmlEditor>>();

  const bodyCellXwwwTableRef = ref<InstanceType<typeof BodyTable>>();

  const handleChange = ({ target }) => {
    const { value } = target;
    getRequestBody.content.requestParamsBodyType = value;
    emits('resetValue', value);
  };

  //获取数据
  const getValue = () => {
    const type = Reflect.get(getRequestBody.content, 'requestParamsBodyType');
    const valuesFormData = bodyCellFormDataTableRef.value?.getValue();
    const valuesXWww = bodyCellXwwwTableRef.value?.getValue();
    const jsonEditorValue = jsonEditorRef.value?.getJsonValue();
    const xmlEditorValue = aceEditorRef.value?.getValue();
    getRequestBody.content[RequestBodyTypeEnum.FORMDATA] = valuesFormData as any;
    getRequestBody.content[RequestBodyTypeEnum.XWWW] = valuesXWww as any;
    getRequestBody.content[RequestBodyTypeEnum.JSON] = jsonEditorValue as any;
    getRequestBody.content[RequestBodyTypeEnum.XML] = xmlEditorValue as any;
    if (type === 'none') getRequestBody.content = {} as any;
    return getRequestBody.content;
  };

  //设置数据
  const setValue = async (data) => {
    if (!data) return;
    const type = data?.requestParamsBodyType;
    getRequestBody.content.requestParamsBodyType = type;
    await nextTick();
    await nextTick();
    bodyCellFormDataTableRef.value?.setValue(
      isEmpty(data) ? [pushObj] : data[RequestBodyTypeEnum.FORMDATA]
    );
    bodyCellXwwwTableRef.value?.setValue(
      isEmpty(data) ? [pushObj] : data[RequestBodyTypeEnum.XWWW]
    );
    jsonEditorRef.value?.setJsonValue(data['json'] || '{}');
    aceEditorRef.value?.setValue(data['xml'] || '');
  };

  //重置数据
  const resetValue = () => {
    for (let i in getRequestBody.content) Reflect.set(getRequestBody.content, i, '');
    getRequestBody.content[RequestBodyTypeEnum.FORMDATA] = {};
    getRequestBody.content[RequestBodyTypeEnum.XWWW] = {};
    getRequestBody.content.requestParamsBodyType = RequestBodyTypeEnum.NONE;
    nextTick(() => {
      bodyCellFormDataTableRef?.value?.resetValue();
      bodyCellXwwwTableRef?.value?.resetValue();
    });
  };
  defineExpose({
    getValue,
    setValue,
    resetValue,
  });
</script>