<template>
  <view class="page-nav">
    <!-- 首页按钮 -->
    <view class="nav-item" @click="handleNav('home')">
      <text class="nav-icon">🏠</text>
      <text class="nav-text">首页</text>
    </view>

    <!-- 开门按钮 - 圆形凸起 -->
    <view class="door-btn-wrapper" @click="handleOpenDoor">
      <view class="door-btn">开门</view>
    </view>

    <!-- 我的按钮 -->
    <view class="nav-item" @click="handleNav('mine')">
      <text class="nav-icon">👤</text>
      <text class="nav-text">我的</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PageNav',
  props: {
    // 当前高亮的tab: 'home' | 'mine'
    activeTab: {
      type: String,
      default: 'home'
    }
  },
  methods: {
    handleNav(tab) {
      // 发出事件，由父组件处理导航
      this.$emit('change', tab);
    },
    handleOpenDoor() {
      uni.showModal({
        title: '开门',
        content: '确认打开柜门？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({ title: '柜门已打开', icon: 'success' });
          }
        }
      });
      this.$emit('openDoor');
    }
  }
}
</script>

<style scoped>
.page-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.08);
  z-index: 999;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.nav-icon {
  font-size: 40rpx;
  margin-bottom: 4rpx;
}

.nav-text {
  font-size: 24rpx;
  color: #999;
}

.nav-item:active .nav-text,
.nav-item.active .nav-text {
  color: #2979ff;
}

.door-btn-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -80rpx;
}

.door-btn {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #2979ff, #1e60e0);
  color: #fff;
  font-size: 38rpx;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 36rpx rgba(41, 121, 255, 0.55);
}
</style>