<template>
  <view :class="navBarClass" :style="navBarStyle">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }" v-if="!hideStatusBar"></view>
    
    <!-- 导航栏内容 -->
    <view class="nav-bar-content" :style="{ height: navBarHeight + 'px' }">
      <!-- 左侧返回按钮 -->
      <view class="nav-bar-left" @click="handleBack" v-if="showBack">
        <uni-icons type="left" size="20" :color="backIconColor" />
      </view>
      
      <!-- 中间标题区域 -->
      <view :class="['nav-bar-center', `nav-bar-center--${titleAlign}`]">
        <slot name="title">
          <text class="nav-bar-title" :style="{ color: titleColor }">{{ title }}</text>
        </slot>
      </view>
      
      <!-- 右侧操作区域 -->
      <view class="nav-bar-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'

// 定义props
const props = defineProps({
  // 标题文本
  title: {
    type: String,
    default: ''
  },
  // 是否固定在顶部
  fixed: {
    type: Boolean,
    default: false
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true
  },
  // 背景颜色
  backgroundColor: {
    type: String,
    default: '#ffffff'
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: '#333333'
  },
  // 返回按钮图标颜色
  backIconColor: {
    type: String,
    default: '#333333'
  },
  // 是否隐藏状态栏占位
  hideStatusBar: {
    type: Boolean,
    default: false
  },
  // 自定义z-index
  zIndex: {
    type: Number,
    default: 999
  },
  // 标题对齐方式
  titleAlign: {
    type: String,
    default: 'center', // 'center' | 'left'
    validator: (value) => ['center', 'left'].includes(value)
  }
})

// 定义emits
const emit = defineEmits(['back'])

// 系统信息
const statusBarHeight = ref(0)
const navBarHeight = ref(44) // 默认导航栏高度

// 获取系统信息
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  // 根据平台设置导航栏高度
  if (systemInfo.platform === 'ios') {
    navBarHeight.value = 44
  } else {
    navBarHeight.value = 48
  }
})

// 计算导航栏样式类
const navBarClass = computed(() => {
  return [
    'top-nav-bar',
    {
      'top-nav-bar--fixed': props.fixed
    }
  ]
})

// 计算导航栏样式
const navBarStyle = computed(() => {
  return {
    backgroundColor: props.backgroundColor,
    zIndex: props.zIndex
  }
})

// 处理返回事件
const handleBack = () => {
  emit('back')
  // 如果没有监听back事件，默认执行返回上一页
  if (!emit('back')) {
    uni.navigateBack({
      delta: 1
    })
  }
}
</script>

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