<template>
  <div class="wf-item" :class="temporary ? 'wf-temp' : ''">
    <div v-if="temporary"></div>
    <div v-else class="wf-item-mid">
      <div class="layer-image" @click="onClick" :style="`height: ${data.blockWidth * data.scale}px`">
        <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')">
          <span class="avatar">
            <WidgetAvatar :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
          </span>
          <span class="name">{{data.authorName}}</span>
        </div>

        <div class="fav">
          <WidgetFav :articleId="data.articleId" :num="data.praiseCount" :option="favOption"></WidgetFav>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      imgWidth: 350
    }
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    temporary: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    favOption() {
      return {
        selected: this.data.hasPraised === 'Y',
        iconBold: true,
        iconFontSize: 26,
        textAlign: 'normal'
      }
    }
  },
  methods: {
    onClick(type) {
      this.$emit('click', {data: this.data, type});
    }
  }
};
</script>

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

    .wf-item-mid {
      border-radius: 2PX;
      box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }

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

      > 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;
    }

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;

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

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

    .fav {
      line-height: 60px;

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

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