<template>
    <div class="page_allBusiness">
        <div class="allBusinessTitle">
            <i class="iconfont icon-zuojiantou jiantou" @click="toClick"></i>
            <span class="titleName" @click="show = true">{{ type }}<van-icon name="arrow-down" class="arrow" /></span>
        </div>
        <div >
            <customer v-if="type == '患者统计'"></customer>
            <quality v-if="type == '质量统计'"></quality>
            <stock v-if="type == '库存统计'"></stock>
        </div>
        <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 quality from './quality'
import customer from './customer'
import stock from './stock'
export default {
  components: {
    quality,
    customer,
    stock
  },
  data () {
    return {
      show: false,
      columns: ['患者统计', '质量统计','库存统计'],
      type: '患者统计'
    }
  },
  methods: {
    onConfirm (value) {
      this.type = value
      this.show = false
    },
    toClick () {
      localStorage.removeItem('test')
      this.$router.go(-1)
    }
  },
  created () {
    var tabName = this.$route.query.tabName
    this.type = tabName
  }
}
</script>

<style lang="scss" scoped>
.page_allBusiness {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  .allBusinessTitle {
    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;
    }
  }
  .van-cell {
    font-size: 1rem;
  }
}
</style>
