<template>
  <view
    class="custom-nav-bar"
    :style="{ height: navBarHeight + 'px', background: bgcolor }"
  >
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏内容 -->
    <view class="nav-bar-content" :style="{ height: navBarContentHeight + 'px' }">
      <!-- 左侧返回按钮 -->
      <view class="nav-bar-left" v-if="showBackButton">
        <view class="back-button" @click="goBack">
          <uni-icons type="back" size="24" color="#000"></uni-icons>
        </view>
      </view>

      <!-- 中间标题 -->
      <view class="nav-bar-center">
        <text class="nav-titles">{{ title }}</text>
      </view>

      <!-- 右侧插槽 -->
      <view class="nav-bar-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CustomNavBar',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    showBackButton: {
      type: Boolean,
      default: false
    },
    bgcolor: {
      type: String,
      default: '#FFFFFF'
    }
  },
  data() {
    return {
      statusBarHeight: 0, // 状态栏高度
      navBarHeight: 0, // 导航栏总高度（状态栏 + 导航栏内容）
      navBarContentHeight: 44 // 导航栏内容高度（默认 44px）
    };
  },
  mounted() {
    this.getSystemInfo();
  },
  methods: {
    // 获取系统信息
    getSystemInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.statusBarHeight = res.statusBarHeight; // 获取状态栏高度
          this.navBarHeight = this.statusBarHeight + this.navBarContentHeight; // 计算导航栏总高度
		  // 将 navBarHeight 传递给父组件
		  this.$emit('updateHeight', this.navBarHeight);
        }
      });
    },
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style scoped>
.custom-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.status-bar {
  width: 100%;
}

.nav-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.nav-bar-left {
  display: flex;
  align-items: center;
}

.back-button {
  padding: 8px;
}

.nav-bar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-titles {
  font-size: 16px;
  font-weight: bold;
  color: #FFF;
}

.nav-bar-right {
  display: flex;
  align-items: center;
}
</style>