<template>
  <div class="vux-header">
    <div class="vux-header-left">
      <a
        v-show="leftOptions.showBack"
        class="vux-header-back"
        :transition="transition"
        @click.prevent="onClickBack"
      >{{ leftOptions.backText }}</a>
      <div
        v-show="leftOptions.showBack"
        class="left-arrow"
        :transition="transition"
        @click="onClickBack"
      />
      <slot name="left" />
    </div>
    <h1
      class="vux-header-title"
      @click="$emit('on-click-title')"
    >
      <span
        v-show="title"
        :transition="transition"
      >{{ title }}</span><slot />
    </h1>
    <div class="vux-header-right">
      <a
        v-if="rightOptions.showMore"
        class="vux-header-more"
        @click.prevent="$emit('on-click-more')"
      />
      <slot name="right" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    leftOptions: {
      type: Object,
      default () {
        return {
          showBack: true,
          backText: 'Back',
          preventGoBack: false
        }
      }
    },
    title: String,
    transition: String,
    rightOptions: {
      type: Object,
      default () {
        return {
          showMore: false
        }
      }
    }
  },
  methods: {
    onClickBack () {
      if (this.leftOptions.preventGoBack) {
        this.$emit('on-click-back')
      } else {
        window.history.back()
      }
    }
  }
}
</script>
