<template>
    <div class="page_quality">
        <van-tabs v-model="active" @change="changeActive">
            <van-tab title="科室达标">
                <div class="filterBox">
                    <p :class="filterActive == 1 ? 'filterActive' : ''" @click="getFilter(1)">按时间分组</p>
                    <p :class="filterActive == 2 ? 'filterActive' : ''" @click="getFilter(2)">按项目分组</p>
                </div>
                <time1 v-if='filterActive == 1'></time1>
                <project v-if='filterActive == 2'></project>
            </van-tab>
            <van-tab title="患者达标">
                <patient></patient>
            </van-tab>
        </van-tabs>

    </div>
</template>

<script>
import Project from './components/project'
import Time1 from './components/time1'
import Patient from './components/patient'
export default {
  components: {
    Project,
    Time1,
    Patient
  },
  data () {
    return {
      active: 0,
      filterActive: 1
    }
  },
  methods: {
    getFilter (index) {
      this.filterActive = index
    },
    changeActive (val) {
      localStorage.setItem('test', val)
    }
  },
  created () {
    if (localStorage.getItem('test')) {
      this.active = parseInt(localStorage.getItem('test'))
    }
  }
}
</script>

<style lang="scss" scoped>
.page_quality{
    .filterBox{
        height: 1.875rem;
        line-height: 1.875rem;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-top: .625rem;
        p{
            padding: 0 .75rem;
            border-radius: 5px;
            text-align: center;
            font-size: 0.8125rem;
            background: #f6f6f6;
            color: #8d8d8d;
        }
    }
    .filterBox>p:first-of-type{
        margin-left: 4rem;
    }
    .filterBox>p:last-of-type{
        margin-right: 4rem;
    }
    .filterActive{
        background: #338afb !important;
        color: #fff !important;
        border: 1px solid #338afb;
    }
}
</style>

<style lang="scss">
// .page_quality{
  .van-tab--active {
    font-size: 1rem;
    color: #000;
    font-weight: bold;
  }
// }
</style>
