<template>
  <div class="Seval">
    <dl class="Seval-top">
      <dt class="Seval-top-avatar">
        <cr-image width="100%" height="100%" round :src="commentDetail.userImageUrl" />
      </dt>
      <dd class="Seval-top-user">
        <div class="Seval-top-user__name">{{ commentDetail.nickName }}</div>
        <div class="Seval-top-user__star">
          <cr-rate :value="commentDetail.score" size="9px" />
        </div>
      </dd>
    </dl>
    <p v-if="commentDetail.content" class="Seval-content">
      {{ commentDetail.content }}
    </p>
    <div v-if="commentDetail.images" class="Seval-picture">
      <cr-grid :border="false" :column-num="5" class="Seval-picture-grid">
        <cr-grid-item
          v-for="(item, index) in commentDetail.images || []"
          :key="index"
          class="card-grid__item"
        >
          <div class="Seval-picture-image">
            <cr-image
              width="100%"
              height="100%"
              lazy-load
              :src="item"
              @click="imagePreviewClick(index)"
            />
          </div>
        </cr-grid-item>
      </cr-grid>
    </div>
    <!-- <cr-image-preview
      v-model="showPreview"
      :images="images"
      :start-position="startIndex"
      @change="imagePreviewChange"
    /> -->
  </div>
</template>

<script>
import { Img2Thumb } from '@/filters/img2Thumb.filter';
export default {
  filters: { Img2Thumb },
  props: {
    commentInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      value: 5,
      showPreview: false,
      startIndex: 0,
      previewIndex: 0
    };
  },
  computed: {
    commentDetail() {
      const [firstItem] = this.commentInfo.commentInfoVoList || [];
      return firstItem || {};
    }
  },
  mounted() {
    console.log(this.$slots);
  },
  methods: {
    imagePreviewClick(index) {
      this.startIndex = index;
      this.showPreview = true;
    },
    imagePreviewChange(index) {
      this.previewIndex = index;
    }
  }
};
</script>
<style lang="less" scoped>
.Seval {
  padding-top: @padding-sm;
  &-top {
    display: flex;

    &-avatar {
      width: 30px;
      height: 30px;
    }

    &-user {
      flex: 1;
      padding-left: 5px;
      box-sizing: border-box;
      &__name {
        .text-size(13);
        color: @gray-5;
      }
    }
    @{deep} .cr-rate {
      display: flex;
      margin-top: 2px;
    }
    @{deep} .cr-rate__icon-wrap {
      display: inline-flex;
    }
  }
  &-content {
    .text-size(13);
    .mx_multline_overwrite();
    margin-top: @padding-sm;
  }

  &-picture {
    margin-top: @padding-xs;
    overflow: hidden;
    position: relative;

    &-grid {
      flex-wrap: nowrap;
      overflow-y: hidden;
      overflow-x: auto;
      @{deep} .cr-grid-item__content {
        padding: 0;
      }
      &::-webkit-scrollbar {
        display: none;
      }
      .card-shop-image {
        margin-right: 8px;
      }
    }
    &-image {
      width: 80px;
      height: 80px;
      margin-right: 5px;
      border-radius: 8px;
      overflow: hidden;
    }
  }

  @{deep} .cr-image-preview__index {
    .text-size(12);
  }
}
</style>
