<template>
  <div class="goods-comment-con">
    <!-- 评价 -->
    <div class="header flex-default" @click="commentList">
      <div class="title flex-default">
        <m-icon icon="icon-3dot" :size="10" className="icon" />
        <span>评价</span>
      </div>
      <m-icon icon="icon-more" :size="10" className="more" />
    </div>
    <!-- 		<scroll-view class="tag-list" :scroll-x="true">
			<div class="tag">音质清晰</div>
			<div class="tag">音质清晰</div>
			<div class="tag">音质清晰</div>
			<div class="tag">音质清晰</div>
			<div class="tag">音质清晰</div>
			<div class="tag">音质清晰</div>
			<div class="tag">音质清晰</div>
		</scroll-view> -->
    <div class="comm-list">
      <div
        class="comm-item"
        v-for="(item, index) in listComment"
        :key="'comm-item-' + index"
        @click="handleClick(item)"
      >
        <div class="header flex-default" v-if="item.commentVo">
          <div class="avatar" v-if="item.commentVo">
            <img
              :src="item.commentVo.headUrl"
              style="width: 100%; height: 100%; border-radius: 50%"
            />
          </div>
          <div class="name">{{ item.commentVo.nickName }}</div>
          <div class="score">
            {{ item.commentVo.businessEvaluate | getGoodsScore }}分
          </div>
        </div>
        <div class="content-text" v-if="item.commentVo">
          {{ item.commentVo.content }}
        </div>
        <div class="content-img flex-default">
          <div class="img-list">
            <div
              class="item"
              v-for="(img, i) in item.imagesList"
              :key="i"
              @click.stop="previewItem(item, 'img', i)"
            >
              <img :src="img" mode="" style="width: 100%; height: 100%" />
            </div>
            <div
              class="item vide-con"
              v-if="item.commentVo.video"
              @click.stop="previewItem(item, 'video')"
            >
              <video :src="item.commentVo.video" :poster="item.commentVo.video+'?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast'"/>
              <div class="mask" />
            </div>
          </div>
        </div>
        <div class="sku" v-if="item.commentVo">
          {{ item.commentVo.list | getSkuStr }}
        </div>
      </div>
    </div>

    <!-- 问答 -->
    <!-- <div class="header flex-default">
      <div class="title flex-default">
        <m-icon icon="icon-3dot" :size="3" className="icon" />
        <text>问答</text>
      </div>
      <m-icon icon="icon-more" :size="10" className="more" />
    </div>
    <div class="QandA-con">
      <div class="item flex-default">
        <m-icon icon="icon-QandA" :size="15" className="q-icon" />
        <div class="question">耳机的音质怎么样，好用么</div>
        <div class="num">12个回答</div>
      </div>
      <div class="item flex-default">
        <m-icon icon="icon-QandA" :size="15" className="q-icon" />
        <div class="question">耳机的音质怎么样，好用么</div>
        <div class="num">12个回答</div>
      </div>
      <div class="bottom flex-default">
        <button class="all-btn">查看全部50条问题</button>
      </div>
    </div> -->
  </div>
</template>

<script>
import { CommentMixin } from "@/mixins";
export default {
  mixins: [CommentMixin],
  props: {
    goodsId: String,
    merchant: Object,
  },
  data() {
    return {
      listComment: [],
    };
  },
  created() {
    this.requestData();
  },
  methods: {
    handleClick(obj) {
      let query = { goodsId: this.goodsId, commentId: obj.commentVo.commentId };
      this.$router.push({ name: "comment-detail", query });
    },
    previewItem(obj, type, index) {
      let list = [];
      for (let item of obj.imagesList) {
        list.push({ type: "img", url: item });
      }
      if (obj.commentVo.video) {
        list.push({
          type: "video",
          url: obj.commentVo.video,
          video: obj.commentVo.video,
        });
      }
      if (type === "img") {
         this.$PreviewImage({
            sources:list,
            current:index
          })
      } else {
        this.$PreviewImage({
            sources:list.length - 1,
            current:list
          })
      }
    },
    commentList() {
      let query = { goodsId: this.goodsId };
      this.$router.push({ name: "comment-list", query });
    },
    requestData() {
      this.$api({
        apiName: "getListComment",
        postData: { page: 1, size: 2, param: this.goodsId },
        success: (res) => {
          let arr = res.list || [];
          arr.map((x) => {
            x.imagesList = [];
            if (
              Object.prototype.toString.call(x.commentVo).slice(8, -1) !==
              "Object"
            ) {
              x.commentVo = {
                list: [],
                imagesJson: "[]",
              };
            }
            x.imagesList = JSON.parse(x.commentVo.imagesJson);
          });
          this.listComment = arr;
        },
      });
    },
  },
};
</script>

<style lang="less">
.goods-comment-con {
  padding: 14px 0 14px 16px;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;

  > .header {
    padding-right: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    .title {
      font-size: 14px;
      font-weight: bold;
      color: #140603;
      align-items: center;
    }

    .title .icon {
      margin-right: 5px;
    }

    .more {
    }
  }

  > .tag-list {
    padding-right: 16px;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 8px;

    .tag {
      display: inline-block;
      font-size: 11px;
      color: #140603;
      line-height: 26px;
      border-radius: 13px;
      background: #ecf1fc;
      padding: 0 13px;
      margin-right: 6px;
    }
  }

  > .comm-list {
    margin-bottom: 18px;

    .comm-item {
      padding: 11px 16px 11px 0;
      border-bottom: 1px solid #f1f1f1;
    }

    .comm-item > .header {
      align-items: center;
      margin-bottom: 7px;

      .avatar {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #aeaeae;
        margin-right: 8px;
      }

      .name {
        color: #140603;
        font-size: 12px;
        font-weight: bold;
        flex: 1;
      }

      .score {
        color: #dd2e41;
        font-size: 12px;
        font-weight: bold;
      }
    }

    .comm-item > .content-text {
      color: #140603;
      font-size: 12px;
      line-height: 17px;
      margin-bottom: 14px;
    }

    .comm-item > .content-img {
      align-items: center;
      margin-bottom: 10px;
      overflow: hidden;
      width: 100%;
      .item {
        height: 90px;
        width: 90px;
        // background-color: #d8d8d8;
        border-radius: 4px;
        margin-right: 5px;
        flex-shrink: 0;
        display: inline-block;
      }
      .img-list {
        // padding-right: 32rpx;
        white-space: nowrap;
        width: 100%;
        margin-bottom: 8px;
      }
      .vide-con {
        position: relative;
        video {
          width: 100%;
          height: 100%;
        }
        .mask {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
        }
      }
    }

    .comm-item > .sku {
      color: #aeaeae;
      font-size: 10px;
      line-height: 14px;
    }
  }

  > .QandA-con {
    padding-right: 16px;

    > .item {
      align-items: center;
      margin-bottom: 8px;
    }

    > .item .q-icon {
      margin-right: 8px;
    }

    > .item .question {
      color: #140603;
      font-size: 10px;
      flex: 1;
    }

    > .item .num {
      color: #aeaeae;
      font-size: 10px;
    }

    > .bottom {
      margin-top: 18px;
      justify-content: center;
    }

    > .bottom .all-btn {
      font-size: 12px;
      color: #140603;
      height: 30px;
      line-height: 28px;
      border: 1px solid #aeaeae;
      border-radius: 15px;
      background: #ffffff;
      padding: 0 19px;

      &::after {
        border: none;
      }
    }
  }
}
</style>
