<template>
  <div>
    <div class="mt-8">
      <div class="flex">
        <div class="flex" v-if="interfaceType === 'SYSTEM' && isAdmin(role)">
          <Select
            v-model:value="selectTenant"
            allowClear
            @change="onSelect"
            style="width: 150px"
            placeholder="请选择租户"
            :options="selectOptions"
            show-search
            :filter-option="filterOption"
          />
          <Select
            v-model:value="selectSysTenant"
            allowClear
            @change="onSelctTenant"
            style="width: 150px; margin-left: 10px"
            v-if="selectTenantOptions.length > 0"
            placeholder="请选择租户"
            :options="selectTenantOptions"
            show-search
            :filter-option="filterTenantOption"
          />
        </div>
        <Button
          :disabled="interfaceType === 'SYSTEM' && isAdmin(role) ? testDisabled : false"
          @click="handleTest(isSingleClickText)"
          type="primary"
          >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }}
        </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">
            <div
              v-if="
                data?.type === RequestBodyTypeEnum.XWWW ||
                data?.type === RequestBodyTypeEnum.FORMDATA
              "
            >
              <TestBodyCellTable :token="getToken" ref="testEditCellTableRef" />
            </div>
            <div style="width: 30vw" v-else-if="data?.type === RequestBodyTypeEnum.JSON">
              <JsonEditor :showBtn="false" style="width: 35vw; height: 30vh" ref="jsonEditorRef" />
            </div>
            <div style="width: 30vw" v-else-if="data?.type === RequestBodyTypeEnum.XML">
              <AceTypeXmlEditor ref="aceEditorRef" :scriptType="OnlineEditorTypeEnum.XML" />
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="testRequest">
  import { ref, nextTick, onMounted } from 'vue';
  import { Button } from 'ant-design-vue';
  import TestBodyCellTable from '../paramsTest/testEditParamsCellTable.vue';
  import moment from 'moment';
  import { useUtils } from '../../../hooks/useUtils';
  import JsonEditor from '../../SimpleRequest/components/jsonEditor.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getTenantAllPageLists, getTenantPageList } from '/@/api/tenant/tenantApi';
  import { selectType } from '../../../config/types';
  import { Select } from 'ant-design-vue';
  import { getUserToken } from '/@/api/sys/user';
  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';
  import { isAdmin } from '/@/enums/roleEnum';
  import AceTypeXmlEditor from '../../SimpleRequest/components/aceEditor.vue';
  import {
    OnlineEditorTypeEnum,
    RequestBodyTypeEnum,
    TableDefaultTypeEnum,
  } from '../../../config/enum';

  const userInfo: any = getAuthCache(USER_INFO_KEY);

  const role: string = userInfo?.roles[0];

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

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

  onMounted(async () => {
    if (isAdmin(role)) {
      const res = await getTenantPageList();
      selectOptions.value = res.map((m) => ({ label: m.name, value: m.tenantId }));
    } else {
      //租户
      const { token } = await getUserToken(userInfo?.userId);
      getToken.value = token;
    }
  });

  const selectOptions = ref<selectType[]>([]);

  const selectTenantOptions = ref<selectType[]>([]);

  const { createMessage } = useMessage();

  const showTestEditCell = ref(false);

  const testDisabled = ref(true);

  const excuteData = ref({});

  const selectTenant = ref(undefined);

  const selectSysTenant = ref(undefined);

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

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

  const aceEditorRef = ref<InstanceType<typeof AceTypeXmlEditor>>();

  const testResult = ref('');

  const { getMultipleKeys } = useUtils();

  const getToken = ref('');

  const filterOption = (input: string, option: any) => {
    return option.label.includes(input);
  };

  const filterTenantOption = (input: string, option: any) => {
    return option.label.includes(input);
  };

  const onSelect = async (e) => {
    if (e) {
      testDisabled.value = false;
    } else {
      testDisabled.value = true;
    }
    selectSysTenant.value = undefined;
    const rest = (await getTenantAllPageLists(e)) as any;
    selectTenantOptions.value = rest?.map((m) => ({ label: m.realName, value: m.id }));
  };

  const onSelctTenant = async (e) => {
    if (e) {
      testDisabled.value = false;
    } else {
      testDisabled.value = true;
    }
    const { token } = await getUserToken(e);
    getToken.value = token;
  };

  const isSingleClickText = ref('open');

  const handleTest = (o) => {
    if (isAdmin(role)) {
      if (!selectTenant.value || !selectSysTenant.value) {
        createMessage.error('请选择租户或者租户管理员');
        throw Error('请选择租户或者租户管理员');
      }
    }
    if (o === 'open') {
      showTestEditCell.value = true;
      emits('testBodyInterface');
      getValue();
      isSingleClickText.value = 'close';
    } else {
      isSingleClickText.value = 'open';
      onCloseTest();
    }
  };

  const getValue = async () => {
    await nextTick();
    await nextTick(() => {
      if (
        props.data?.type === RequestBodyTypeEnum.XWWW ||
        props.data?.type === RequestBodyTypeEnum.FORMDATA
      ) {
        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);
      } else if (props.data?.type === RequestBodyTypeEnum.JSON) {
        jsonEditorRef.value?.setJsonValue(props.data?.list);
      } else if (props.data?.type === RequestBodyTypeEnum.XML) {
        aceEditorRef?.value?.setValue(props.data?.list);
      }
    });
  };

  //测试表格里的数据转化为 key value 数组对象形式
  //TODO:待优化这里的TS类型
  const getTestTableKeyValue = () => {
    //把日期拆分成多个
    const keyValueList: any = [];
    testEditCellTableRef.value?.getValue()?.forEach((item: any) => {
      const splitDateKey =
        item?.key === TableDefaultTypeEnum.DATERANGE ? item?.value?.split(',') : [];
      const splitDateValue = item?.key === TableDefaultTypeEnum.DATERANGE ? 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 !== TableDefaultTypeEnum.DATERANGE)
      .map((it: any) => {
        const value = it?.key === TableDefaultTypeEnum.SCOPE ? it?.keyValue : it?.value;
        const key = it?.key === TableDefaultTypeEnum.SCOPE ? it?.value : it?.key;
        return {
          key,
          value,
          required: it.required,
        };
      });
  };

  //获取数据
  const getTestValue = () => {
    let params: any = {};
    if (
      props.data?.type === RequestBodyTypeEnum.XWWW ||
      props.data?.type === RequestBodyTypeEnum.FORMDATA
    ) {
      const getTable = getTestTableKeyValue();
      const hasRequired = getTable?.some((it) => it.required === true && !it.value);
      if (hasRequired) {
        createMessage.error('参数不能为空');
        throw new Error('参数不能为空');
      }
      getTable?.map((it) => (params[it.key!] = it.value!));
    } else if (props.data?.type === RequestBodyTypeEnum.JSON) {
      params = jsonEditorRef.value?.getJsonValue();
    } else if (props.data?.type === RequestBodyTypeEnum.XML) {
      params = aceEditorRef?.value?.getValue();
    }
    if (params['keys']) {
      Reflect.set(params, 'keys', params['keys'].join(','));
    }
    excuteData.value = {
      params,
      token: getToken.value,
      type: props.data?.type,
    };
    return excuteData.value;
  };

  //设置数据
  const setValue = () => {
    isSingleClickText.value = 'open';
    showTestEditCell.value = false;
    testResult.value = '';
    selectTenant.value = undefined;
    selectSysTenant.value = undefined;
    selectTenantOptions.value = [];
  };

  const onCloseTest = () => {
    showTestEditCell.value = false;
    emits('closeTest');
  };

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

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