<template>
  
  <PageWrapper contentFullHeight="true" contentClass="flex" style="height: 100%; overflow: none">
    <a-row :gutter="10" style="background: #d9d9d9; padding:10px;width: 99%;">
      <a-col :span="8" style="background: #d9d9d9">
        <a-card style="margin: 0px" title="接口列表">
         
          <div style="font-size: 15px; overflow-y: auto; height: calc(90vh - 100px)">
            <a-tree ref="treeRef"  :tree-data="treeApiData" :showLine="true"
              v-model:expandedKeys="expandedKeys"
              v-model:selectedKeys="selectedKeys"
              @select="clickNode"
            >
            </a-tree>
        </div>
        </a-card>
      </a-col>
      <a-col :span="16" style="background: #d9d9d9">
        <a-card style="margin:0px" title="信息列表">
          <template #extra><a href="#" v-if="dataList.length==0&&curApiId" @click="handlePullData">抓取</a></template>
          <div style="font-size: 15px; overflow-y: auto; height: calc(90vh - 100px)">
            <a-table :dataSource="dataList" :columns="columns" :pagination="false" :scroll="{y:'90%'}"/>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </PageWrapper>

</template>

<script lang="ts" setup>

    import {ref,watch} from 'vue';
    import {defHttp} from '/@/utils/http/axios';
    import {pullDataFromAPI} from '../WbCompanyThirdApi.api';

    const companyInfo = ref({})
    const expandedKeys = ref<string[]>(['0-0']);
    const selectedKeys = ref([]);
    const treeRef = ref();

    const treeApiData = ref([])
    const dataList = ref([])

    const curApiId = ref()

    const columns = ref([
      {title: '属性KEY',dataIndex: 'attrKey',key: 'attrKey',width:120},
      {title: '属性名称',dataIndex: 'attrName',key: 'attrName',width:120},
      {title: '属性值',dataIndex: 'attrVal',key: 'attrVal'},

    ])

    const queryDetailUrl = '/wb.manage/wbCompanyDetail/queryDetailByCid';
    const queryApiTreeForDetail = '/wb.manage/wbCompanyDetail/queryApiTreeForDetail';
    
    async function initFormData(){
      
    }

    async function initApiData(){
      treeApiData.value= await defHttp.get({url: queryApiTreeForDetail});
    }

    const activeKey = ref(['1']);
    
    async function setCompanyInfo(obj){
        companyInfo.value = obj
        initApiData();
   
    }

    async function clickNode(selectedKeys, e:{selected: Boolean, selectedNodes,node,event}) {
      //dataList.value = []
      if(e.selected) {
        if(!e.node.children){
          curApiId.value =  e.node.code;
          let apiId = e.node.code;
          let params = {cid: companyInfo.value?.id,apiId:apiId};
          dataList.value = await defHttp.get({url: queryDetailUrl, params});
        }
      }
    }

    async function handlePullData(record){
      await pullDataFromAPI({
        cid: companyInfo.value.id,
        apiIds: curApiId.value
      })
    }


    defineExpose({
        setCompanyInfo
    });

 

</script>