<template>
  <div class="page_allStaffSchedule">
    <van-sticky>
      <div class="allStaffScheduleTitle">
        <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-sticky>
    <index v-if="type == '医护排班'"></index>
    <my-schedule v-if="type == '我的排班'"></my-schedule>
    <schedule-statistics v-if="type == '排班统计'"></schedule-statistics>
    <div>
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="show = false"
        />
      </van-popup>
    </div>
  </div>
</template>


<script>
  import index from './index'
  import mySchedule from './mySchedule'
  import scheduleStatistics from './scheduleStatistics'
  export default {
    components:{
      index,
      mySchedule,
      scheduleStatistics
    },
    data(){
      return{
        show: false,
        columns: ['医护排班', '我的排班','排班统计'],
        type: '医护排班'
      }
    },
    created(){
      var tabName = this.$route.query.tabName
      this.type = tabName
    },
    methods:{
      onConfirm (value) {
        this.type = value
        this.show = false
      },
    }
  }
</script>


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