<template>
  <view class="tabbar-wrap">
    <view class="tabbar-panel">
      <view
        v-for="item in tabs"
        :key="item.key"
        class="tabbar-item"
        :class="{ active: current === item.key }"
        @tap="go(item)"
      >
        <view class="icon-shell">
          <image class="icon-img" :src="current === item.key ? item.activeIcon : item.icon" mode="aspectFit" />
        </view>
        <text class="tabbar-label">{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LfTabbar',
  props: {
    current: {
      type: String,
      default: 'home'
    }
  },
  data() {
    return {
      tabs: [
        {
          key: 'home',
          label: '首页',
          path: '/pages/home/home',
          icon: '/static/images/tab-home.png',
          activeIcon: '/static/images/tab-home-active.png'
        },
        {
          key: 'booking',
          label: '预约',
          path: '/pages/booking/booking',
          icon: '/static/images/tab-booking.png',
          activeIcon: '/static/images/tab-booking-active.png'
        },
        {
          key: 'mall',
          label: '商城',
          path: '/packageMall/main/main',
          icon: '/static/images/tab-mall.png',
          activeIcon: '/static/images/tab-mall-active.png'
        },
        {
          key: 'profile',
          label: '我的',
          path: '/pages/profile/profile',
          icon: '/static/images/tab-profile.png',
          activeIcon: '/static/images/tab-profile-active.png'
        }
      ]
    }
  },
  methods: {
    go(item) {
      if (item.key === this.current) {
        return
      }
      uni.redirectTo({
        url: item.path
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixins.scss';

.tabbar-wrap {
  position: fixed;
  left: 24rpx;
  right: 24rpx;
  bottom: calc(20rpx + env(safe-area-inset-bottom));
  z-index: 30;
}

.tabbar-panel {
  @include glass-panel(0.96);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 118rpx;
  padding: 12rpx 12rpx 10rpx;
  border-radius: 999rpx;
  box-shadow: $shadow-strong;
}

.tabbar-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rpx 0;
  border-radius: 999rpx;
}

.icon-shell {
  width: 78rpx;
  height: 78rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-img {
  width: 60rpx;
  height: 60rpx;
}

.tabbar-label {
  margin-top: 4rpx;
  font-size: 22rpx;
  color: $text-tertiary;
  font-weight: 500;
}

.tabbar-item.active {
  background: rgba(255, 255, 255, 0.72);

  .tabbar-label {
    color: $brand-primary-deep;
    font-weight: 700;
  }
}
</style>
