<template>
      <div class="top-title">人員檔案管理</div>
      <div class="file-main">
        <div class="file-left">
          <el-tabs :tab-position="tabPosition" style="height: 100%" class="file-left-tabs" @tab-click="tabClick">
            <el-tab-pane label="基本信息"></el-tab-pane>
            <el-tab-pane label="任務(wù)情況"></el-tab-pane>
            <el-tab-pane label="受獎懲情況"></el-tab-pane>
            <el-tab-pane label="專業(yè)等級評定"></el-tab-pane>
            <el-tab-pane label="意見反饋"></el-tab-pane>
            <el-tab-pane label="培訓(xùn)計劃"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="file-right">
          <div id="tabs-0" style="height: 500px; background-color: #f00">Content for menu 1...</div>
          <div id="tabs-1" style="height: 500px; background-color: #fff">Content for menu 2...</div>
          <div id="tabs-2" style="height: 600px; background-color: #f00">Content for menu 3...</div>
          <div id="tabs-3" style="height: 500px; background-color: #fff">Content for menu 4...</div>
          <div id="tabs-4" style="height: 500px; background-color: #f00">Content for menu 5...</div>
          <div id="tabs-5" style="height: 500px; background-color: #fff">Content for menu 6...</div>
        </div>
      </div>
</template>
<script setup lang="ts">
import type { TabsInstance } from 'element-plus'
const tabPosition = ref<TabsInstance['tabPosition']>('left')

// tab點擊事件
const tabClick = (e: any) => {
  const anchor = document.getElementById('tabs-' + e.index)
  if (anchor) {
// 定位到當(dāng)前元素可視區(qū)域
    anchor.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>
<style lang="scss" scoped>
.file-main {
  padding-top: 12px;
  overflow: hidden;
  display: flex;
  .file-left {
    position: relative;
    width: 140px;
    .file-left-tabs {
        position: fixed;
        z-index: 99;
        top: 20px;
        left: 20px;
    }
  }
  .file-right {
    width: 100%;
    height: calc(100vh - 20px);
    overflow-y: auto;
    background-color: #f0f0f0;
  }
}
</style>