<template>
  <div class="layout-header" :class="{[`theme-${theme}`]: theme}">
    <div class="back flex hover-opacity" @click="onBack">
      <slot name="back" v-if="back">
        <i class="iconfont icon-left"></i>
      </slot>
    </div>
    <div class="title flex" :style="{opacity}">
      <slot>
        {{title}}
      </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,
    theme: String,
    fixed: Boolean,
    back: {
      type: Boolean,
      default: true
    },
    transparentSeek: Number,
    opacity: {
      type: Number,
      default: 1
    }
  },
  computed: {
    ...mapState(['yoho'])
  },
  watch: {
    transparentSeek(value) {
      this.animeEl && this.animeEl.seek(this.animeEl.duration * value);
    }
  },
  mounted() {
    if (this.transparentSeek >= 0) {
      import('animejs').then(({default: anime}) => {
        this.animeEl = anime({
          targets: this.$el,
          backgroundColor: '#222',
          easing: 'easeInOutQuad',
          autoplay: false
        });
      });
    }
  },
  methods: {
    onBack() {
      if (this.yoho.homePage) {
        this.$yoho.finishPage({});
      } else {
        this.$router.go(-1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.layout-header {
  width: 100%;
  height: 44PX;
  background-color: #444;
  color: #fff;
  overflow: hidden;
  display: flex;

  &.theme-white {
    background-color: #fff;
    color: #222;
    border-bottom: solid 1px #e0e0e0;
  }

  &.theme-transparent {
    background-color: initial;
    color: #fff;
  }

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

  .iconfont {
    height: 100%;
    font-size: 20PX;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10PX;
    padding-right: 10PX;
  }

  .back {
    width: 160px;
    padding-left: 5px;
  }

  .title {
    flex: 1;
    justify-content: center;
    font-size: 18PX;
    letter-spacing: 0.09PX;
  }

  .opts {
    width: 160px;
    justify-content: flex-end;
    padding-right: 5px;

    .iconfont {
      font-size: 23PX;
    }
  }
}
</style>