<template>
    <div class="fixedBox">
        <div class="nav">
            <ul>
                <li v-for="(item,i) in ['长期透析处方','透析记录','排班信息','宣教信息']" :key="i" :class="index == i? 'active':'' "  @click="ClickTab(i)" >{{item}}</li>
            </ul>
        </div>

        <div class="tab-content">
            <long-table v-show="index==0" title="长期透析处方"></long-table>
            <record-table v-show="index==1" title="透析记录"></record-table>
            <!--<advice-table v-show="index==2" title="医嘱信息"></advice-table>-->
            <schedul-table v-show="index==2" class="排班信息"></schedul-table>
            <mission-table v-show="index==3" class="宣教信息"></mission-table>
        </div>
    </div>
</template> 

<script>
import LongTable from "./LongTable";
import SchedulTable from "./SchedulTable";
import RecordTable from "./RecordTable";
import AdviceTable from "./AdviceTable";
import MissionTable from "./MissionTable";
export default {
  name: "DialysisTab",
  data() {
    return {
      index: 0
    };
  },
  components: {
    LongTable,
    SchedulTable,
    RecordTable,
    AdviceTable,
    MissionTable
  },
  methods: {
    ClickTab: function(tabIndex) {
      this.index = tabIndex;
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.fixedBox{
 padding-top:53px; 
  background: #fff;
  min-height: calc(100vh - 64px);
.nav {
  border-bottom: 1px #e5e5e5 solid;
    position: fixed;
  top: 63px;
  right: 0;
  z-index: 66;
  left: 1.58rem;
  background: #fff;
    background: #fff;
  ul {
    width: 60%;
    margin: 0 auto;
    @include box-sizing;
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    li {
      font-size: 0.32rem;
      float: left;
      color: $pgh-color;
      padding: 0.3rem 0;
      cursor: pointer;
    }
    .active {
      position: relative;
      &::before {
        width: 100%;
        height: 2px;
        color: $main-color;
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        background:$main-color;
      }
    }
  }
}
}

</style>

