<template>
  <div class="fixed-header" :class="{'full-header': step >= 100}" :style="`background: rgba(255,255,255,${stepPercent});`">
    <LayoutHeader theme="transparent">
      <template>
        <div ref="titleBlock" class="title-block" :style="titleStyle">#{{title}}</div>
      </template>
      <template v-slot:opts>
        <WidgetShare v-if="!share" class="topic-share" :option="shareOption" @click.native="onShare"></WidgetShare>
      </template>
    </LayoutHeader>
    <div class="suction-top-block">
      <slot name="suctionTop"></slot>
    </div>
  </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() {
      let percent = parseInt(this.step, 10) / 100;

      this.setIconColor(Math.floor((255 - 34) * (1 - percent) + 34));

      return percent;
    },
    titleStyle() {
      const criticalPercent = 0.3;
      const style = {
        opacity: 0
      };

      if (this.stepPercent > criticalPercent) {
        style.opacity = ((this.stepPercent - criticalPercent) / (1 - criticalPercent)).toFixed(2);
      }

      return style;
    }
  },
  mounted() {
    this._iconColor && this.setIconColor(this._iconColor);
  },
  methods: {
    setIconColor(color) {
      if (!this.$el) {
        this._iconColor = color;
        return;
      }

      if (!this.icons) {
        this.icons = [...this.$el.querySelectorAll('.back .iconfont'), ...this.$el.querySelectorAll('.opts .iconfont')];
      }

      if (this.icons && this.icons.length) {
        this.icons.forEach(dom => {
          dom.style.color = `rgb(${color},${color},${color})`;
        });
      }
    },
    onFollow(follow) {
      this.$emit('on-follow', follow);
    },
    onShare() {
      this.$yoho.share(getTopicShareData(this.data));
    }
  }
};
</script>

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

  &.full-header:after {
    content: "";
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
  }

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

  .title-block {
    color: #222;
    line-height: 1.2;
    font-size: 36px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    transition: opacity 100ms;
  }

  .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;
  }

  .suction-top-block {
    width: 100%;
    position: absolute;
    top: 100%;
  }
}
</style>