<template>
  <div class="fixed-header" :style="`background: rgba(64,64,64,${stepPercent});`">
    <LayoutHeader theme="transparent">
      <template>
        <div ref="titleBlock" class="title-block">
          <span :style="titleStyle">#{{title}}</span>
        </div>
        <div class="att-topic-btn" :class="attClass">
          <WidgetFollow class="att-click-wrap" :topic-id="data.topicId" :follow="data.hasAttention" @on-follow="onFollow"></WidgetFollow>
          <span>{{data.hasAttention ? '已关注' : '关注'}}</span>
        </div>
      </template>
      <template v-slot:opts>
        <WidgetShare class="topic-share" :option="shareOption" @click.native="onShare"></WidgetShare>
      </template>
    </LayoutHeader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shareOption: {
        color: '#fff',
        iconBold: true
      },
      offsetLeft: 0
    }
  },
  props: [
    'title',
    'step',
    'data'
  ],
  computed: {
    stepPercent() {
      return parseInt(this.step, 10) / 100;
    },
    titleStyle() {
      let style = {};

      if (this.offsetLeft) {
        style.transform = `translate3d(${-this.stepPercent * this.offsetLeft}px, 0, 0)`;
      } else {
        this.updateTitleOffset();
      }

      return style;
    },
    attClass() {
      return {
        active: this.data.hasAttention,
        show: this.stepPercent > 0.86
      };
    }
  },
  methods: {
    updateTitleOffset() {
      this.$nextTick(() => {
        this.offsetLeft = this.$refs.titleBlock.offsetLeft + 40;
      });
    },
    onFollow(follow) {
      this.$emit('on-follow', follow);
    },
    onShare() {
      this.$yoho.share({
        title: '#' + this.data.topicName,
        imgUrl: this.data.topicImageUrl,
        link: window.location.href.split('?')[0],
        desc: this.data.topicDesc,
        hideType: ['7', '8', '9']
      });
    }
  }
};
</script>

<style scoped>
.fixed-header {
  position: fixed;
  width: 100%;
  z-index: 10;
  transition: all 500ms;

  /deep/ .title {
    overflow: visible!important;
  }

  .title-block {
    font-size: 0;

    > span {
      max-width: 400px;
      line-height: 1.2;
      font-size: 36px;
      display: inline-block;
      vertical-align: super;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      position: relative;
      transition: all 116ms;
    }
  }

  .att-topic-btn {
    min-width: 110px;
    height: 50px;
    border-radius: 26px;
    padding: 0 5px;
    font-size: 0;
    color: #444;
    background: #fff;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -50px;
    top: 50%;
    margin-top: -24px;
    opacity: 0;
    transition: opacity 300ms ease-in-out;

    > span {
      font-size: 26px;
      line-height: 1;
      display: inline-block;
    }

    &.show {
      opacity: 1;
    }

    &.active {
      background: none;
      color: #fff;
    }
  }

  .topic-share {
    margin-right: 26px;
  }
}
</style>