<template lang="pug">
  view.title-bar(:style="{backgroundColor: (backgroundColor || ''), height: (height || '')}")
    view.back
      image(v-if="navigateBack" :src="(navigateBackIcon || backIcon)" @click="navigateTo")
      text(v-if="fontSize && fontSize>0" :style="{fontSize: (fontSize + 'px'), color: (color || 'rgba(0, 0, 0, 0.9)')}") {{title}}
      text(v-else :style="{fontSize: (fontSize + 'px'), color: (color || 'rgba(0, 0, 0, 0.9)')}") {{title}}
      image.option(v-if="icon" :src="icon" @click="onClick")
</template>

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

@Component
export default class TitleBar extends Vue {
  @Prop() public title!: string;
  @Prop() public navigateBack!: string | number | boolean;
  @Prop() public icon!: string;
  @Prop() public navigateBackIcon!: string;
  @Prop() public fontSize!: number;
  @Prop() public height!: number;
  @Prop() public color!: string;
  @Prop() public backgroundColor!: string;
  @Prop() public redirect!: boolean;

  private backIcon: string = IconHelper.getBack();

  mounted() {
    if(this.color && (this.color.toLowerCase() == '#ffffff' || this.color.toLowerCase() == '#fff')) {
      this.backIcon = IconHelper.getBackForWhite()
      return;
    }

    this.backIcon = IconHelper.getBack()
  }

  onClick(e: any) {
    this.$emit("click", e);
  }

  navigateTo() {
    this.$emit("navigateTo", this.navigateBack);
    if(!this.navigateBack) {
      return;
    }

    if(typeof (this.navigateBack) == "number") {
      uni.navigateBack({delta: this.navigateBack});
      return;
    }

    if(typeof (this.navigateBack) == "string") {
      if (this.redirect) {
        uni.redirectTo({url: this.navigateBack})
      } else {
        uni.navigateTo({url: this.navigateBack})
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../static/styles/h5-unit';
@import '../../static/styles/base';


.back {
  /* #ifdef MP-WEIXIN */
  margin-top: $px77;
  /* #endif */
  /* #ifdef H5 */
  margin-top: $px33;
  /* #endif */
  /* #ifdef APP-PLUS */
  margin-top: $px66;
  /* #endif */
  margin-left: $px18;
  margin-bottom: $px20;
  display: flex;
  align-items: baseline;
  image {
    width: $px27;
    height: $px27;
  }

  text {
    margin-left: $px15;
    font-size: $px27;
    color: rgba(0, 0, 0, 0.9);
    position: absolute;
    top: -$px6;
    left: $px25;
  }
}

.option {
  right: $px18;
  width: $px25;
  height: $px25;
  position: absolute;
}
</style>
