<template>
  <div class="comment-index-com bg-grey">
    <mescroll-vue
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOptions"
      :up="upOptions"
    >
      <div class="list-content">
        <list-item
          v-for="(item, index) in listComment"
          :key="index"
          :itemData="item"
          :goodsId="goodsId"
          @previewItem="previewItem"
        />
      </div>
    </mescroll-vue>
    <!-- <m-preview ref="Preview"></m-preview> -->
  </div>
</template>

<script>
import ListItem from "./list-item.vue";
// import MPreview from "@/pages/components/preview/preview.vue"
import { MescrollMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin],
  // components:{ListItem,MPreview},
  components: { ListItem },
  data() {
    return {
      downOptions: {
        autoShowLoading: false,
        auto: true,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        textNoMore: "没有更多啦",
        callback: this.upCallback,
      },
      listComment: [],
      goodsId: "",
    };
  },
  mounted() {
    this.goodsId = this.$route.query.goodsId;
  },
  methods: {
    previewItem(index, list) {
       this.$PreviewImage({
          sources:list,
          current:index
        })
    },
    requestData(page) {
      this.$api({
        apiName: "getListComment",
        postData: { page: page.num, size: 10, param: this.goodsId },
        success: (res) => {
          let arr = res.list || [];
          arr.map((x) => {
            x.shopName = res.shopName;
            x.shopUrl = res.shopUrl;
            x.imagesList = [];
            if (
              Object.prototype.toString.call(x.commentVo).slice(8, -1) !==
              "Object"
            ) {
              x.commentVo = {
                list: [],
                imagesJson: "[]",
              };
            }
            x.imagesList = JSON.parse(x.commentVo.imagesJson);
          });
          if (page.num === 1) {
            this.listComment = arr;
          } else {
            this.listComment = this.listComment.concat(arr);
          }
          this.mescroll.endBySize(this.listComment.length, res.count);
          this.$nextTick(() => {
            if (this.listComment.length === 0) {
              this.mescroll.endBySize(0, 0);
              this.mescroll.showEmpty();
            }
          });
        },
        fail: () => {
          this.mescroll.endBySize(0, 0);
        },
        complete: () => {
          this.mescroll.endDownScroll();
        },
      });
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.requestData(page);
    },
  },
};
</script>
<style lang="less">
.comment-index-com {
  height: 100vh;
  //   height: 100%;
  //   display: flex;
  //   flex-direction: column;
  //   justify-content: space-between;
  .list-content {
    padding-top: 10px;
  }
//   ::v-deep.mescroll-uni-warp {
//     .mescroll-uni-fixed {
//       height: 100%;
//     }
//   }
}
</style>
