<template>
  <view class="Mall4j page-comment-page detail">
    <view
      class="comment-popup"
      :class="{ show: isShowCommentPopup }"
    >
      <!-- #ifdef H5 -->
      <view
        v-if="isShowCommentPopup"
        class="top-bar"
      >
        <view
          class="arrow"
          @tap="onBackToDetail"
        />
        <view class="text">
          商品评价
        </view>
      </view>
      <!-- #endif -->
      <view class="comment-box comment-con">
        <view class="c-tit">
          <view class="text">
            <view class="big">
              评价
            </view>
            <view class="small">
              {{ commentData.number || 0 }}
            </view>
          </view>
          <view class="more">
            好评率 {{ commentData.positiveRating || 0 }} %
          </view>
        </view>
        <view class="c-tags">
          <view
            :class="['item', commentType === 0? 'active': '']"
            @tap="onhandleChangeCommentType(0)"
          >
            全部({{ commentData.number || 0 }})
          </view>
          <view
            :class="['item', commentType === 1? 'active': '']"
            @tap="onhandleChangeCommentType(1)"
          >
            好评({{ commentData.praiseNumber || 0 }})
          </view>
          <view
            :class="['item', commentType === 2? 'active': '']"
            @tap="onhandleChangeCommentType(2)"
          >
            中评({{ commentData.secondaryNumber || 0 }})
          </view>
          <view
            :class="['item', commentType === 3? 'active': '']"
            @tap="onhandleChangeCommentType(3)"
          >
            差评({{ commentData.negativeNumber || 0 }})
          </view>
          <view
            :class="['item', commentType === 4? 'active': '']"
            @tap="onhandleChangeCommentType(4)"
          >
            有图({{ commentData.picNumber || 0 }})
          </view>
        </view>
        <scroll-view
          v-if="commentList.length"
          scroll-y="true"
          class="c-con"
          :style="{height: commentContainerHeight + 'px'}"
        >
          <block
            v-for="(commentItem, commentPopupIdx) in commentList"
            :key="commentPopupIdx"
          >
            <view class="item">
              <view class="user-box">
                <view class="info">
                  <view class="img">
                    <image
                      style="border-radius:20rpx;"
                      :src="commentItem.userPic ? util.addDomain(commentItem.userPic) : '/static/images/head-sculpture.png'"
                    />
                  </view>
                  <view
                    class="text"
                    style="margin-left:20rpx;"
                  >
                    <view class="name">
                      {{ commentItem.isWriteOff ? '账号已注销' : (commentItem.isAnonymous === 1 ? '匿名用户': commentItem.nickName) }}
                    </view>
                    <view
                      v-if="commentItem.skuName"
                      class="sku-name"
                    >
                      {{ commentItem.skuName }}
                    </view>
                  </view>
                </view>
                <view class="time">
                  {{ commentItem.createTime }}
                </view>
              </view>
              <view class="stars">
                <block
                  v-for="(redStars, redIdx) in commentItem.score"
                  :key="redIdx"
                >
                  <view class="star">
                    <image src="/static/images/collect-r.png" />
                  </view>
                </block>
                <view
                  v-for="(garyStars, garyIdx) in (5-commentItem.score)"
                  :key="garyIdx"
                >
                  <view class="star">
                    <image src="/static/images/collect-g.png" />
                  </view>
                </view>
              </view>
              <view class="comment-detail">
                {{ commentItem.content }}
              </view>
              <block v-if="commentItem.pics">
                <view class="comment-img">
                  <scroll-view
                    scroll-x="true"
                    class="img-box"
                  >
                    <view
                      v-for="(commentImg, imgIdx) in commentItem.pics"
                      :key="imgIdx"
                      class="img"
                      @tap="onPreviewCommentImage(commentItem.pics, imgIdx)"
                    >
                      <!-- <image :src="commentImg" /> -->
                      <img-show
                        :src="commentImg"
                        :img-mode="'aspectFill'"
                      />
                    </view>
                  </scroll-view>
                </view>
              </block>
              <view
                v-if="commentItem.replyContent"
                class="reply"
              >
                <text class="title">
                  商家回复
                  <text class="reply-time">
                    {{ commentItem.replyTime }}
                  </text>
                </text>
                <view class="reply-content">
                  {{ commentItem.replyContent }}
                </view>
              </view>
            </view>
          </block>
          <view
            v-if="commentPageNum < commentTotalPage"
            class="c-btn"
          >
            <view
              class="view-all text-arrow"
              @tap="onLoadMoreComment"
            >
              加载更多
            </view>
          </view>
        </scroll-view>
        <empty-all-tips
          v-if="isLoaded"
          :empty-img="2"
          :is-empty="!commentList.length"
          empty-tips="还没有评论哦~"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util.js'

