<template>
  <div class="tab-bar" :class="{ 'in-mini-program': inMiniProgram }">
     
    <van-tabbar
      v-model="active"
      z-index="99"
      fixed
      style="position: fixed"
      :class="{ 'in-mini-program': inMiniProgram }"
      @change="onChange"
    >
      <van-tabbar-item>
        <span>首页</span>
        <template #icon="props">
          <i :class="props.active ? 'icon-shouye_sel' : 'icon-shouye_nor'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item
        :badge="msgbadge > 0 ? (msgbadge > 98 ? '99+' : msgbadge) : null"
      >
        <span>消息</span>
        <template #icon="props">
          <i :class="props.active ? 'icon-xiaoxi_sel' : 'icon-xiaoxi_nor'" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>工作台</span>
        <template #icon="props">
          <i
            :class="
              props.active ? 'icon-gongzuotai_sel' : 'icon-gongzuotai_nor'
            "
          />
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <span>我的</span>
        <template #icon="props">
          <i :class="props.active ? 'icon-wode_sel' : 'icon-wode_nor'" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    props: ['activeIndex'],
    data() {
      return {
        active: this.activeIndex,
        msgbadge: 0,
        inMiniProgram: false,
      }
    },
    mounted() {
      this.refreshMsgbadge()
      this.$store.dispatch('user/loadCurrentUserDetail')
      var userAgent = navigator.userAgent
      if (/miniProgram/i.test(userAgent) || window.plus) {
        this.inMiniProgram = true
      }
    },
    methods: {
      onChange(event) {
        switch (this.active) {
          case 0:
            this.$router.push('/home')
            break
          case 1:
            this.$router.push('/messageReceiverList')
            break
          case 2:
            this.$router.push('/worker')
            break
          case 3:
            this.$router.push('/personal')
            break
          default:
            this.$router.push('/home')
            break
        }
      },
      refreshMsgbadge() {
        let _this = this
        this.$http
          .get(
            `${window.context.portal}/innermsg/messageReceiver/v1/getMsgbadge`
          )
          .then(
            (response) => {
              if (response.state) {
                _this.msgbadge = response.value
              }
            },
            (error) => {}
          )
      },
    },
  }
</script>
<style lang="scss" scoped>
  .in-mini-program {
    height: 80px !important;
  }

  .tab-bar {
    // position: fixed !important;
    // left: 0;
    // right: 0;
    // bottom: 0;
    // width: 100%;
    // z-index: 8;
    // position: absolute;
    // width: 100%;
    // bottom: 49px;
    // z-index: 8;
    // // height: 49px;
    height: 55px;

    .van-tabbar {
      height: 49px;
    }

    .van-tabbar-item {
      margin: 3px 0 4px 0;

      ::v-deep {
        .van-info {
          margin-top: 0;
          border-radius: 8px 8px 8px 8px;
          top: 8px;
          font-weight: 400;
          font-size: 10px;
          background: #e55555;
        }

        .van-tabbar-item__icon {
          color: #bfbfbf;
          margin-bottom: 1px;

          i {
            font-size: 24px;
          }
        }

        .van-tabbar-item__text {
          color: #bfbfbf;
          font-size: 11px;

          height: 16px;
          line-height: 16px;
        }
      }

      &.van-tabbar-item--active {
        ::v-deep {
          .van-tabbar-item__icon,
          .van-tabbar-item__text {
            color: $--color-primary;
          }
        }
      }
    }
  }
</style>
