<template>
  <van-nav-bar
    :placeholder="baseProps.placeholder"
    fixed
    safe-area-inset-top
    :title="title"
    :style="{
      '--van-nav-bar-background': baseProps.navBarBackground,
      '--van-nav-bar-icon-color': baseProps.color,
      '--van-nav-bar-text-color': baseProps.color,
      '--van-nav-bar-title-text-color': baseProps.color,
      '--van-border-width': '0',
    }"
    :left-arrow="showBar"
    @click-left="onClickLeft"
  />

</template>

<script lang="ts" setup>
import {computed} from 'vue'
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()

const baseProps = defineProps({
  navBarBackground: {
    type: String,
    default: '#151515'
  },
  color: {
    type: String,
    default: '#fff'
  },
  placeholder: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  title: {
    type: String,
  }
})



const onClickLeft = () => {
  router.back()
}

const title = computed(() => {
  return baseProps.title || route.meta.title
})
const showBar = computed(() => {
  return route.meta.showBar
})

</script>

<style lang="scss" scoped>

</style>