<template>
  <div class="page_dialysisTimes">
    <div class="dialysisTimesTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
      <span class="titleName" @click="show = true">
        {{ type }}
        <van-icon name="arrow-down" class="arrow" />
      </span>
    </div>
    <van-tabs v-model="active" sticky v-if="type == '患者透析次数统计'">
      <van-tab title="统计个人">
        <dialysis-statistics-personal></dialysis-statistics-personal>
      </van-tab>
      <van-tab title="统计全部">
        <dialysis-statistics-all></dialysis-statistics-all>
      </van-tab>
    </van-tabs>
    <van-tabs v-model="active1" sticky  v-if="type == '患者检验检查统计'">
      <van-tab title="统计个人">
        <check-statistics-personal></check-statistics-personal>
      </van-tab>
      <van-tab title="统计全部">
        <check-statistics-all></check-statistics-all>
      </van-tab>
    </van-tabs>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="chooseType"
        @cancel="show = false"
      />
    </van-popup>
  </div>
</template>

<script>
import dialysisStatisticsPersonal from '../dqc/components/dialysisStatisticsPersonal'
import dialysisStatisticsAll from '../dqc/components/dialysisStatisticsAll'
import checkStatisticsPersonal from '../dqc/components/checkStatisticsPersonal'
import checkStatisticsAll from '../dqc/components/checkStatisticsAll'
export default {
  components: {
    dialysisStatisticsPersonal,
    dialysisStatisticsAll,
    checkStatisticsPersonal,
    checkStatisticsAll
  },
  data () {
    return {
      active: 0,
      active1: 0,
      show: false,
      type: '患者透析次数统计',
      columns: ['患者透析次数统计', '患者检验检查统计']
    }
  },
  methods: {
    chooseType (val) {
      this.type = val
      this.show = false
    }
  },
  created () {
    this.type = this.$route.query.tab_name
  }
}
</script>

<style lang="scss" scoped>
.page_dialysisTimes {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
  .dialysisTimesTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 4.5rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    .arrow {
      margin-left: 0.375rem;
    }
  }
  .van-cell {
    font-size: 1rem;
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>

<style lang="scss">
.page_dialysisTimes {
  .van-tabs__line {
    width: 3.125rem !important;
    background-color: #5b98ff;
  }
  .van-tab--active {
    font-size: 1.125rem;
    font-weight: bold;
  }
  .el-table {
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    .el-table__fixed-right {
      right: 0 !important;
    }
  }
}
</style>
