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

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

  const getRequestBody = reactive({
    content: { json: '', xml: '', radioValue: 'none' },
  });

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

  //获取数据
  const getValue = () => {
    return getRequestBody.content;
  };

  //设置数据
  const setValue = (data) => {
    getRequestBody.content = data;
  };
  defineExpose({
    getValue,
    setValue,
  });
</script>