<template>
  <view class="tabbar-container">
    <block>
      <view class="tabbar-item"
            v-for="(item, index) in state.tabbarList" :key="index"
            :class="[item.centerItem ? ' center-item' : '']"
            @click="handleTabbarClick(item)">
        <view class="item-top">
          <image :src="state.currentItem == item.id ? item.selectIcon : item.icon" mode="widthFit"></image>
        </view>
        <view class="item-bottom" :class="[state.currentItem == item.id ? 'item-active' : '',state.isIOS?'ios11':'']">
          <text>{{ item.text }}</text>
        </view>
      </view>
    </block>
  </view>
</template>

<script setup lang="ts" name="TabBar">
import {onMounted, reactive, ref} from 'vue'
import {onLoad, onShow} from "@dcloudio/uni-app";

const props = defineProps({
  index: {
    type: Number,
    default: 0
  }
})

const state = reactive({
  currentItem: 0,
  isIOS: false,

  tabbarList: [
    {
      id: 0,
      path: '/pages/index/index',
      icon: '/static/iconfont/default/wash.svg',
      selectIcon: '/static/iconfont/wash.svg',
      text: '网点',
      centerItem: false
    },
    {
      id: 1,
      path: '/pages-wash/scan/index',
      icon: '/static/iconfont/scan.svg',
      selectIcon: '/static/iconfont/scan.svg',
      text: '扫码',
      centerItem: true
    },
    {
      id: 2,
      path: '/pages/user/index',
      icon: '/static/iconfont/default/me.svg',
      selectIcon: '/static/iconfont/me.svg',
      text: '我的',
      centerItem: false
    }
  ]
})

onLoad(() => {
  state.currentItem = props.index;

})

onShow(() => {
  state.currentItem = props.index;
  const device = uni.getDeviceInfo();
  state.isIOS = device.system.includes("ios");
})

onMounted(() => {
  state.currentItem = props.index;
})


const handleTabbarClick = (item: string) => {
  if (item.path.includes("scan")) {
    uni.navigateTo({url: item.path})
    return;
  }

  uni.switchTab({
    url: item?.path,
    success: (e: any) => {
    },
    fail: (e: any) => {
    }
  })
}

</script>
<style lang="scss" scoped>
view {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140rpx;
  display: flex;
  align-items: center;
  padding: 20rpx 0 30rpx 0;
  background-color: $uni-bg-color-card;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
  z-index: 999;
}

.tabbar-container .tabbar-item {
  width: 33.3%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tabbar-container .item-active {
  color: $uni-color-primary;
  font-weight: 500;
}

.tabbar-container .center-item {
  display: block;
  position: relative;
}

.tabbar-container .tabbar-item .item-top {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8rpx;
}

.tabbar-container .center-item .item-top {
  width: 140rpx;
  height: 140rpx;
  position: absolute;
  top: -80rpx;
  left: calc(50% - 70rpx);
  border-radius: 50%;
  background: linear-gradient(135deg, $uni-color-primary, $uni-color-primary-light);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(198, 23, 30, 0.3);
  transition: all 0.15s ease;
  animation: pulse 2s infinite;
}

// 脉冲动画效果
@keyframes pulse {
  0% {
    box-shadow: 0 8rpx 24rpx rgba(198, 23, 30, 0.3);
  }
  50% {
    box-shadow: 0 12rpx 32rpx rgba(198, 23, 30, 0.4);
  }
  100% {
    box-shadow: 0 8rpx 24rpx rgba(198, 23, 30, 0.3);
  }
}

// 点击动画效果
.tabbar-container .center-item .item-top:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 16rpx rgba(198, 23, 30, 0.2);
}

.tabbar-container .center-item .item-top image {
  width: 70rpx;
  height: 70rpx;
  filter: brightness(0) invert(1); // 确保图标在彩色背景上是白色
}

.tabbar-container .tabbar-item .item-top image {
  width: 100%;
  height: 100%;
  transition: all 0.2s ease;
}

// 激活状态的图标放大效果
.tabbar-container .tabbar-item:not(.center-item).item-active .item-top image {
  transform: scale(1.1);
}

.tabbar-container .tabbar-item .item-bottom {
  font-size: 12px;
  color: $uni-text-color-tertiary;
  width: 100%;
  transition: all 0.2s ease;
}

.tabbar-container .center-item .item-bottom {
  position: absolute;
  bottom: 0;
  color: $uni-color-primary;
  font-weight: 500;
}

// iOS适配
.ios11 {
  padding-bottom: 20rpx;
}
</style>