<template>
  <div v-if="commentInfo.showCommentEntry && commentInfo.commentInfoVoList" class="good__comment">
    <div class="comment__head">
      <h4 class="comment__title">
        商品评价
        <small>{{ commentInfo.commentCountStr }}</small>
      </h4>
      <div class="comment__right" @click="navToComment">
        <!-- <span>{{ commentInfo.praiseRate }}</span> -->
        <span>全部评价</span>
        <cr-icon type="arrow" color="#999" size="0.35rem" />
      </div>
    </div>
    <div class="comment__list">
      <div
        v-for="(item, key) in commentInfo.commentInfoVoList"
        :key="key"
        class="comment__list__item"
      >
        <div class="comment__user">
          <cr-image
            :src="item.userImageUrl | imogr"
            round
            width="0.8rem"
            height="0.8rem"
            class="comment__avatar"
          />
          <div class="comment__user__right">
            <div class="comment__username">{{ item.nickName }}</div>
            <cr-rate class="comment__rate" size="9px" :value="item.score" readonly />
          </div>
        </div>
        <p class="comment__text">{{ item.content }}</p>
        <div v-if="item.images" class="comment__galley">
          <cr-image
            v-for="(it, k) in item.images"
            :key="k"
            width="2.13rem"
            height="2.13rem"
            :src="it | imogr({ w: 80, h: 80 })"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from '../store';

export default {
  name: 'CommentLite',
  computed: {
    ...mapGetters(['commentInfo', 'selectedSku'])
  },
  methods: {
    navToComment() {
      this.$router.push({ path: '/commentList', query: { productId: this.selectedSku.skuId } });
    }
  }
};
</script>
<style lang="less" scoped>
.good__comment {
  padding: @padding-sm;
}
.comment {
  &__head {
    margin-bottom: @padding-sm;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  &__title {
    .text-size(16);
    font-weight: 500;
    color: @black;
    small {
      .text-size(12);
      font-weight: 500;
      color: @black;
      margin-left: @padding-unit;
    }
  }
  &__right {
    display: flex;
    align-items: center;
    span {
      .text-size(12);
      font-weight: 400;
      color: @gray-4;
    }
    .cr-icon {
      vertical-align: -2.5px;
    }
  }
  &__user {
    display: flex;
    align-items: flex-start;
    margin-bottom: @padding-sm;
    &__right {
      display: flex;
      flex-direction: column;
    }
  }

  &__avatar {
    margin-right: @padding-unit;
  }
  &__username {
    .text-size(13);
    font-weight: 400;
    color: @gray-5;
  }
  &__rate {
    height: 12px;
    @{deep} .cr-rate__icon-wrap {
      top: -20px;
    }
  }
  &__text {
    .text-size(13);
    font-weight: 400;
    color: @black;
    word-break: break-all;
    margin-bottom: @padding-xs;
  }
  &__galley {
    margin-bottom: @padding-xs;
    .cr-image {
      border-radius: @border-radius-md;
      margin: 0 @padding-unit @padding-unit 0;
    }
  }
}
</style>
