<template>
  <view>
    <u-tabbar :value="tabbarValue" :placeholder="false" @change="changeTabbar" fixed>
      <u-tabbar-item
        text="首页"
        :icon="tabbarValue == 1 ? '/static/images/imgs/home-active.png' : '/static/images/imgs/home.png'"
        :name="1"
      ></u-tabbar-item>
      <u-tabbar-item
        v-if="userType == '00'"
        text="数据看板"
        :icon="tabbarValue == 2 ? '/static/images/imgs/data-board-active.png' : '/static/images/imgs/data-board.png'"
        :name="2"
      ></u-tabbar-item>
      <div class="checking-in" v-if="userType == '04' || userType == '05'">
        <u-tabbar-item class="item" text="考勤打卡" :name="3"></u-tabbar-item>
      </div>
      <u-tabbar-item
        text="我的"
        :icon="tabbarValue == 4 ? '/static/images/imgs/my-active.png' : '/static/images/imgs/my.png'"
        :name="4"
      ></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userType: uni.getStorageSync('userInfo').userType,
      tabbarValue: 1
    }
  },
  created() {
    console.log('created', this.userType)
    this.tabbarValue = uni.getStorageSync('tabbarValue') || 1
  },
  methods: {
    changeTabbar(e) {
      console.log('changeTabbar', this.tabbarValue, e)
      uni.setStorageSync('tabbarValue', e)
      this.tabbarValue = uni.getStorageSync('tabbarValue')
      switch (this.tabbarValue) {
        case 1:
          this.$tab.reLaunch('/pages/index')
          break
        case 2:
          this.$tab.reLaunch('/pages/work/index')
          break
        case 3:
          this.$tab.reLaunch('/pages/attendanceManagement/index')
          break
        case 4:
          this.$tab.reLaunch('/pages/mine/index')
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.checking-in {
  position: relative;
  top: -40px;
  width: 80px;
  height: 80px;
  /* background: #94d1f4; */
  // #BDD4F9 - #C2F0EB 渐变
  background: linear-gradient(135deg, #a4c1fa, #adebe3);
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .item {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
}

::v-deep .item .u-tabbar-item__text {
  color: #fff !important;
}
</style>
