<template>
    <van-nav-bar
      :left-text="leftText"
      :left-arrow="leftArrow"
      :border="border"
      :fixed="fixed"
      :placeholder="placeholder"
      :z-index="zIndex"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <slot slot="title" name="title">{{ title }}</slot>
      <slot slot="right" name="right"></slot>
    </van-nav-bar>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      leftText: {
        type: String,
        default: '',
      },
      leftArrow: {
        type: Boolean,
        default: true,
      },
      border: {
        type: Boolean,
        default: true,
      },
      fixed: {
        type: Boolean,
        default: true,
      },
      placeholder: {
        type: Boolean,
        default: true,
      },
      zIndex: {
        type: Number | String,
        default: 99,
      },
      isCustom: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {}
    },
    methods: {
      onClickLeft() {
        if (this.isCustom) {
          this.$emit('go-back')
        } else {
          this.$router.go(-1)
        }
      },
      onClickRight() {},
    },
  }
</script>
<style lang="scss" scoped>
  ::v-deep {
    .van-nav-bar__left{
      padding-left: 10px;
    }
    .van-icon {
    color: $base-text-color;
    font-size: 22px;
  }
  }
  
  ::v-deep .van-nav-bar__text {
    color: $base-text-color;
  }
  ::v-deep .van-ellipsis {
    color: $base-text-color;

  }
  ::v-deep .van-nav-bar__title {
    font-weight: 800;
    font-size: 17px;
  }
</style>
