<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string;
  fixed?: boolean
  showLeft?: boolean
  customClass?: string
}>(), {
  fixed: true,
  showLeft: true
});

function handleClickLeft() {
  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="i-carbon:chevron-left text-50rpx text-primary ml-[-10rpx]"></view>
      </view>
    </template>
    <template #right>
      <slot name="right"></slot>
    </template>
  </wd-navbar>
</template>

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