<!-- 资源中心 -->
<template>
  <div class="main">
      <div class="left">
           <a-card class="box-card" body-style="{height:'100%'}">
            <a-input-search
            :value="TreeSearchValue"
            style="margin-bottom: 8px"
            placeholder="搜索关键字"
          />
          <a-tree :tree-data="treeData" @select="select" />
          </a-card>
      </div>
      <div class="right">
          <a-card class="box-card">
            <div class="detailInfo">
              111
            </div>
          </a-card>
      </div>
  </div>
</template>

<script>
import { defineComponent, ref, watch, reactive, onMounted } from 'vue';
// 引入资源目录接口
import { getDirectoryTreeList, addTreeNode } from '/@/api/sys/gis';
export default defineComponent({
  setup(){
      // 生命周期函数
      onMounted(() => {
      getTreeList()
    })
    // 获取树的节点列表
    let searchCategory = ref([])  // 搜索框数据
    let treeData = ref([]) // 树的数据
    let treeSearchValue = ref('') // 树的搜索值
    let inputSearchValue = ref('') // 头部搜索框的数据
    const getTreeList = () => {
      const gisToken = sessionStorage.getItem('gisToken')
      let directoryFormData = new FormData()
      directoryFormData.append('interfaceName', 'antu.space.provider.sdatacatlog.SDataCatlogProvider')
      directoryFormData.append('methodName', 'findList')
      directoryFormData.append('args[]', gisToken)
      directoryFormData.append('args[]', '')
      getDirectoryTreeList(directoryFormData).then((res) => {
        if (res.status == 0) {
          const data = JSON.parse(res.result)
          console.log('获取设备列表2:', data);
          // 让每层带上自己的孩子节点、title、key
          data.forEach((item) => {
            item['title'] = item.name
            item['key'] = item.id
            data.forEach((item2) => {
              if (item.id == item2.pid) {
                if (item.children) {
                  item.children.push(item2)
                } else {
                  item['children'] = []
                  item.children.push(item2)
                }
              }
            })
          });
          console.log('11111111111:', data);
          // 找出搜索框数据
          data.forEach((item) => {
            if (item.pid == '') {
              searchCategory.value.push(item)
            }
          })
          inputSearchValue = searchCategory.value[0].id
          // 找出树形数据
          searchCategory.value.forEach((item1) => {
            data.forEach((item2) => {
              if (item1.id == item2.pid) {
                treeData.value.push(item2)
              }
            })
          })
        }
      });
    }
    return{
      treeData,
      treeSearchValue,
      inputSearchValue,
      getTreeList
    }
  }
});
</script>

<style lang="scss" scoped>
.main{
  margin: 0;
  padding: 0;
  display: flex;
  height: 90vh;
  .box-card{
      height: calc(100% - 0px);
  }

  .left{
      height: 100%;
      width: 15%;
      margin: 10px;
  }

  .right{
      height: 100%;
      width: 85%;
      margin: 10px;
      .detailInfo{
        height: 40vh;
        width: 15vw;
        border-style:solid;
        border-width:1px;
        border-color:#E9E9E9;
      }
  }
}
</style>