<template>
  <div class="fixed-header">
    <LayoutHeader :hide="noHeader" theme="transparent" :style="`background: rgba(255,255,255,${stepPercent});`" :title="`${title}`">
      <template>
        <div ref="titleBlock" class="title-block" :style="titleStyle">{{title}}</div>
      </template>
      <template v-slot:opts>
        <WidgetShareAuthor v-if="!share" class="author-share" :option="shareAuthorOption" @click.native="onShare"></WidgetShareAuthor>
      </template>
      <template v-slot:suctionTop>
        <slot name="suctionTop"></slot>
      </template>
    </LayoutHeader>
    <div v-if="step >= 100" class="full-header-bg"></div>
  </div>
</template>

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

export default {
  data() {
    return {
      shareAuthorOption: {
        color: '#fff',
        iconBold: true
      },
      offsetLeft: 0
    };
  },
  props: {
    title: String,
    share: Boolean,
    step: Number
  },
  computed: {
    ...mapState(['yoho']),
    noHeader() {
      return this.yoho.context.env.isChat;
    },
    stepPercent() {
      let percent = this.step / 100;

      this.setIconColor(Math.floor((300 - 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})`;
        });
      }
    },
    onShare() {
      this.$emit('on-share');
    }
  }
};
</script>

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

    .full-header-bg {
      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;
      }
    }

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