<template>
  <div class="header">
    <div class="back-wrapper flex" @touchend="onBack">
      <div class="back" v-if="showBack"></div>
    </div>
    <div class="title flex" :style="{opacity}">
      <slot>
        <span class="title-inner">{{title}}</span>
      </slot>
    </div>
    <div class="opts flex" :style="{opacity}">
      <slot name="opts"></slot>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: 'LayoutHeader',
  props: {
    title: String,
    opacity: {
      type: Number,
      default: 1
    },
    showBack: {
      type: Boolean,
      default: true
    }
  },
  title(setTitle) {
    if (!setTitle) {
      return this.title;
    }
    if (this.title) {
      setTitle(this.title);
    }
    this.setTitle = setTitle;
  },
  computed: {
    ...mapState(['yoho'])
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 45PX;
  padding-left: 20PX;
  padding-right: 20PX;
  background-color: #fff;
  display: flex;
  align-items: stretch;
  box-sizing: border-box;

  .flex {
    display: flex;
    align-items: center;
  }

  .back-wrapper {
    height: 100%;
    width: 60PX;
  }

  .back {
    width: 24PX;
    height: 24PX;
    background: url(~statics/image/order/back@3x.png) no-repeat;
    background-size: cover;
  }

  .title {
    flex: 1;
    justify-content: center;
    font-size: 18PX;
    letter-spacing: 0.09PX;
    overflow: hidden;
    z-index: 1;

    .title-inner {
      max-width: 90%;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
  }

  .opts {
    width: 60PX;
    height: inherit;
    justify-content: flex-end;
  }
}
</style>