<template>
  <div class="wf-item" :class="temporary ? 'wf-temp' : ''">
    <div v-if="temporary"></div>
    <div v-else class="wf-item-mid">
      <a v-if="actionUrl" class="action-article" :href="actionUrl" target="_blank"></a>
      <div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`">
        <div v-if="data.authStatus == 2" class="failed-cover">未审核通过</div>
        <div v-if="data.sort === 2" class="article-long-icon"></div>
        <ImageFormat :mode="1" :src="data.coverImage" :width="imgWidth" :height="Math.floor(data.scale * imgWidth)"></ImageFormat>
      </div>
      <div v-if="data.content" class="description" @click="onClick('article')">
        <p>{{data.content}}</p>
      </div>

      <div class="attribution">
        <div class="auther" @click="onClick('author')">
          <WidgetAvatar class="avatar" :src="data.authorHeadIco" :group="data.authGroupId" :small="true" :width="70" :height="70"></WidgetAvatar>
          <span class="name">{{data.authorName}}</span>
        </div>

        <div class="fav">
          <WidgetFav :articleId="data.articleId" :num="data.praiseCount" :option="favOption" :pos-id="sceneId"></WidgetFav>
        </div>
      </div>
    </div>
    <div v-if="data.recommendFlag" class="rec-flag"></div>
  </div>
</template>

<script>
import version from 'utils/version';
import YAS from 'utils/yas-constants';
export default {
  data() {
    return {
      imgWidth: 350,
      sceneId: YAS.scene.author
    };
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    temporary: {
      type: Boolean,
      default: false
    },
    index: Number,
    tab: Number
  },
  computed: {
    favOption() {
      return {
        selected: this.data.hasPraised === 'Y',
        iconBold: true,
        iconFontSize: 30,
        textAlign: 'normal'
      };
    },
    actionUrl() {
      if (this.data.sort === 3) {
        return this.data.actionUrl;
      } else if (+this.data.authStatus === 2 && +this.data.sort !== 2 && version(this.$yoho.appVersion, '6.9.5') >= 0) {
        return `?openby:yohobuy＝{"action":"go.editPost","params":{"articleId":"${this.data.articleId}"}}`;
      }

      return '';
    }
  },
  methods: {
    onClick(type) {
      if (type !== 'author') {
        this.reportClickArticle();
      }
      this.$emit('click', {data: this.data, type});
    },
    reportClickArticle() {
      this.$store.dispatch('reportYas', {
        params: {
          appop: YAS.eventName.articleExpand,
          param: {
            I_INDEX: this.index,
            ARTICLE_ID: this.data.articleId,
            POS_ID: this.posId
          }
        }
      });
    },
  }
};
</script>

<style lang="css">
  .wf-item {
    width: 100%;
    padding: 5px;
    font-size: 24px;
    position: relative;

    .wf-item-mid {
      border-radius: 2PX;
      position: relative;
      overflow: hidden;
      background-color: #fff;
    }

    .rec-flag {
      width: 70px;
      height: 28px;
      position: absolute;
      right: 0;
      top: 10px;
      z-index: 1;
      background-image: url('~statics/image/userpage/rec-flg.png');
      background-size: contain;
    }

    .action-article {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
    }

    .layer-image {
      background-color: #f4f4f4;
      min-height: 100px;
      position: relative;

      .failed-cover {
        font-size: 26px;
        color: #fff;
        font-weight: 300;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .article-long-icon {
        width: 36px;
        height: 36px;
        position: absolute;
        top: 18px;
        right: 18px;
        background-image: url('~statics/image/article/article-long-icon.png');
        background-size: 100% 100%;
      }

      > img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .description {
      line-height: 1.5;
      padding: 10px 20px;

      > p {
        word-break: break-all;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .attribution {
      display: flex;
      justify-content: space-between;
      padding: 20px;
    }

    .auther {
      display: flex;
      align-items: center;
    }

    .avatar {
      width: 20PX;
      height: 20PX;
      margin-right: 10px;
      display: block;
    }

    .name {
      max-width: 170px;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fav {
      line-height: 40px;

      .btn-selected > .icon-btn-text {
        color: #d90025!important;
      }
    }
  }

  .wf-temp {
    height: 0;
    overflow: hidden;
    position: absolute;
  }
</style>