<template>
  <div class="record">
    <div class="top">
      <popover placement="bottom">
        <div slot="content" class="popover-demo-content">
          <ul>
            <li>医院医院医院</li>
            <li>医院医院医院 <span class="iconfont">&#xe721;</span></li>
          </ul>
        </div>
        <div class="hospital">
          <span class="title"> 深圳市人民医院血液透析中心</span
          ><span class="iconfont">&#xe74a;</span>
        </div>
      </popover>

      <div class="department">
        <ul>
          <li
            v-for="(item, i) in ['候诊室', '透析区']"
            :key="i"
            :class="index == i ? 'active' : ''"
            @click="ClickTab(i)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="search">
        <span class="iconfont">&#xe64d;</span>
        <input type="text" class="searchInput" placeholder="透析号/姓名" />
      </div>
    </div>
    <div class="area">
      <waiting-area v-show="index == 0" title="候诊区"></waiting-area>
      <dialysis-area v-show="index == 1" title="透析区"></dialysis-area>
    </div>
  </div>
</template>

<script>
import DialysisArea from "@/pages/main/DialysisArea";
import WaitingArea from "@/pages/main/WaitingArea";
import { Popover } from "vux";
export default {
  name: "RecordPage",
  data() {
    return {
      index: 0
    };
  },
  components: {
    DialysisArea,
    WaitingArea,
    Popover
    // Group,
    // Cell
  },
  methods: {
    ClickTab: function(tabIndex) {
      this.index = tabIndex;
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.record {
  .top {
    padding: 0.28rem 0.3rem;
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-between;
    font-size: 0.3rem;
    border-bottom: 1px #e5e5e5 solid;
    .title {
      font-size: 0.3rem;
      font-weight: bold;
      color: $pgh-color;
    }
    .iconfont {
      font-size: 0.24rem;
      color: #a8b3ba;
    }
  }
  .department {
    ul {
      li {
        float: left;
        font-size: 0.28rem;
        margin: 0 0.2rem;
        height: 0.48rem;
        line-height: 0.48rem;
        width: 1.4rem;
        &.active {
          background: $main-color;
          color: #fff;
          border-radius: 30px;
        }
      }
    }
  }
  .search {
    background: #ebf1f7;
    border-radius: 30px;
    padding: 0 0.3rem;
    height: 0.6rem;
    line-height: 0.6rem;
    color: #a8b3ba;

    .iconfont {
      color: #a8b3ba;
    }
    .searchInput {
      font-size: 0.28rem;
      border: none;
      outline: none;
      background: #ebf1f7;
    }
  }
}
</style>
