<template>
  <div :class="navBarClass" :style="navBarStyle">
    <!-- 导航栏内容 -->
    <div class="flex items-center justify-between px-[8px]" :style="{ height: navBarHeight + 'px' }">
      <!-- 左侧返回按钮 -->
      <div class="w-[30px] h-[30px] flex items-center justify-center" v-if="showBack" @click="handleBack">
        <van-icon name="arrow-left" size="20" :color="backIconColor" />
      </div>

      <!-- 中间标题区域 -->
      <div :class="[
        'flex-1 h-[30px] px-[20px] flex items-center',
        titleAlign === 'center' ? 'justify-center text-center' : 'justify-start text-left',
      ]">
        <slot name="title">
          <text class="text-[17px] font-medium text-black" :style="{ color: titleColor }">
            {{ title }}
          </text>
        </slot>
      </div>

      <!-- 右侧操作区域 -->
      <div class="w-[30px] h-[30px]">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from 'vue-router'


const router = useRouter()
// 定义props
const props = defineProps({
  // 标题文本
  title: {
    type: String,
    default: "",
  },
  // 是否固定在顶部
  fixed: {
    type: Boolean,
    default: false,
  },
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true,
  },
  // 背景颜色
  background: {
    type: String,
    default: "#E8FFF1",
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: "#000",
  },
  // 返回按钮图标颜色
  backIconColor: {
    type: String,
    default: "#000",
  },
  // 是否隐藏状态栏占位
  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),
  },
});

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

// 计算导航栏样式类
const navBarClass = computed(() => {
  return [
    "w-full",
    {
      "fixed top-0 left-0 right-0": props.fixed,
    },
  ];
});

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

// 处理返回事件
const handleBack = () => {
  router.back()
};
</script>
