<template>
  <div>
    <div class="mt-8">
      <div class="flex">
        <SelectTenant :interfaceType="interfaceType" @emitToken="onHandleEmitToken" />
        <div v-if="role === 'SYS_ADMIN'" class="ml-2"></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">
            <TestHeaderEditCellTable ref="testEditCellTableRef" />
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="testRequest">
  import { ref, nextTick } from 'vue';
  import { Button } from 'ant-design-vue';
  import TestHeaderEditCellTable from './testEditHeaderCellTable.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
  import { getAuthCache } from '/@/utils/auth';
  import { isAdmin } from '/@/enums/roleEnum';
  import SelectTenant from '../components/selectTenant.vue';

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

  const userInfo: any = getAuthCache(USER_INFO_KEY);

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

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

  const testDisabled = ref(true);

  const { createMessage } = useMessage();

  const showTestEditCell = ref(false);

  const excuteData = ref({});

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

  const testResult = ref('');

  const getToken = ref('');

  const isSingleClickText = ref('open');

  const onHandleEmitToken = (token, flag) => {
    getToken.value = token;
    testDisabled.value = flag;
  };

  const handleTest = (o) => {
    if (o === 'open') {
      showTestEditCell.value = true;
      emits('testHeaderInterface');
      getValue();
      isSingleClickText.value = 'close';
    } else {
      isSingleClickText.value = 'open';
      onCloseTest();
    }
  };

  const getValue = async () => {
    await nextTick();
    await nextTick(() => {
      const getValue = props.data?.list;
      testEditCellTableRef.value?.setTableArray(getValue);
    });
  };

  //测试表格里的数据转化为 key value 数组对象形式
  const getTestTableKeyValue = () => {
    return testEditCellTableRef.value?.getValue();
  };

  //获取数据
  const getTestValue = () => {
    const getTable = getTestTableKeyValue();
    const hasRequired = getTable?.some((it) => it.required === true && !it.value);
    if (hasRequired) {
      createMessage.error('参数不能为空');
      throw new Error('参数不能为空');
    }
    const params: any = {};
    getTable?.map((it: any) => (params[it.key!] = it.value!));
    excuteData.value = {
      params,
      token: getToken.value,
    };
    return excuteData.value;
  };

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

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

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

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