<template>
  <div class="terminology-management">
    <div class="tabs">
      <span v-for="tab in tabs" :class="selectedTabId === tab.id ? 'tab-item active' : 'tab-item'" :key="tab.id"
        @click="handleTabClick(toRaw(tab))">{{
          tab.title }}</span>
    </div>
    <div class="tabs-content">
      <component v-for="tab in tabs" :key="tab.id" :is='tab.component' :title="tab.title"
        v-show="selectedTabId === tab.id"></component>
    </div>
  </div>
</template>

<script setup>
import { ref, toRaw, markRaw } from 'vue'
import DiseaseTerminology from '@/components/KGBuilderTM/DiseaseTerminology.vue'
import DrugTerminology from '@/components/KGBuilderTM/DrugTerminology.vue'
import SurgicalOperationTerminology from '@/components/KGBuilderTM/SurgicalOperationTerminology.vue'
import TestingTerminology from '@/components/KGBuilderTM/TestingTerminology.vue'
import InspectionTerminology from '@/components/KGBuilderTM/InspectionTerminology.vue'
import OtherTerminology from '@/components/KGBuilderTM/OtherTerminology.vue'

let selectedTabId = ref(1)
let tabs = ref([
  {
    title: '疾病术语',
    id: 1,
    component: markRaw(DiseaseTerminology)
  },
  {
    title: '药品术语',
    id: 2,
    component: markRaw(DrugTerminology)
  },
  {
    title: '手术操作术语',
    id: 3,
    component: markRaw(SurgicalOperationTerminology)
  },
  {
    title: '检验术语',
    id: 4,
    component: markRaw(TestingTerminology)
  },
  {
    title: '检查术语',
    id: 5,
    component: markRaw(InspectionTerminology)
  },
  {
    title: '其他术语',
    id: 6,
    component: markRaw(OtherTerminology)
  },
])
function handleTabClick(tabData) {
  selectedTabId.value = tabData.id
}
</script>

<style lang="less" scoped>
.terminology-management {
  padding-left: 10px;

  .tabs {
    border-bottom: 1px solid #C6C4C4;
    padding: 0px 20px 10px;
    font-size: 17px;

    .tab-item {
      margin-left: 20px;
      cursor: pointer;

      &:is(.active) {
        color: #0A61F7;
      }

      &:hover {
        color: #0A61F7;
      }
    }
  }
}
</style>
