<template>
   <a-drawer  placement="right" 
   :visible="showDrawer" 
    width="100%"   
   :style="{ position: 'absolute'}"  
   :bodyStyle = "{ padding: '5px'}"  
   @close="closeDrawerEnvent" 
   style="position: fixed;margin:0px;background-color:#F0F0F0;">
    <template #title>
      <div style="width: 100%;">  
          <span style="display:inline-block;">{{drawerTitle}}</span>  
          <span style="display:inline-block;" class="text-container">{{curSelNode}}</span>  
      </div> 
    </template>
    <template #extra>
      <a-space wrap>
        <a-button type="link" block @click="showTplList()">显示模版列表</a-button>
        <!-- <a-button type="link" block @click="showFillHistory()">往年填报</a-button> -->
        <a-button type="link" block @click="showFileEvent(1)">监管文档</a-button>
        <a-button type="link" block @click="showFileEvent(2)">填报指南</a-button>
        <a-button type="link" block @click="closeDrawerEnvent()">关闭</a-button>
      </a-space>
    </template>
    <RecordIndex ref ="refRecordIndex" @callback="callback"></RecordIndex>
  </a-drawer>
</template>
<script lang="ts" setup>
  
  import { ref, nextTick } from 'vue';
  import RecordIndex from './RecordIndex.vue';

  const drawerTitle  = ref();
  const showDrawer = ref(false);
  const refRecordIndex = ref();
  const curTask = ref();

  const curSelNode = ref()

  const emit = defineEmits(['showFile']);


  const setIniData= (async (task) => {
    curTask.value = task;
    drawerTitle.value= "报表填报【"+task.name + "】"
    showDrawer.value = true

    nextTick(async ()=>{
      refRecordIndex.value.setTplDatas(task)
    })
  });


  function showTplList() {
    refRecordIndex.value.showTplList()
  }


  function closeDrawerEnvent() {
    showDrawer.value = false
  }


  function showFileEvent(tp) {
    emit("showFile",tp)
  }

  function callback(tplitem) {
    curSelNode.value = tplitem?.treepathName
  }



  defineExpose({
    setIniData,
  });

</script>

<style scoped>
.parent-drawer-class {  
  transform: translateX(0) !important;  /* 确保父层始终不移动 */  
} 

.text-container { 
  text-align:center;
  margin-left:20px;
  width: 70%;          /* 设置容器的宽度 */  
  white-space: nowrap;   /* 不换行 */  
  overflow: hidden;      /* 隐藏溢出内容 */  
  text-overflow: ellipsis; /* 使用省略号表示溢出文本 */  
  box-sizing: border-box; /* 可选：调整盒子模型 */  
}  

/* 可选：悬浮提示 */  
.text-container:hover {  
  overflow: visible;      /* 鼠标悬停是可见 (可选) */  
  white-space: normal;    /* 切换到换行 */  
  z-index: 10;            /* 确保显示在其他元素之上 (可选) */  
} 
</style>
