<template>
  <div v-if="showTestFlag" class="mt-8">
    <div>
      <a-row>
        <Button @click="handleExcute" type="primary"> 执行测试请求 </Button>
      </a-row>
      <div v-if="isShowTestResult" class="flex justify-between">
        <a-row class="mt-8" type="flex" justify="center" align="middle">
          <a-col :span="3"> 测试地址 </a-col>
          <a-col :span="21">
            <Tag color="blue" style="width: 31.6vw; white-space: normal; height: auto">
              {{ apiUrl?.split('{?')[0] }}
            </Tag>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="mt-8">
      <div class="flex">
        <div>
          <p>过滤器函数编写：</p>
          <div class="w-90">
            <AceTypeIsJsEditor
              :restData="getRestData"
              @changeAceContent="onHandleAceContent"
              ref="aceTypeIsJsEditorRef"
            />
          </div>
        </div>
        <div><a-divider type="vertical" class="divider-color" /></div>
        <div class="flex flex-col ml-8">
          <div>
            <p>接口返回数据(res)：</p>
            <div>
              <JsonEditor class="w-100 h-100" :showBtn="true" ref="jsonEditorRef" />
            </div>
          </div>
          <div class="mt-4">
            <p>过滤器结果：</p>
            <div>
              <JsonFilterEditor class="w-100 h-100" :showBtn="true" ref="jsonEditorFilterRef" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="testRequest">
  import { nextTick, ref, reactive, onUnmounted, unref } from 'vue';
  import { Button } from 'ant-design-vue';
  import { otherHttp } from '/@/utils/http/axios';
  import { useWebSocket } from '@vueuse/core';
  import { useUtils } from '../../../hooks/useUtils';
  import JsonEditor from '../../SimpleRequest/components/jsonEditor.vue';
  import JsonFilterEditor from '../../SimpleRequest/components/jsonEditor.vue';
  import AceTypeIsJsEditor from '../../SimpleRequest/components/aceEditor.vue';
  import { Tag } from 'ant-design-vue';
  import { useThrottleFn } from '@vueuse/shared';
  import { RequestMethodTypeEnum } from '../../../config/enum';

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

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

  const showTestFlag = ref(false);

  const openFilterFlag = ref(false);

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

  const jsonEditorFilterRef = ref<InstanceType<typeof JsonFilterEditor>>();

  const aceTypeIsJsEditorRef = ref<InstanceType<typeof AceTypeIsJsEditor>>();

  const getRestData: any = ref(null);

  const socketUrls = ref('');

  const socketMessage: any = reactive({
    server: ``,
    sendValue: {
      tsSubCmds: [],
    },
  });

  const { staticWebSocketParams, commonRest } = useUtils();

  const onHandleAceContent = (resp) => {
    commonRest(resp, jsonEditorFilterRef.value?.setJsonValue);
  };

  //格式化替换像"http:xxxx/api/xx/{xx}/{xx}/{xx}这种格式"
  String.prototype.restfulFormat = function (replacements) {
    var formatString = function (str, replacements) {
      replacements =
        typeof replacements === 'object' ? replacements : Array.prototype.slice.call(arguments, 1);
      return str.replace(/\{\{|\}\}|\{(\w+)\}/g, function (m, n) {
        if (m == '{{') {
          return '{';
        }
        if (m == '}}') {
          return '}';
        }
        return replacements[n];
      });
    };
    replacements =
      typeof replacements === 'object' ? replacements : Array.prototype.slice.call(arguments, 0);
    return formatString(this, replacements);
  };

  const isWebSocketType = ref('');

  const isToken = ref('');

  const apiUrl = ref('');

  const isPostToken = ref('');

  const isShowTestResult = ref(false);

  const postBodyType = ref('');

  //定义一个全局的关闭websocket变量 fix: 修复切换产品切换属性websocket又新建连接，造成上一个ws和这一个ws交替接受信息问题
  const closeSocket = ref<Nullable<Fn>>(null);

  //执行测试接口
  const handleExcute = () => {
    emits('emitExcute');
    useThrottle();
    isShowTestResult.value = true;
    nextTick(() => {
      jsonEditorRef.value?.setJsonValue('测试结果为');
      jsonEditorFilterRef.value?.setJsonValue('过滤结果为');
    });
  };

  const useThrottle = useThrottleFn(() => {
    getValue();
  }, 2000);

  const getValue = async () => {
    await nextTick();
    //获取Params和Header和Body
    const Objects = props.data;
    const apiType = Objects?.apiType;
    const url = Objects?.apiGetUrl;
    const headers = Objects?.Header?.params;
    const params = Objects?.Params?.params;
    const body = Objects?.Body?.params;
    isWebSocketType.value = Objects?.method;
    isToken.value = Objects?.Params?.token;
    isPostToken.value = Objects?.Body?.token;
    postBodyType.value = Objects?.Body?.type;
    apiUrl.value = url?.restfulFormat(params);
    if (isWebSocketType.value === RequestMethodTypeEnum.WEBSOCKET) {
      socketUrls.value = url;
      socketMessage.server = `${socketUrls.value}?token=${isToken.value}`;
      const list = Object.values(params);
      const isEmpty = list.some((it) => it === '' || null || undefined);
      if (!isEmpty) {
        //执行ws close方法 关闭上一个
        unref(closeSocket)?.();
        websocketRequest(params);
      } else {
        resetValue(false);
      }
    } else {
      try {
        const resp = await otherHttpRequest(
          apiType,
          apiUrl.value?.split('{?')[0],
          headers,
          params,
          body,
          isToken.value,
          isPostToken.value,
          postBodyType.value
        );
        if (!resp) return;
        getRestData.value = resp;
        commonRest(resp, jsonEditorRef.value?.setJsonValue);
      } catch (e) {
        console.log(e);
        if (Object.prototype.toString.call(e) === '[object Object]') {
          jsonEditorRef.value?.setJsonValue(e);
        } else {
          jsonEditorRef.value?.setJsonValue('404未找到资源');
        }
      }
    }
  };

  //ws请求
  const websocketRequest = (params, destroy = false) => {
    try {
      let webSocketParams: any = null;
      if (Object.prototype.toString.call(params) === '[object Object]') {
        const { entityId, keys } = params;
        webSocketParams = {
          entityId,
          keys,
          ...staticWebSocketParams,
        };
      }
      socketMessage.sendValue.tsSubCmds = [webSocketParams];
      const { send, close } = useWebSocket(socketMessage.server, {
        onConnected() {
          send(JSON.stringify(socketMessage.sendValue));
        },
        onMessage(_, e) {
          const rest = JSON.parse(e.data);
          getRestData.value = rest;
          commonRest(rest, jsonEditorRef.value?.setJsonValue);
        },
        onDisconnected() {
          close();
        },
        onError() {},
      });
      closeSocket.value = close;
      if (destroy) close();
    } finally {
    }
  };

  onUnmounted(() => {
    if (isWebSocketType.value === RequestMethodTypeEnum.WEBSOCKET) {
      websocketRequest(null, true);
    }
  });

  //http请求
  const otherHttpRequest = async (
    apiType,
    apiUrl,
    headers = {},
    params = {},
    body,
    token,
    postToken,
    postBodyType
  ) => {
    const { convertObj, commonHttpParams, commonParams } = useUtils();
    switch (apiType) {
      case 'GET':
        return await otherHttp.get(
          {
            url: apiUrl,
            params,
            headers: commonHttpParams(postToken, token, postBodyType, headers),
          },
          commonParams
        );
      case 'POST':
        return await otherHttp.post(
          {
            url: `${apiUrl}${`?${convertObj(params)}`}`,
            data: body,
            headers: commonHttpParams(postToken, token, postBodyType, headers),
          },
          commonParams
        );
    }
  };

  const resetValue = (flag) => {
    if (flag) {
      showTestFlag.value = false;
      openFilterFlag.value = false;
    }
    nextTick(() => {
      jsonEditorRef.value?.setJsonValue('测试结果为');
      jsonEditorFilterRef.value?.setJsonValue('过滤结果为');
    });
    isWebSocketType.value = RequestMethodTypeEnum.COMMOM;
  };

  const showTest = () => (showTestFlag.value = true);

  const getFilterValue = () => {
    return aceTypeIsJsEditorRef?.value?.getValue();
  };

  //编辑回显过滤器函数的内容
  const editSetFilterValue = async (filterValue) => {
    await nextTick();
    aceTypeIsJsEditorRef?.value?.setValue(filterValue);
  };

  defineExpose({
    resetValue,
    showTest,
    getFilterValue,
    editSetFilterValue,
  });
</script>

<style scoped lang="less">
  :deep(.ant-input-textarea-show-count) {
    width: 30vw;
  }

  .divider-color {
    height: 54rem;
    background-color: #e5e7eb;
    position: relative;
    left: 1rem;
  }
</style>