<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 } from 'vue';
  import { Button } from 'ant-design-vue';
  import { TestEditCellTable } from '../TestEditCellTable/index';
  import { getAllDeviceByOrg } from '/@/api/dataBoard';
  import { getDeviceAttributes } from '/@/api/dataBoard';

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

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

  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();
  };

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

  const handleExcute = async () => {
    const params = testEditCellTableRef.value?.getValue();
    const keys = params?.map((m) => ({ key: m.key, value: m.value }));
    keys?.forEach(async (it: any) => {
      if (it.key === 'organizationId') {
        //获取设备
        const data = await getAllDeviceByOrg(it.value!);
        testResult.value = JSON.stringify(data);
      }
      if (it.key === 'deviceProfileId') {
        //获取属性
        const data = await getDeviceAttributes({ deviceProfileId: it.value! });
        testResult.value = JSON.stringify(data);
      }
    });
  };

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

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