<template>
  <PageWrapper  contentFullHeight="true" contentClass="flex" style="height:100%;overflow: none;">
      <a-row :gutter="12" style="background:#d9d9d9;padding:10px 0px">
          <a-col :span="8" style="background:#d9d9d9">
            <a-card style="margin:0px;overflow-y: auto;height:calc(90vh - 0px);" title="接口列表"> 
              <div style="font-size:15px;">
                <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 title="选项列表" style="margin:0px;height:calc(90vh - 0px);overflow-y: auto;width:100%">
                  <template #extra><a href="#" @click="onSave">保存</a></template>
                  <a-checkbox-group v-model="checkedList" @change="handleChange">
                  <a-row style="font-size:15px;min-width:600px;">

                    <a-col :span="8" v-for="(item,ind ) in apiItemDataList" :key="ind">
                          <a-checkbox :key="item.wkey" :value="item.wkey" style="margin:5px;width: 100%;">
                            {{ item.wname }}
                          </a-checkbox>
                    </a-col>
                  </a-row>
                </a-checkbox-group>
                </a-card>  
          </a-col>
      </a-row>   
  </PageWrapper>    

</template>
<script lang="ts" setup>
  import {ref,reactive} from 'vue';
  import {thirdApiList,thirdApiItemList,saveBatch} from '../WbSurveyCfg.api';
  import {defHttp} from '/@/utils/http/axios';

  const emit = defineEmits(['register','success']);

  const apiDataList = ref([]);
  const apiItemDataList = ref([]);
  const checkedList = ref([])

  const expandedKeys = ref<string[]>();
  const selectedKeys = ref([]);
  const treeRef = ref();
  const treeApiData = ref([])

  const formData = reactive<Record<string, any>>({
    id: '',
    domainName: ' ', 
    domainCode:'',
    attrName: "",
    attrKey:"",
    collMethod: "2",
    apiId:'',
    tp:''
  });

  const queryApiTree = '/wb.manage/wbCompanyDetail/queryApiTreeForDetail';

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


  async function clickNode(selectedKeys, e:{selected: Boolean, selectedNodes,node,event}) {
      apiItemDataList.value = []
      formData.tp = 2
      if(e.selected) {
        let apiId = e.node.code;
        let title = e.node.title;
        let leaf =  e.node.leaf;
        if(leaf){
          apiItemDataList.value = await thirdApiItemList({code: apiId })
          if(!apiItemDataList.value||apiItemDataList.value.length==0) {
            apiItemDataList.value = []
            let tmpObj = {
              wkey:apiId,
              wname:title
            }
            apiItemDataList.value.push(tmpObj)
          }  else {
            formData.tp = 3
          }
        } else {
          let childrens =  e.node.children;
          childrens.forEach(function(child) {
            child["wkey"] = child.code;
            child["wname"] = child.title
          });
          apiItemDataList.value = childrens
        
        } 
      }
    }

 
  async function getThirdApiList() {
    const dataList  = await thirdApiList({})
    apiDataList.value = dataList.records;
  }
  

  function handleChange(checkedValues){
    checkedList.value = checkedValues
  }

  function onSave(){
    let curApiId = selectedKeys.value[0];
    formData["collMethod"] ="2"
    formData["attrKey"] = checkedList.value.join(",");
    formData["apiId"] = curApiId
    checkedList.value = [];
    saveBatch(formData)
    emit("success");
  }

  function setData(code,name) {
    checkedList.value = []
    formData["domainName"] = name
    formData["domainCode"] = code
    initApiData()
  }
  getThirdApiList()

      
  defineExpose({
      setData
  });

</script>

<style scope>
.underline-input {
border-left:none;
border-top:none;
border-right:none;
width: 100%;
}
</style>