<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 v-if="!share && +data.allowAttention" class="att-topic-btn" :class="attClass">
          <WidgetFollow class="att-click-wrap" :topic-id="data.topicId" :follow="data.hasAttention" :share="share" @on-follow="onFollow"></WidgetFollow>
          <span>{{data.hasAttention ? '已关注' : '关注'}}</span>
        </div>
      </template>
      <template v-slot:opts>
        <WidgetShare v-if="!share" class="topic-share" :option="shareOption" @click.native="onShare"></WidgetShare>
      </template>
    </LayoutHeader>
  </div>
</template>

<script>
import {get} from 'lodash';
import {getTopicShareData} from 'utils/share-handler';

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

      if (!this.offsetLeft) {
        this.updateTitleOffset();
      }

      if (get(this, '$yoho.isiOS')) {
        style.transform = `translate3d(${-stepPercent * this.offsetLeft}px, 0, 0)`;
      } else {
        style.transform = `translate3d(${this.stepPercent > 0.86 ? -this.offsetLeft : 0}px, 0, 0)`;
      }

      return style;
    },
    attClass() {
      return {
        active: this.data.hasAttention,
        show: this.stepPercent > 0.86
      };
    }
  },
  watch: {
    title() {
      this.offsetLeft = 0;
    }
  },
  methods: {
    updateTitleOffset() {
      if (this.$refs && this.$refs.titleBlock) {
        this.$nextTick(() => {
          this.offsetLeft = this.$refs.titleBlock.offsetLeft + 40;
        });
      }
    },
    onFollow(follow) {
      this.$emit('on-follow', follow);
    },
    onShare() {
      this.$yoho.share(getTopicShareData(this.data));
    }
  }
};
</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>