
<template>
  <div style="background: #ececec; padding:10px 0px">
      <a-row :gutter="0">
            <a-col :span="6">
                <div style="font-size:15px;overflow-y: auto;padding:0px 0px 0px 5px;margin-right:10px">
                  <a-card style="width: 100%">
                      <a-directory-tree :showLine="showLine"  :tree-data="leftTree" style="height:740px"
                        v-model:expandedKeys="expandedKeys"
                        v-model:selectedKeys="selectedKeys"
                        @select="onTreeSelect"
                      >
                      </a-directory-tree>
                  </a-card>    
                </div>
            </a-col>
            <a-col :span="18">
              <div style="font-size:15px;overflow-y: auto;padding:0px 0px 0px 0px;">
                <a-card style="width: 100%;height:790px;">
                  <SurveyTplItemList  ref="registerSurveyTplItemList"></SurveyTplItemList>
                </a-card>
              </div>
            </a-col>
      </a-row>      
  </div>
</template>

<script lang="ts" setup name="survey-tpl-main">
  import { provide, ref } from 'vue';
  import { listTree } from './SurveyTplMain.api';
  import SurveyTplItemList from './SurveyTplItemList.vue'


  const registerSurveyTplItemList = ref();
  const curSelNode = ref({})
  const showLine = ref(false)
  const expandedKeys = ref([]);
  const selectedKeys = ref([]);
  const leftTree = ref()
 
  async function setTplMainDatas() {
    leftTree.value = await listTree({})
  }

  setTplMainDatas()

  function onTreeSelect(selectedKeys, e:{selected: Boolean, selectedNodes,node,event}) {
    if(e.selected) {
      curSelNode.value = e.node;
      let id = e.node.id
      registerSurveyTplItemList.value.setData(id)
    }
}

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

</style>
