<template>
  <view class="comment-list" v-if="commentCount && commentCount.length > 0">
    <u-tabs
      name="name"
      :list="commentCount"
      :is-scroll="false"
      :active-color="mc"
      :current="current"
      @change="tabsChange"
    ></u-tabs>
    <view class="comment-details" style="heigh: calc(100% - 40px);" v-if="comments.length>0">
      <scroll-view
        :scroll-y="true"
        @scrolltolower="lower"
        :enable-back-to-top="true"
        :enable-flex="true"
        style="height: 100%; padding-bottom: 0px;"
      >
        <view class="comment">
          <view class="content" v-for="(x, i) in comments" :key="i">
            <view class="u-box">
              <view class="user">
                <u-avatar :src="x.UserPhotoPath" :size="50"></u-avatar>
                <text style="margin-left: 10px;">{{ x.UserName }}</text>
              </view>
              <view class="timer">{{ x.CreateDate }}</view>
            </view>
            <view class="ucontent">{{ x.Content }}</view>
            <view class="imagebox" v-for="(y, yi) in x.formatPic" :key="yi">
              <view
                class="item"
                v-for="(z, zi) in y"
                :key="zi"
                :style="{ 'max-width': yi == 0 ? 'unset' : '31.9%' }"
              >
                <view class="scal" @click="previewImage(z,x.pic_url)">
                  <image :src="z" mode="aspectFill" class="image" />
                  <view
                    class="more"
                    v-if="
                      x.pic_url.length > 4 &&
                      (yi + 1) * (zi + 1) == x.pic_url.length
                    "
                  >
                    <view style="width: 100%;">
                      <view class="big">5图</view>\n\r
                      <view class="small">查看全部</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore
          :status="status"
          :load-text="loadText"
          :font-size="24"
          :margin-top="20"
          :margin-bottom="20"
          bg-color="#fff"
        />
      </scroll-view>
    </view>
    <u-empty
      text="没有找到相关评论"
      mode="news"
      v-else
    ></u-empty>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      page: 1,
      pageCount: 0,
      id: 0,
      comments: [],
      commentCount: [],
      loading: false,
      mc: "",
      pageTitle: "全部评论",
      status: "loadmore",
      isover: false,
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多评论了",
      },
	  msg:{
		pageIndex:1,
		pageSize:20,
		GoodsId:0,
		CommentGrade:0  
	  }
    };
  },
  onLoad(option) {
    uni.showNavigationBarLoading();
    this.id = option.id || 46942;
    this.mc = this.$uiConfig.mainColor;
    this.init();
    this.initPage();
  },
  methods: {
    previewImage(i,images) {
      uni.previewImage({
        urls: images,
        current: i,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    initPage() {
      let currentPages = getCurrentPages();
      let u = "/" + currentPages[currentPages.length - 1].route;
      let pages = uni.getStorageSync("basedata")
        ? uni.getStorageSync("basedata").bar_title
        : [];
      pages.forEach((x) => {
        if (x.value == u) {
          this.pageTitle = x.new_name ? x.new_name : x.name;
        }
      });
      uni.setNavigationBarTitle({
        title: this.pageTitle,
      });
    },
    init() {
      this.isover = false;
      this.loading = true;
      this.showLoading = this.page != 1;
	  this.msg.GoodsId=this.id;
      this.request2(
        {
          url: "/api/AppletOrder/GetAppletGoodsCommentPageList",
          data: this.msg,
        },
        (res) => {
          this.comments = res.data.pageData;
          this.comments.forEach((x) => {
            x.formatPic = this.formatPic(x.CommentImgList);
          });
          //TODO 缺陷待处理
          // this.commentCount = res.data.comment_count;
		  this.commentCount = res.data.pageData;
          this.pageCount = Math.ceil(
            // parseFloat(this.commentCount[0].count) / 10.0
			parseFloat(res.data.count) / 10.0
			
          );
          this.commentCount.forEach((x) => {
            x.name = x.UserName + "(" + x.Content + ")";
          });
          this.showLoading = true;
          if (this.pageCount == 1) {
            this.isover = true;
            this.status = "nomore";
          } else {
            this.status = "loadmore";
          }
          this.loading = false;
          uni.hideNavigationBarLoading();
        }
      );
    },
    formatPic(pics) {
      let arr = [];
      let temp = [];
      pics.forEach((x, i) => {
        temp.push(x);
        if (i == 2) {
          arr.push(temp);
          temp = [];
        } else if (i == 5) {
          arr.push(temp);
          temp = [];
        } else if (i == pics.length - 1) {
          arr.push(temp);
        }
      });
      return arr;
    },
    tabsChange(index) {
      this.current = index;
      this.init()
      this.page=1
    },
    lower(e) {
      if (this.page < this.pageCount) {
        if (!this.loading) {
          this.status = "loading";
          this.page++;
          this.init();
        }
      } else {
        this.isover = true;
        this.status = "nomore";
      }
    },
  },
};
</script>
<style>
.comment-list {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.comment-list .comment-details {
  height: calc(100% - 40px);
  padding: 10px 0 0 0;
}
.comment-list .comment-details .comment {
  /* margin: 10px 0;
  background: #fff;

  padding: 10px; */
}
.comment-list .comment-details .comment .chead {
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.comment-list .comment-details .comment .content {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  padding: 10px;
  background: #fff;
}
.comment-list .comment-details .comment .content .u-box {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.comment-list .comment-details .comment .content .u-box .user {
  flex: 1;
  font-size: 12px;
  color: gray;
  align-items: center;
  display: flex;
}
.comment-list .comment-details .comment .content .u-box .timer {
  font-size: 12px;
  color: gray;
  text-align: right;
  flex: 1;
}
.comment-list .comment-details .comment .content .u-box .ucontent {
  font-size: 12px;
  color: #000;
  margin-top: 10px;
}
.comment-list .comment-details .comment .content .imagebox {
  display: flex;
  /* justify-content:space-evenly; */
  margin-right: -5px;
  margin-bottom: -5px;
  margin-top: 5px;
  /* flex-wrap: wrap; */
}
.comment-list .comment-details .comment .content .imagebox .item {
  flex: 1;
  max-width: 70vw;
  margin-right: 5px;
  margin-bottom: 5px;
  min-width: 31.9%;
}
.comment-list .comment-details .comment .content .imagebox .item .scal {
  width: 100%;
  padding-bottom: 100%;
  height: 0;
  position: relative;
  overflow: hidden;
}
.comment-list .comment-details .comment .content .imagebox .item .scal .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  height: 100%;
}
.comment-list
  .comment-details
  .comment
  .content
  .imagebox
  .item:first-child
  .scal {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.comment-list
  .comment-details
  .comment
  .content
  .imagebox
  .item:last-child
  .scal {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.comment-list .comment-details .comment .content .imagebox .item .scal .more {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
}
.comment-list
  .comment-details
  .comment
  .content
  .imagebox
  .item
  .scal
  .more
  .big {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 5px;
}
.comment-list
  .comment-details
  .comment
  .content
  .imagebox
  .item
  .scal
  .more
  .small {
  font-size: 14px;
  text-align: center;
}
</style>
