<template>
  <div class="article-item-header">
    <div class="avatar" @click="toUserPage">
      <WidgetAvatar :pos-id="posId" :share="share" :lazy="lazy" class="widget-avatar" :src="data.authorHeadIco" :group="data.authGroupId" :width="70" :height="70"></WidgetAvatar>
      <div class="user-info">
        <p class="user-name">{{data.authorName}}</p>
        <p v-if="data.authorRank" class="user-rank">
          <span class="rank-name">{{data.authorRank}}</span>
        </p>
      </div>
    </div>
    <div class="opts">
      <WidgetFollow :class="invisibleClass" v-if="data.hasAttention" :share="share" :author-uid="data.authorUid" :authorType="data.authorType" :follow="data.hasAttention" @on-follow="onFollow" :pos-id="posId"></WidgetFollow>
      <i v-if="more" class="iconfont icon-more1" @click="onMore"></i>
    </div>
  </div>
</template>

<script>
import YAS from 'utils/yas-constants';

export default {
  name: 'ArticleItemHeader',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    lazy: {
      type: Boolean,
      default: true
    },
    more: {
      type: Boolean,
      default: true
    },
    type: String,
    share: Boolean,
    thumb: Boolean,
    posId: Number
  },
  computed: {
    invisibleClass() {
      return {
        invisible: this.data.isAuthor === 'Y'
      };
    }
  },
  methods: {
    onMore() {
      this.$emit('on-show-more');
    },
    toUserPage() {
      if (this.share) {
        return this.$links.toDownloadApp();
      }

      this.$router.push({
        name: 'author',
        params: {
          type: this.data.authorType,
          id: this.data.authorUid
        }
      });

      this.reportClickAvatar();
    },
    onFollow(follow) {
      this.$emit('on-follow', follow);
    },
    reportClickAvatar() {
      this.$store.dispatch('reportYas', {
        params: {
          appop: YAS.eventName.avatar,
          param: {
            AUTH_ID: this.data.authorUid,
            POS_ID: this.posId
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.article-item-header {
  display: flex;
  justify-content: center;
  height: 110px;
  overflow: hidden;
  background-color: #fff;
}

.avatar {
  display: flex;
  align-items: center;
  padding-left: 30px;
  width: 400px;
  overflow: hidden;

  .widget-avatar {
    width: 60px;
    height: 60px;
    display: block;
  }

  .user-info {
    max-width: 250px;
    margin-left: 20px;

    > * {
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .user-name {
    font-size: 24px;
  }

  .user-rank {
    margin-top: 8px;
  }

  .rank-name {
    font-size: 20px;
    transform: scale(0.9, 0.9);
    color: #4a4a4a;
    display: inline-block;
  }
}

.opts {
  flex: 1;
  padding-right: 30px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .icon-more1 {
    font-size: 40px;
    margin-left: 30px;
    width: 45px;
  }
}
</style>