<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 === 'none'"
        disabled
        placeholder="该接口没有 Body 体"
        :rows="2"
      />
      <EditCellTable
        ref="editCellTableRef"
        v-show="
          getRequestBody.content.requestParamsBodyType === 'form-data' ||
          getRequestBody.content.requestParamsBodyType === 'x-www-form-urlencoded'
        "
      />
      <a-textarea
        v-model:value="getRequestBody.content.json"
        v-show="getRequestBody.content.requestParamsBodyType === 'json'"
        placeholder="请输入json"
        :rows="6"
      />
      <a-textarea
        v-model:value="getRequestBody.content.xml"
        v-show="getRequestBody.content.requestParamsBodyType === 'xml'"
        placeholder="请输入xml"
        :rows="6"
      />
    </div>
  </div>
</template>
<script lang="ts" setup name="body">
  import { reactive, ref, nextTick } from 'vue';
  import { RequestBodyTypeEnum } from '../../enum/index';
  import { EditCellTable } from '../EditCellTable/index';

  defineProps({
    method: {
      type: String,
    },
  });

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

  const editCellTableRef = ref<InstanceType<typeof EditCellTable>>();

  const handleChange = ({ target }) => {
    const { value } = target;
    getRequestBody.content.requestParamsBodyType = value;
  };

  //获取数据
  const getValue = () => {
    const type = Reflect.get(getRequestBody.content, 'requestParamsBodyType');
    if (type === 'none') getRequestBody.content = {} as any;
    const values = editCellTableRef.value?.getValue();
    if (type === 'form-data') getRequestBody.content['form-data'] = values as any;
    if (type === 'x-www-form-urlencoded')
      getRequestBody.content['x-www-form-urlencoded'] = values as any;
    return getRequestBody.content;
  };

  //设置数据
  const setValue = (data) => {
    nextTick(() => {
      try {
        if (!data) return;
        const type = data?.requestParamsBodyType;
        getRequestBody.content.requestParamsBodyType = type;
        type === 'none'
          ? null
          : type === 'form-data'
          ? editCellTableRef.value?.setValue(data['form-data'])
          : type === 'x-www-form-urlencoded'
          ? editCellTableRef.value?.setValue(data['x-www-form-urlencoded'])
          : type === 'json'
          ? (getRequestBody.content.json = data['json'])
          : type === 'xml'
          ? (getRequestBody.content.xml = data['xml'])
          : '';
      } finally {
      }
    });
  };

  //重置数据
  const resetValue = () => {
    for (let i in getRequestBody.content) Reflect.set(getRequestBody.content, i, '');
    getRequestBody.content.requestParamsBodyType = 'none';
    nextTick(() => editCellTableRef?.value?.resetValue());
  };
  defineExpose({
    getValue,
    setValue,
    resetValue,
  });
</script>