<script setup lang="ts">
import ElectronicCase from "./compontents/ElectronicCase/index.vue";
import { ref } from "vue";
const activedIndex = ref(0);
const navList = ref([
  {
    name: "电子病历"
  },
  {
    name: "临床问诊"
  },
  {
    name: "临床诊断"
  },
  {
    name: "诊断依据"
  },
  {
    name: "处置计划"
  }
]);
</script>

<template>
  <div class="editCase main-table">
    <div class="editCase_nav">
      <div
        class="editCase_nav_item"
        :class="[activedIndex === index ? 'actived' : '']"
        v-for="(item, index) in navList"
        :key="index"
      >
        <div class="line" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <ElectronicCase v-if="activedIndex === 0" />
  </div>
</template>
<style lang="scss" scoped>
.editCase {
  display: flex;
  flex-direction: row !important;
  width: 100%;
  padding: 0;

  .editCase_nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 168px;
    // justify-content: center;
    height: 100%;
    padding-top: 24px;
    border-right: 1px solid #d9d9d9;

    .editCase_nav_item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 53px;
      font-size: 16px;
      color: #999;
      cursor: pointer;
      border-radius: 8px;

      .line {
        width: 4px;
        height: 17px;
        margin-right: 12px;
        background: #999;
        border-radius: 2px;
      }
    }

    .actived {
      color: #4287ff;
      background: linear-gradient(90deg, rgb(66 135 255 / 10%) 0%, #fff 100%);

      .line {
        background: #4287ff;
      }
    }
  }
}
</style>
