<!-- // tab导航栏 -->
<template>
  <div>
    <van-tabbar v-model="activeType" active-color="#00a0e9" inactive-color="#666666" :z-index="999">
      <!--        info="1" -->
      <van-tabbar-item
        name="specialist"
        :icon="require('@/assets/images/nav/1.png')"
        to="/specialist"
        safe-area-inset-bottom="true"
        class="item"
        :class="{ active: activeType == 'specialist' }"
      >专家到家</van-tabbar-item>

      <van-tabbar-item
        name="test"
        :icon="require('@/assets/images/nav/2.png')"
        to="/test"
        safe-area-inset-bottom="true"
        class="item"
        :class="{ active: activeType == 'test' }"
      >药房</van-tabbar-item>

      <van-tabbar-item
        name="healthyVideo"
        :icon="require('@/assets/images/nav/3.png')"
        to="/healthyVideo"
        safe-area-inset-bottom="true"
        class="item"
        :class="{ active: activeType == 'healthyVideo' }"
      >专家开讲</van-tabbar-item>

      <van-tabbar-item
        name="PatientUser"
        :icon="require('@/assets/images/nav/4.png')"
        to="/PatientUser"
        safe-area-inset-bottom="true"
        class="item"
        :class="{ active: activeType == 'PatientUser' }"
      >个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  props: {
    // 当前页面
    active: {
      type: String,
      default: "PatientUser"
    }
  },
  data() {
    return {
      activeType: this.active
    };
  },
  watch: {
    active() {
      this.activeType = this.active;
    }
  }
};
</script>
<style lang="less" scoped>
.item /deep/ .van-icon {
  filter: grayscale(1);
}
.active /deep/ .van-icon {
  filter: grayscale(0);
}
</style>
