<template>
  <div class="preview-doc-back pointer" >
    <el-icon @click="router.go(-1)"><ArrowLeftBold /></el-icon>
    {{ query?.name }}
  </div>
  <el-tabs v-model="activeName" class="res-el-tab" @tab-change="handleTabChange">
    <el-tab-pane label="文档管理" name="doc">
      <DocList />
    </el-tab-pane>
    <el-tab-pane label="分段列表" name="paragraph">
      <ParagraphList />
    </el-tab-pane>

  </el-tabs>
</template>
<script setup lang="ts">
import router from '@/router'
import DocList from './components/DocList.vue'
import ParagraphList from './components/ParagraphList.vue'
import { useRoute } from 'vue-router'

import { ref } from 'vue'

const { query } = useRoute();
const activeName = ref<string>('doc')

const handleTabChange = () => {}
</script>
<style scoped lang="scss">
.preview-doc-back {
  display: flex;
  flex-direction: row;
  align-items: center;
  .el-icon {
    margin-right: 6px;
  }
}
.res-el-tab {
  height: calc(100% - 20px);
  :deep(.el-tab-pane) {
    height: 100%;
  }
}
</style>
