<!--
  @name:
  @description: -
  @author 张文
  @date: 2022-01-19
-->
<template>
  <van-nav-bar
    class="ty-nav-bar"
    :title="title"
    :left-text="leftText"
    :right-text="rightText"
    :left-arrow="leftArrow"
    :border="border"
    :fixed="fixed"
    :placeholder="placeholder"
    :z-index="zIndex"
    safe-area-inset-top
    @click-left="goBack"
    @click-right="clickRight"
  >
    <template slot="left">
      <slot name="left"></slot>
    </template>
    <template slot="title">
      <slot name="title"></slot>
    </template>
    <template slot="right">
      <slot name="right"></slot>
    </template>
  </van-nav-bar>
</template>

<script>

export default {
  name: "tyNavBar",
  props:{
    // 标题
    title:String,
    // 左侧按钮文字
    leftText:String,
    // 右侧按钮文字
    rightText:String,
    // 是否显示左侧箭头，默认显示
    leftArrow:{
      type:Boolean,
      default:true
    },
    // 是否显示下边框，默认显示
    border:{
      type:Boolean,
      default:true
    },
    // 是否固定在顶部，默认固定
    fixed:{
      type:Boolean,
      default:true
    },
    // 是否固定在顶部后插入一个同等高度的元素，默认添加
    placeholder:{
      type:Boolean,
      default:true
    },
    // 层级
    zIndex:{
      type:Number,
      default:9
    },
    // 点击返回的时候后退几步，默认后退一步
    backStep:{
      type:Number,
      default:1
    },
    // 左侧按钮点击事件
    clickLeft:Function,
    // 右侧按钮点击事件
    clickRight:{
      type:Function,
      default:()=>{}
    },

    // 当通过app返回时候到达页面点击退出的路由
    backRoute:{
      type: Array,
      default: () => []
    }
  },
  data(){
    return{
      // app点击返回到达页面再次点击退出app的路由
      initBackRoute:['/', '/tyHome', '/tyLogin', '/tyMy', '/tyInit']
    }
  },
  mounted() {
    window.appCallBack = this.appCallBack
  },
  methods:{
    // 返回按钮点击
    goBack(){
      if (typeof this.clickLeft==='function'){
        this.clickLeft()
      }else {
        history.go(-this.backStep)
      }
    },

    // 提供给app的返回按钮
    appCallBack(){
      let path = this.$route.path

      if(this.$tyAppBack.getExitRoute().includes(path)){
        return false
      }else{
        this.goBack()
        return true
      }
    }
  }
}
</script>

<style lang="less" scoped>


@import "../../assets/css/var.less";

.ty-nav-bar{

  /deep/.van-nav-bar{
    background: @navBarBackgroundColor;
  }

  /deep/.van-icon{
    color: @baseColor;
  }
  /deep/.van-nav-bar__title{
    font-weight: bold;
  }
}


</style>
