<template>
  <view class="nav-bar" :style="{ background: bgColor }">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏内容 -->
    <view class="nav-content" :style="{ height: navBarHeight + 'px' }">
      <!-- 左侧区域 -->
      <view class="nav-left" :style="{ width: leftWidth + 'px' }">
        <view v-if="showBack" class="nav-back" @click="goBack">
          <view class="back-icon"></view>
        </view>
        <slot name="left"></slot>
      </view>
      
      <!-- 标题区域 -->
      <view class="nav-title">
        <text class="title-text" :style="{ color: titleColor }">{{ title }}</text>
      </view>
      
      <!-- 右侧区域 -->
      <view class="nav-right" :style="{ width: rightWidth + 'px' }">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
  
  <!-- 占位元素，防止内容上移 -->
  <view 
    class="nav-placeholder" 
    :style="{ height: (statusBarHeight + navBarHeight) + 'px' }"
    v-if="fixed"
  ></view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';

interface Props {
  title?: string;
  showBack?: boolean;
  bgColor?: string;
  titleColor?: string;
  fixed?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  showBack: false,
  bgColor: '#ffffff',
  titleColor: '#1e293b',
  fixed: true
});

const emit = defineEmits<{
  (e: 'back'): void;
}>();

// 系统信息
const statusBarHeight = ref(0);
const navBarHeight = ref(44);
const menuButtonWidth = ref(87);
const menuButtonRight = ref(7);

// 计算左右区域宽度
const leftWidth = computed(() => {
  if (props.showBack) {
    return 60;
  }
  return menuButtonRight.value;
});

const rightWidth = computed(() => {
  return menuButtonWidth.value + menuButtonRight.value * 2;
});

onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 20;
  
  // 获取胶囊按钮位置信息
  // #ifdef MP-WEIXIN
  const menuButton = uni.getMenuButtonBoundingClientRect();
  if (menuButton) {
    menuButtonWidth.value = menuButton.width;
    menuButtonRight.value = systemInfo.screenWidth - menuButton.right;
    // 导航栏高度 = 胶囊高度 + 上下边距
    navBarHeight.value = menuButton.height + (menuButton.top - statusBarHeight.value) * 2;
  }
  // #endif
});

const goBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    // 如果是第一个页面，跳转到首页
    uni.switchTab({ url: '/pages/index/index' });
  }
  emit('back');
};
</script>

<style lang="scss" scoped>
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  
  /* 支持延伸到安全区域 */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.status-bar {
  width: 100%;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16rpx;
  position: relative;
}

.nav-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
}

.nav-back {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
  
  &:active {
    background: rgba(0, 0, 0, 0.05);
  }
  
  .back-icon {
    width: 20rpx;
    height: 20rpx;
    border-left: 4rpx solid var(--text-primary, #1e293b);
    border-bottom: 4rpx solid var(--text-primary, #1e293b);
    transform: rotate(45deg);
    margin-left: 8rpx;
  }
}

.nav-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  
  .title-text {
    font-size: 34rpx;
    font-weight: 600;
    color: $text-color-primary;
    max-width: 400rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }
}

.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 10;
}

.nav-placeholder {
  width: 100%;
}
</style>
