<template>
  <div class="comment">
    <div class="comment-type-list">
      <span
        v-for="(item, index) in type"
        :key="`type-${index}`"
        :class="{ select: selectType === item.value }"
        @click="changeType(item.value)"
      >
        {{ item.desc }}({{ item.num }})
      </span>
    </div>
    <cr-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="error"
      error-text=""
      @load="onLoad"
    >
      <div v-for="(item, index) in orderList" :key="`item-${index}`" class="comment__wrap">
        <div class="wrap__content">
          <cr-card
            :title="item.nickName"
            :thumb="item.userImageUrl"
            class="content__user-info"
            img-height="30"
          >
            <template #thumb>
              <cr-image
                v-imogr="{ w: 30, h: 30 }"
                round
                height="0.8rem"
                width="0.8rem"
                :src="`${item.userImageUrl}`"
                alt=""
                class="user-info__thumb"
              />
            </template>
            <template #title>
              <p class="user-info__title">
                <span>{{ item.nickName }}</span>
                <span class="user-info__date">{{ item.creationTime }}</span>
              </p>
            </template>
            <template #price>
              <cr-rate
                v-model="item.score"
                size="18"
                gutter="3px"
                class="user-info__rate"
                readonly
              />
            </template>
          </cr-card>
          <div class="content__content">
            <cr-text v-model="item.content" />
            <div class="content__group">
              <template v-for="(video, videoKey) in item.videos">
                <p :key="`video-${videoKey}`" class="content__video" @click="preview(item.imgIdx)">
                  <img :src="video.mainUrl" width="100%" height="100%" />
                  <span class="video-btn" />
                </p>
              </template>

              <p :class="['group--more', { ml: item.hasVideo }]">
                <template v-for="(img, imgKey) in item.images">
                  <p
                    v-if="(item.hasVideo && imgKey < 2) || (!item.hasVideo && imgKey < 6)"
                    :key="`img-${imgKey}`"
                    :class="{
                      img__wrap: item.images.length,
                      'group--one': !item.hasVideo && item.images.length == 1,
                      mt: (!item.hasVideo && imgKey > 2) || (item.hasVideo && imgKey === 1),
                      mr: !item.hasVideo && (imgKey + 1) % 3
                    }"
                    @click="showPreviewEvent(item, imgKey)"
                  >
                    <!-- @click="preview(item.imgIdx + imgKey + 1)" -->
                    <span
                      v-if="
                        (item.hasVideo && imgKey === 1 && item.images.length > 2) ||
                          (!item.hasVideo && imgKey === 5)
                      "
                      class="img--mask"
                    >
                      共{{ item.images.length }}张 <cr-icon type="arrow" size="15px" />
                    </span>
                    <img
                      v-imogr="{ w: 105, h: 105 }"
                      :src="changeUrl(img)"
                      width="100%"
                      height="100%"
                    />
                  </p>
                </template>
              </p>
            </div>
          </div>
        </div>
      </div>
    </cr-list>
    <cr-image-preview
      v-model="showPreview"
      :images="previewData"
      :start-position="idx"
      class="preview"
      @touchmove.prevent="noscroll"
    />
    <cr-image-preview
      v-model="showImagePreview"
      :images="previewImageData"
      :start-position="imagePreviewInd"
      class="preview"
      @touchmove.prevent="noscroll"
    />
    <!-- @touchmove.prevent移动阻止滚动 -->
  </div>
