<template>
  <div class="article-item-header">
    <div class="avatar" @click="goAuthor">
      <WidgetAvatar class="widget-avatar" :src="data.avatar" :width="70" :height="70"></WidgetAvatar>
      <span class="name">{{data.name}}</span>
    </div>
    <div class="opts">
      <WidgetFollow v-if="data.authorUid" v-bind="data"></WidgetFollow>
    </div>
  </div>
</template>

<script>

import YAS from 'utils/yas-constants';

export default {
  name: 'ArticleAuthor',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    posId: Number
  },
  methods: {
    goAuthor() {
      this.$router.push({
        name: 'author',
        params: {
          type: this.data.authorType,
          id: this.data.authorUid
        }
      });

      this.reportClickAvatar();
    },
    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;
    border-bottom: 4px solid #f0f0f0;
    height: 44PX;
  }

  .avatar {
    display: flex;
    align-items: center;
    padding: 16px 30px;
    width: 400px;
    overflow: hidden;
    background-color: #fff;

    .name {
      font-size: 24px;
      margin-left: 20px;
    }

    .widget-avatar {
      width: 70px;
      height: 70px;
    }
  }

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