<template>
  <view class="product-pingjia-wrapper">
    <headersVue headerTitle="商品评价" @headerJump="headerJump"></headersVue>
    <view class="product-pingjia-content">
      <view class="product-pingjia-content--top">
        <searchVue
          @search="search"
          class="search-box"
          placeholder="请输入商品ID或者商品信息"
        ></searchVue>
      </view>
    </view>

    <view class="product-pingjia-content--list">
    <template v-if="listReplyData.length > 0">
        <ProductEvaluationItem
        @handleReply="ReplyHandler"
        v-for="(item, index) in listReplyData"
        :index="index"
        :item="item"
        :key="index + '_index_'"
        class="mb-26"
      />
    </template>
      <template v-else>
        <emptyDataVue style="top: initial"/>
      </template>
      <view
        class=""
        v-if="tihsi == 0 && listReplyData.length > 0"
        style="margin: 60rpx 0 30rpx 0; color: #999999; font-size: 26rpx"
      >
        —— 已经到最底部了哦 ——
      </view>
    </view>
  </view>
</template>

<script>
//评价
import headersVue from "../components/headers/headers.vue";
import searchVue from "./components/search/search.vue";
import emptyDataVue from "../../shop/components/emptyData/emptyData.vue";
import ProductEvaluationItem from "./components/productEvaluation/ProductEvaluationItem.vue";

import { getGoodsEvaluate } from "@/commit/product.js";
export default {
  components: {
    headersVue,
    searchVue,
    ProductEvaluationItem,
    emptyDataVue
  },
  data() {
    return {
      tihsi: "",
      listReplyData: [],
      isPopupShow:false,
      keyword: "",
      page: 1,
      limit: 10,
      is_panudn: true,
    };
  },
  async onLoad(options) {
    await this.getGoodsEvaluateData();
  },
  onPullDownRefresh() {
    if(this.isPopupShow) return ;
    uni.showLoading({
      title: "加载中",
    });
    this.page = 1;
    this.is_panudn = true;
    this.listReplyData = [];
    this.getGoodsEvaluateData();
  },
  onReachBottom() {
    if (this.is_panudn == true) {
      this.page++;
      this.getGoodsEvaluateData();
    } else {
      return;
    }
  },
  methods: {
        // 打开弹窗时
disableRefresh() {
  uni.startPullDownRefresh(); // 强制启动刷新
  uni.stopPullDownRefresh();  // 立即停止（制造禁用效果）
  this.isPopupShow = true;
},
// 关闭弹窗时恢复
enableRefresh() {
  this.isPopupShow = false;
  uni.startPullDownRefresh({ success: () => {} }); // 重启原生支持
},
    async search(val) {
      this.keyword = val;
      await this.getGoodsEvaluateData();
    },
    async getGoodsEvaluateData() {
      uni.showLoading({
        title: "加载中",
      });
      try {
        const res = await getGoodsEvaluate({
          page: this.page,
          limit: this.limit,
          keyword: this.keyword,
          is_reply: "",
          nickname: "",
          order_sn: "",
          status: "",
          date: "",
        });
        uni.stopPullDownRefresh();
        if (res.data.status === 200) {
          this.tihsi = res.data.data.list.length || 0;
          console.log(this.tihsi, "this.tihsi");
          if (res.data.data.count > 0) {
            if (this.page == 1) {
              this.listReplyData = res.data.data.list;
            } else {
              this.listReplyData = this.listReplyData.concat(
                res.data.data.list
              );
            }
          } else {
            if (this.page == 1) {
              this.listReplyData = [];
            }
            this.is_panudn = false;
          }
          uni.hideLoading();
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },
    ReplyHandler(item) {
      if(item.type=='submit'){
        this.getGoodsEvaluateData();
      
      }
    },
    headerJump() {
      uni.switchTab({ url: "./index" });
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
}
</style>
<style lang="scss" scoped>
.product-pingjia-wrapper {
  .product-pingjia-content {
    background: #fff;
    position: fixed;
    top: 80rpx;
    width: 100%;
    z-index: 666;
    &--top {
      display: flex;
      .search-box {
        flex: 1;
      }
      .btn-product {
        user-select: none;
        width: 160rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 15rpx;
        image {
          width: 32rpx;
          height: 32rpx;
        }
        .txt {
          font-weight: 400;
          font-size: 26rpx;
          color: #666666;
          word-break: break-all;
        }
      }
    }
  }
  .product-pingjia-content--list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 52rpx);
    // border: 2rpx solid #f00;
    margin: 225rpx 26rpx 26rpx;
    // height: calc(100% - 256rpx);
    // overflow: auto;
  }
}
.mb-26 {
  margin-bottom: 26rpx;
}
</style>
