<template>
  <div>
    <div class="mt-8">
      <div>
        <Button @click="handleTest" type="primary"> 测试接口 </Button>
      </div>
      <div v-if="showTestEditCell" class="mt-8">
        <a-row type="flex" justify="center">
          <a-col :span="3"> 参数设置 </a-col>
          <a-col :span="21">
            <TestBodyCellTable ref="testEditCellTableRef" />
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="mt-8"> </div>
  </div>
</template>
<script lang="ts" setup name="testRequest">
  import { ref, nextTick } from 'vue';
  import { Button } from 'ant-design-vue';
  import TestBodyCellTable from './testEditBodyCellTable.vue';
  import moment from 'moment';
  import { useUtils } from '../../../hooks/useUtils';

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

  const props = defineProps({
    data: {
      type: Object,
    },
  });

  const showTestEditCell = ref(false);

  const excuteData = ref({});

  const testEditCellTableRef = ref<InstanceType<typeof TestBodyCellTable>>();

  const testResult = ref('');

  const { getMultipleKeys } = useUtils();

  const handleTest = () => {
    showTestEditCell.value = true;
    emits('testBodyInterface');
    getValue();
  };

  const getValue = async () => {
    await nextTick();
    await nextTick(() => {
      //拆分"xx,xx,xx"多个
      const getSingleKey = props.data?.list;
      const getMuteKey = props.data?.list?.filter((it: any) => it.key.split(',').length > 1);
      const getMuteKeys = getMultipleKeys(getMuteKey);
      const mergeKeys = [...getSingleKey, ...getMuteKeys]?.filter(
        (it: any) => it.key.split(',').length === 1
      );
      testEditCellTableRef.value?.setTableArray(mergeKeys);
    });
  };

  //测试表格里的数据转化为 key value 数组对象形式
  //TODO:待优化这里的TS类型
  const getTestTableKeyValue = () => {
    //把日期拆分成多个
    const keyValueList: any = [];
    testEditCellTableRef.value?.getValue()?.forEach((item: any) => {
      const splitDateKey = item?.key === 'date_range' ? item?.value?.split(',') : [];
      const splitDateValue = item?.key === 'date_range' ? item?.dateValue : [];
      for (let i in splitDateKey) {
        const obj = {
          key: splitDateKey[i],
          value: moment(splitDateValue[i]).valueOf(),
        };
        keyValueList.push(obj);
      }
    });
    return testEditCellTableRef.value
      ?.getValue()
      .concat(keyValueList)
      .filter((it) => it.key !== 'date_range')
      .map((it: any) => {
        const value =
          it?.key === 'scope'
            ? it?.keyValue
            : it?.key === 'fixed_date'
            ? moment(it?.fixed_date_value).valueOf()
            : it?.value;
        const key = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.value : it?.key;
        return {
          key,
          value,
        };
      });
  };

  //获取数据
  const getTestValue = () => {
    const getTable = getTestTableKeyValue();
    //源地址
    let apiGetUrl = '';
    if (props.data?.originUrlType === 'server_url') {
      const pathUrl = window.location.host;
      const protocol = window.location.protocol;
      apiGetUrl = `${protocol}//${pathUrl}`;
    } else {
      apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`;
    }
    //请求类型
    const apiType = props.data?.requestTypeAndUrl?.requestHttpType;
    //替换key value
    const params: any = {};
    getTable?.map((it) => (params[it.key!] = it.value!));
    excuteData.value = {
      method: props.data?.method,
      apiGetUrl,
      apiType,
      params,
      activeKey: props.data?.activeKey,
    };
    return excuteData.value;
  };

  //设置数据
  const setValue = () => {
    showTestEditCell.value = false;
    testResult.value = '';
  };

  defineExpose({
    setValue,
    handleTest,
    getTestValue,
  });
</script>

<style scoped lang="less"></style>