<template>
  <view>
    <!-- 占位高度 -->
    <view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
    <view class="navbar" :style="{ height: `${height}px`, backgroundColor: isTransparent ? 'transparent' : '#fff' }">
      <!-- 左边返回键 -->
      <view v-if="showBack" @click="goBack" class="back-icon">
        <uni-icons type="left" size="24"></uni-icons>
      </view>
      <!-- 中间内容 -->
      <view class="center-content" :style="centerContentStyle">
        <view v-if="showSearch">
          <uni-search-bar placeholder="搜索"></uni-search-bar>
        </view>
        <view v-else>{{ title }}</view>
      </view>
      <!-- 右边文字 -->
      <view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
    </view>
  </view>
</template>

<script setup>
import { useNavbarStore } from '@/store/navbarStore';
import { ref, onMounted } from 'vue';

const store = useNavbarStore();
const { showBack, rightText, showSearch, title, isTransparent, height, hasPlaceholder } = store;

const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};

const onRightTextClick = () => {
  console.log('右边文字被点击');
};

const centerContentStyle = ref({});

onMounted(() => {
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  const systemInfo = uni.getSystemInfoSync();
  const statusBarHeight = systemInfo.statusBarHeight;

  // 计算标题的垂直偏移量
  const verticalOffset = menuButtonInfo.top - statusBarHeight;
  const titleHeight = menuButtonInfo.height;

  centerContentStyle.value = {
    paddingTop: `${20}px`,
    height: `${titleHeight}px`,
    lineHeight: `${titleHeight}px`,
    boxSizing: 'border-box',
	
  };
  console.log(centerContentStyle)
});
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 999;
  box-sizing: border-box;
}

.back-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-right: 10px;
}

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

.right-text {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-left: 10px;
  font-size: 16px;
  line-height: 1;
}
</style>