<template>
  <!-- 状态栏占位 -->
  <view class="nav-placeholder" :style="{ height: navHeight + 'px' }"></view>

  <view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">

    <view class="left" @click="goBack">
      <uni-icons type="left" size="18" />
    </view>

    <!-- 中间标题 -->
    <view class="title">{{ title }}</view>

    <!-- 右侧：父组件传入插槽 -->
    <view class="right">
      <slot name="right"></slot>
    </view>
  </view>

  <view class="content">
  </view>
</template>

<script setup>

import { ref, onMounted, toRefs } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app';
const props = defineProps({
  title: { type: String, default: '' },
  backUrl: { type: String, default: '' },
})
const statusBarHeight = ref(0)
const navHeight = ref(0)
const back = ref('')
const { backUrl, title } = toRefs(props)
onMounted(() => {
  const res = uni.getSystemInfoSync()
  statusBarHeight.value = res.statusBarHeight
  navHeight.value = res.statusBarHeight + 44
})
// 接收id 且修改标题
onLoad(() => {
  const pages = getCurrentPages()
  if (pages.length >= 2) {
    const prevPage = pages?.[pages.length - 2]
    back.value = backUrl.value ? backUrl.value : prevPage.route
    console.log(back.value, prevPage, pages, ' back.value');

  }

})
// 返回
const goBack = () => {
  console.log(back.value, back.value);

  if (back.value) {
    uni.navigateTo({
      url: `/${back.value}`,
    });
  } else {
    uni.navigateBack()
  }
}
</script>

<style scoped lang="scss">
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  z-index: 999;
  // margin-bottom: 8px;
}

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

.back-txt {
  margin-left: 6rpx;
}

.title {
  font-size: 14px;
  font-weight: bold;
}

.right {
  min-width: 60rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

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