<template>
  <div class="tabMenu" title="标题导航栏">
    <ul>
      <li v-for="(item,i) in ['长期处方','透析记录','医嘱','排班',' 宣教', '指标分析']" :key="i" :class="index == i? 'active':'' "
          @click="ClickTab(i)">{{item}}
      </li>
    </ul>

    <div v-show="index==0" title="长期处方">
    </div>
    <div v-show="index==1" title="透析记录">
    </div>
    <div v-show="index==2" title="医嘱">

    </div>
    <div v-show="index==3" title="排班">
      <schedual></schedual>
    </div>
    <div v-show="index==4" title="宣教">
      <education></education>
    </div>
    <div v-show="index==5" title="指标分析">
      <case-history title="指标分析"></case-history>
    </div>
  </div>

</template>

<script>
  import education from "./patientDialysis/education";
  import schedual from "./patientDialysis/schedual";

  export default {
    components: {
      education,
      schedual
    },
    name: "patientDialysis",
    data() {
      return {
        index: 0

      };
    },
    methods:{
      ClickTab: function(tabIndex) {
        console.log(tabIndex)
        this.index = tabIndex;
      },

    }
  }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tabMenu {
    padding: 0.2rem 0 0.2rem 0;
    position: relative;
    .SelectDate {
      position: absolute;
      right: 0.28rem;
      top: 0.2rem;
      font-size: 0.28rem;
      color: #fff;
    }
    ul {
      width: 50%;
      margin: 0 auto;
      @include box-sizing;
      @include display-flex;
      @include text-align;
      li {
        font-size: 0.3rem;
        color: $text-color;
        @include flex;
        float: left;
        padding: 0 0 0.13rem 0;
        &.active {
          font-weight: 700;
          position: relative;
          &:after {
            width: 0.5rem;
            height: 0.06rem;
            background: $white-bg;
            content: "";
            display: block;
            text-align: center;
            position: absolute;
            left: 50%;
            bottom: 0;
            border-radius: 10px;
            transform: translate(-50%, 50%);
          }
        }
      }
    }
  }
</style>

