<template>
  <div class="container">
    <waiting-head></waiting-head>
    <div class="tabMenu clearfix">
      <ul>
        <li v-for="(item, i) in ['候诊室', '透析区']" :class="index == i ? 'active' : ''" @click="waitingClick(i)" :key="i" >{{item}}</li>
      </ul>
    </div>
    <div class="menuContent clearfix">
      <waiting-content v-show="index==0"></waiting-content>
      <dialysis-content v-show="index==1"></dialysis-content>
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
import waitingHead from "./components/head";
import FooterNav from "./components/footerNav";
import WaitingContent from "./components/waitingcontent";
import DialysisContent from "./components/dialysisContent";
import Details from "./components/details";
export default {
  name: "waitingRoom",
  data() {
    return {
      selected: "",
      index: 1,
      tabs: ["候诊室", "透析区"]
    };
  },
  components: {
    waitingHead,
    FooterNav,
    WaitingContent,
    DialysisContent,
    Details
  },
  methods: {
    waitingClick: function(tabIndex) {
      this.index = tabIndex;
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped >
.tabMenu {
  background: $main-color;
  padding: 0.2rem 0;
  ul {
    width: 40%;
    margin: 0 auto;
    @include box-sizing;
    @include display-flex;
    @include text-align;
    li {
      font-size: 0.32rem;
      color: $text-color;
      @include flex;
      float: left;
      padding: 0 0 0.15rem 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>