const isShowCommentPopup = ref(false)
let spuId = 0
// 商品评论
const commentData = ref({}) // 评论整体数据: 总数,好中差有图 各个数量
const commentList = ref([]) // 评论列表
const commentType = ref(0) // 评论类型 null/0 全部，1-好评 2-中评 3差评 4有图
const commentPageNum = ref(1) // 当前评论页码
const commentTotalPage = ref(0) // 商品评价总页数
const isLoaded = ref(false) // 列表是否加载完毕
const commentContainerHeight = ref(500)

/**
   * 生命周期函数--监听页面加载
   */
onLoad((options) => {
  if (options.spuId) {
    spuId = options.spuId
  }
  const res = uni.getSystemInfoSync()
  commentContainerHeight.value = res.windowHeight * 0.88
})

/**
 * 生命周期函数--监听页面显示
 */
onLoad(() => {
  // 获取商品评论数据
  onGetProdCommentData()
  // 获取商品评论列表
  onGetProdCommentList()
})

onUnmounted(() => {
  if (isShowPreview) {
    uni.closePreviewImage({
      success: () => {
        isShowPreview = false
      }
    })
  }
})

/**
 * 获取商品评论数据: 总评论数量,好中差有图评价数量
 */
const onGetProdCommentData = () => {
  const params = {
    url: '/tmerclub_product/spu_comm/ua/prod_comm_data',
    method: 'GET',
    data: {
      spuId
    }
  }
  http.request(params).then(res => {
    commentData.value = res
  })
}

/**
 * 获取商品评论列表
 */
const onGetProdCommentList = () => {
  isLoaded.value = false
  const params = {
    url: '/tmerclub_product/spu_comm/ua/page',
    method: 'GET',
    data: {
      evaluate: commentType.value,
      pageNum: commentPageNum.value || 1,
      pageSize: 8,
      spuId
    }
  }
  http.request(params).then(res => {
    isLoaded.value = true
    res.list.forEach((item) => {
      item.createTime = item.createTime.split(' ')[0]
    })
    const currentCommentList = res.list
    for (let i = 0; i < currentCommentList.length; i++) {
      const commentItem = currentCommentList[i]
      if (commentItem.pics) {
        commentItem.pics = commentItem.pics.split(',')
      }
    }
    if (commentPageNum.value === 1) {
      commentList.value = currentCommentList
    } else {
      commentList.value = commentList.value.concat(currentCommentList)
    }
    commentTotalPage.value = res.pages
    isShowCommentPopup.value = true
  })
}

/**
 * 商品评论类型切换
 * @param _commentType
 */
const onhandleChangeCommentType = (_commentType) => {
  commentType.value = _commentType
  commentPageNum.value = 1
  onGetProdCommentList()
}

/**
 * 加载更多评论
 */
const onLoadMoreComment = () => {
  if (commentPageNum.value < commentTotalPage.value) {
    commentPageNum.value += 1
    onGetProdCommentList()
  }
}

/**
 * 返回商品详情
 */
const onBackToDetail = () => {
  uni.redirectTo({
    url: '/pages/detail/detail?spuId=' + spuId
  })
}

let isShowPreview = false
/**
 * 点击评论图片查看大图
 */
const onPreviewCommentImage = (imgs, imgIndex) => {
  const urls = imgs.map(item => {
    item = util.checkFileUrl(item)
    return item
  })
  uni.previewImage({
    current: imgIndex,
    urls,
    success: () => {
      isShowPreview = true
    }
  })
}

</script>

<style lang="scss" scoped>
@import "./comment-page.scss";
@import "@/popup.scss";
</style>
