<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string;
  fixed?: boolean
  showLeft?: boolean
  customClass?: string
  /** 左侧返回为白底圆形+阴影（用于预约日期等浅色页） */
  circleBack?: boolean
}>(), {
  fixed: true,
  showLeft: true,
  circleBack: false
});

function handleClickLeft() {
  // 页面栈不足时，navigateBack 会失败；兜底回首页
  const pages = getCurrentPages?.() || []
  if (pages.length <= 1) {
    uni.switchTab({ url: '/pages/home/index' })
    return
  }
  uni.navigateBack()
}
</script>

<template>
  <wd-navbar
      :title="props.title"
      safeAreaInsetTop
      :fixed="props.fixed"
      :placeholder="props.fixed"
      :bordered="false"
      :custom-class="props.customClass"
      @click-left="handleClickLeft">
    <template #left>
      <view class="shrink-0" v-if="showLeft">
        <view
          class="flex items-center justify-center"
          :class="circleBack ? 'navbar-circle-back' : ''"
        >
          <view
            :class="[
              'i-carbon:chevron-left text-50rpx',
              circleBack ? 'ml-0 text-#111' : 'ml-[-10rpx] text-primary',
            ]"
          ></view>
        </view>
      </view>
    </template>
    <template #right>
      <slot name="right"></slot>
    </template>
  </wd-navbar>
</template>

<style scoped lang="scss">
.navbar-circle-back {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background-color: #fff;
  // box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}

:deep(.wd-navbar) {
  z-index: 2 !important;
  .wd-navbar__title {
    font-weight: 500 !important;
  }
}
</style>