</template>
<script>
import { getCommentList } from '@/api/goods.api';
import CrText from './components/textDetail.vue';
import '@/components/video/custom-skin.less';
export default {
  components: {
    CrText
  },
  data() {
    return {
      showImagePreview: false,
      previewImageData: [],
      imagePreviewInd: 0,

      orderList: [],
      loading: false,
      finished: false,
      showPreview: false,
      previewData: [],
      idx: 0,
      previewLen: 0,
      error: false,
      selectType: 0,
      pageSize: 20,
      pageNo: 1,
      type: [
        {
          desc: '全部',
          value: 0,
          num: 0
        },
        {
          desc: '好评',
          value: 1,
          num: 0
        },
        {
          desc: '中/差评',
          value: 2,
          num: 0
        }
      ]
    };
  },
  watch: {
    showPreview(val) {
      // pc阻止滚动
      document.body.style.position = val ? 'overflow' : 'auto';
    }
  },
  mounted() {},
  methods: {
    changeType(type) {
      // 选择评价类型
      this.selectType = type;
      this.pageNo = 1;
      this.finished = false;
      this.orderList = [];
      this.getOrderInfo(true);
    },
    beforeRead(index, file) {
      this.orderList[index].resourceList.push(file);
    },
    check() {
      let flag = true;
      for (let obj of this.orderList) {
        if (!obj.score) {
          this.$toast('请对商品进行评分');
          flag = false;
          break;
        } else if (!obj.resourceList.length) {
          this.$toast('请为宝贝拍买家秀');
          flag = false;
          break;
        }
      }
      return flag;
    },
    async getOrderInfo() {
      const { productId: skuNo, shopId } = this.$route.query;
      const params = {
        skuNo,
        shopId,
        commentQuery: this.selectType,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        queryCurrentSkuComment: true
      };
      try {
        const [res, err] = await getCommentList(params);
        this.error = false;
        this.loading = false;
        if (!err || (res && !res.hasNext)) {
          if (!res.hasNext) {
            this.finished = true;
            return;
          }

          this.page++;
          const { commentCountStr, betterCommentCountStr, negativeCommentCountStr } = res;
          this.type = this.type.map(item => {
            if (commentCountStr && item.value === 0) {
              item.num = commentCountStr;
            }
            if (betterCommentCountStr && item.value === 1) {
              item.num = betterCommentCountStr;
            }
            if (negativeCommentCountStr && item.value === 2) {
              item.num = negativeCommentCountStr;
            }
            return item;
          });
          const list = res.commentInfoVoList.map(item => {
            item.images = item.images || [];
            item.videos = item.videos || [];
            const imgList = item.images ? item.images.map(img => this.changeUrl(img, 'big')) : [];
            const videoList = item.videos
              ? item.videos.map(video => ({ type: 'video/mp4', src: video.remark }))
              : [];
            this.previewData = [...this.previewData, ...videoList, ...imgList];
            const obj = {
              ...item,
              hasVideo: !!(item.videos && item.videos.length),
              imgIdx: this.previewLen,
              content: item.content && item.content.replace(/京东/g, '')
            };
            const vlen = (item.videos && item.videos.length) || 0;
            this.previewLen += (item.imageCount || 0) + vlen;
            return obj;
          });
          if (list && list.length < this.pageSize) {
            this.finished = true;
          } else {
            this.pageNo++;
          }
          this.orderList = this.orderList.concat(list);
        }
      } catch (error) {
        console.log(error);
        this.error = true;
        this.loading = false;
      }
    },
    onLoad() {
      this.getOrderInfo();
    },
    changeUrl(url, type) {
      if (url && url.indexOf('imageView2') > -1) {
        return url;
      }
      if (type) {
        return (url += '?imageView2/1/q/70');
      }
      return (url += '?imageView2/1/w/200/h/200/q/55');
    },
    preview(idx) {
      this.idx = idx;
      this.showPreview = true;
    },
    showPreviewEvent(item, index) {
      this.imagePreviewInd = index;
      this.previewImageData = item.images || [];
      this.showImagePreview = true;
    },
    nosroll(e) {
      e.stopPropagation();
      e.preventDefault();
    }
  }
};
</script>
<style lang="less" scoped>
.comment {
  height: 100%;
  color: @gray-5;
  width: 100%;
  padding: 0 10px 10px;
  box-sizing: border-box;
  background: linear-gradient(#fff, #f7f7f7 130px);
  /deep/ .cr-image-preview__close-icon {
    position: absolute !important;
  }
  &-type-list {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    span {
      display: flex;
      flex-shrink: 0;
      padding: 0 10px;
      height: 28px;
      background: #f7f8fa;
      border-radius: 14px;
      font-size: 12px;
      color: #333333;
      margin-right: 8px;
      align-items: center;
      &.select {
        background: #fff3f3;
        color: #ec1500;
      }
    }
  }
  &__wrap {
    background-color: @white;
    padding: 5px 10px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .wrap__content {
    font-size: 13px;
    width: 100%;
    height: auto;
    color: @gray-6;
    @{deep} .cr-card__header__content {
      min-height: 0 !important;
      height: 30px;
      display: flex;
      align-items: center;
    }
  }
  .content__user-info {
    background-color: @white;
    padding: 0px;
    height: 48px;
    display: flex;
    align-items: center;
    width: 100%;
    @{deep} .cr-card__header,
    @{deep}.cr-card__header__content__info,
    @{deep} .cr-card__header__content__number {
      width: 100%;
    }
  }
  .user-info__thumb {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    margin-right: 5px;
  }
  .user-info__rate {
    transform: scale(0.5);
    transform-origin: 0;
    width: 100%;
  }
  .user-info__title {
    display: flex;
    justify-content: space-between;
    color: @gray-5;
    font-size: 13px;
    // position: relative;
    :nth-child(2) {
      position: absolute;
      z-index: 4;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      color: @gray-4;
      font-size: 15px;
    }
  }
  .content__content {
    margin-top: 10px;
  }
  .content__text {
    width: 100%;
    line-height: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
  }
  .content__group {
    display: flex;
    margin-top: 10px;
  }
  .group--more {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    .img__wrap {
      position: relative;
      width: 105px;
      height: 105px;
      box-sizing: border-box;
    }
    .img--mask {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      z-index: 9;
      background-color: rgba(0, 0, 0, 0.4);
      color: @white;
      font-size: 13px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
    }
    img {
      border-radius: 6px;
      object-fit: fill;
    }
  }
  .group--one {
    width: 220px !important;
    height: 220px !important;
  }
  .content__video {
    width: 220px;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    .video-btn {
      position: absolute;
      width: 58px;
      height: 58px;
      top: 50%;
      left: 50%;
      margin-top: -29px;
      margin-left: -29px;
      background-image: url(~@/assets/images/goods/play.png);
      background-size: 100%;
    }
  }
  .ml {
    margin-left: 10px;
  }
  .mt {
    margin-top: 10px;
  }
  .mr {
    margin-right: 10px;
  }
  .preview {
    font-size: 15px !important;
    // background-color: #000000;
  }
}
</style>
