<template>
  <div v-if="data.topicImageUrl" class="topic-head" :style="headStyle">
    <div class="center">
      <p class="desc">{{data.topicDesc}}</p>
      <div v-if="showAttAmount" class="att-amount">
        <label>{{data.attAmount}}人已关注</label>
      </div>
      <div v-if="+data.allowAttention" class="att-topic-btn" :class="attClass" @click="onClick">
        <WidgetFollow v-if="!share" class="att-click-wrap" :topic-id="data.topicId" :follow="data.hasAttention" @on-follow="onFollow"></WidgetFollow>
        <template v-if="data.hasAttention">
          已关注
        </template>
        <template v-else>
          <span class="iconfont icon-plus"></span>
          关注话题
        </template>
      </div>
    </div>
  </div>
  <div v-else class="topic-head-empty" :style="headStyle"></div>
</template>

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

export default {
  props: ['data', 'share'],
  computed: {
    ...mapState(['yoho']),
    headStyle() {
      let top = 0;

      if (this.yoho.window.statusBarStatus) {
        top = get(this.yoho, 'window.statusBarHeight', 0);
      }

      let style = {
        paddingTop: `${44 + top}px`
      };

      if (this.data.topicImageUrl) {
        style.backgroundImage = `url(//${this.data.topicImageUrl.split('//')[1]})`;
      }

      return style;
    },
    showAttAmount() {
      return this.data && +this.data.showAttAmount > 0;
    },
    attClass() {
      return {
        active: this.data.hasAttention
      };
    }
  },
  methods: {
    onClick() {
      if (this.share) {
        return this.$links.toDownloadApp();
      }
    },
    onFollow(follow) {
      this.$emit('on-follow', follow);
    },
  }
};
</script>

<style scoped>
.topic-head {
  min-height: 360px;
  background-size: 100%;
  box-sizing: border-box;
  position: relative;
  background-size: cover;
  display: flex;
  align-items: center;

  &:before {
    content: "";
    height: 1px;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 1;
    box-shadow: 0 0 140px 40px #000;
  }

  .center {
    width: 100%;
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 100px;
    box-sizing: border-box;
  }

  .desc {
    font-size: 24px;
    color: #fff;
    line-height: 1.42;
    word-break: break-all;
  }

  $attColor: #b0b0b0;

  .att-amount {
    margin-top: 20px;
    color: $attColor;
    display: flex;
    justify-content: center;

    label {
      display: inline-block;
      position: relative;
      line-height: 1;

      &:before,
      &:after {
        content: "";
        width: 60px;
        height: 2px;
        background-color: $attColor;
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -1px;
      }

      &:before {
        right: calc(100% + 20px);
      }

      &:after {
        left: calc(100% + 20px);
      }
    }
  }

  .att-topic-btn {
    width: 200px;
    height: 50px;
    font-size: 26px;
    border-radius: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d90025;
    color: #fff;
    margin: 36px auto 0;
    position: relative;

    .iconfont {
      font-weight: bold;
      margin-right: 10px;
    }

    &.active {
      background-color: #e48a8a;
    }
  }
}
</style>