<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">
            <TestEditCellTable ref="testEditCellTableRef" :method="method" />
          </a-col>
        </a-row>
      </div>
    </div>
    <div v-if="showTestEditCell" class="mt-8">
      <div>
        <Button @click="handleExcute" type="primary"> 执行 </Button>
      </div>
      <div class="mt-8">
        <a-row type="flex" justify="center">
          <a-col :span="3"> 测试结果 </a-col>
          <a-col :span="21">
            <a-textarea
              allow-clear
              show-count
              v-model:value="testResult"
              placeholder="测试结果为："
              :rows="8"
            />
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="testRequest">
  import { ref, nextTick, reactive } from 'vue';
  import { Button } from 'ant-design-vue';
  import { TestEditCellTable } from '../TestEditCellTable/index';
  import { otherHttp } from '/@/utils/http/axios';
  import moment from 'moment';
  import { useWebSocket } from '@vueuse/core';
  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useGlobSetting } from '/@/hooks/setting';

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

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

  const { createMessage } = useMessage();

  const token = getAuthCache(JWT_TOKEN_KEY);

  const { socketUrl } = useGlobSetting();

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

  const showTestEditCell = ref(false);

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

  const testResult = ref('');

  // const testNeedKeys = ['organizationId', 'deviceProfileId', 'entityId', 'keys', 'date'];

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

  //获取多个key
  const getMultipleKeys = (list) => {
    let temps = [];
    list?.forEach((it) => {
      const keys = it.key.split(',');
      const temp = keys.map((item) => {
        let obj: { key: string; value: string } = { key: '', value: '' };
        obj.key = item;
        obj.value = item === 'scope' ? it.value : '';
        return obj;
      });
      temps = temp;
    });
    return temps;
  };

  //获取测试表格的key value 数组对象形式
  const getTestTableKeyValue = () => {
    //把日期拆分成多个
    const keyValueList = [];
    testEditCellTableRef.value?.getValue()?.forEach((item) => {
      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) => {
        const value = it.key === 'scope' || it.key === 'fixed_date' ? it.keyValue : it.value;
        const key = it.key === 'scope' || it.key === 'fixed_date' ? it.value : it.key;
        return {
          key,
          value,
        };
      });
  };

  //格式化"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);
  };

  //TODO 待优化 项目自带第三方请求
  const otherHttpRequest = async (apiType, params = {}, api, joinPrefix = false) => {
    switch (apiType) {
      case 'GET':
        Reflect.deleteProperty(params, 'deviceProfileId');
        Reflect.deleteProperty(params, 'organizationId');
        Reflect.deleteProperty(params, 'entityId');
        Reflect.deleteProperty(params, 'entityType');
        Reflect.deleteProperty(params, 'scope');
        Reflect.deleteProperty(params, 'id');
        Reflect.deleteProperty(params, 'type');
        return await otherHttp.get(
          { url: api, params },
          {
            apiUrl: '',
            joinPrefix,
          }
        );
      case 'POST':
        return await otherHttp.post(
          { url: api, data: params },
          {
            apiUrl: '',
            joinPrefix,
          }
        );
      case 'PUT':
        return await otherHttp.put(
          { url: api, data: params },
          {
            apiUrl: '',
            joinPrefix,
          }
        );
    }
  };

  const getValue = async () => {
    await nextTick();
    await nextTick(() => {
      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);
    });
  };

  //执行测试接口
  const handleExcute = async () => {
    await nextTick();
    await nextTick(async () => {
      const getTable = getTestTableKeyValue();
      const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`;
      const apiType = props.data?.requestTypeAndUrl?.requestHttpType;
      const params: any = {};
      getTable?.map((it) => (params[it.key!] = it.value!));
      if (props.method === '0') {
        //普通请求
        const formatApi = apiGetUrl.restfulFormat(params);
        const rest = await otherHttpRequest(apiType, params, formatApi.split('{?')[0], false);
        testResult.value = JSON.stringify(rest);
      } else if (props.method === '2') {
        //websocket请求
        Reflect.deleteProperty(params, 'deviceProfileId');
        Reflect.deleteProperty(params, 'organizationId');
        Reflect.set(params, 'cmdId', Number(params?.cmdId));
        socketMessage.sendValue.tsSubCmds.push(params);
        const { send, close } = useWebSocket(socketMessage.server, {
          onConnected() {
            send(JSON.stringify(socketMessage.sendValue));
            console.log('建立连接了');
          },
          onMessage(_, e) {
            const { data } = JSON.parse(e.data);
            testResult.value = JSON.stringify(data);
          },
          onDisconnected() {
            console.log('断开连接了');
            close();
          },
          onError() {
            createMessage.error('webSocket连接超时,请联系管理员');
          },
        });
      }
    });
  };

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

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

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