<template>
  <van-nav-bar :title="title" @click-left="onClickLeft" @click-right="onClickRight">
    <template #left>
      <slot name="left">
        <van-icon name="arrow-left" size="20" />
      </slot>
    </template>
    <template #right>
      <slot name="right"> </slot>
    </template>
  </van-nav-bar>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

@Component({
  name: "TitleBar",
})
export default class TitleBar extends Vue {
  @Prop({ default: "" }) title: string | undefined; // 页面标题
  @Prop({ default: false }) disabled: boolean | undefined; // 禁用左边点击事件
  onClickLeft() {
    if (this.disabled) return;
    const event = "clickLeft";
    const eventAli = "click-left";
    if (this.$listeners[event]) {
      this.$emit(event);
    } else if (this.$listeners[eventAli]) {
      this.$emit(eventAli);
    } else {
      this.$router.go(-1);
    }
  }

  onClickRight() {
    this.$emit("click-right");
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: white;
  }
}
::v-deep .van-nav-bar {
  z-index: 999999 !important;
}
::v-deep .van-nav-bar__right {
  color: white;
}
::v-deep .van-nav-bar__left .van-icon {
  padding-top: 16px;
}
</style>
