<template>
  <div class="layout">
    <div
      v-for="item in list"
      :key="item.id"
      class="shop"
      @click="handleClick(item)"
    >
      <div class="pl_img">
        <img :src="imgfun(item.thumbnail)" alt=""  width="100" height="100"/>
      </div>
      <div class="right">
          <div style="font-size:18px">{{ item.goodsName }}
          </div>
          <div>收藏:{{ item.commentNum }}
          </div>
          <div class="proice">价格:￥{{ item.price }}</div>
       
          <div class="flex store-distance">
            <div>
              <template v-for="i in 5">
                <u-icon :name="i <= item.descriptionScore ? 'star-fill' : 'star'" class="proice" size="30"></u-icon>
              </template>
            </div>
          </div>
          <div>地址:{{ item.storeAddressPath }}</div>
      </div>
    </div>
    <uni-load-more :status="loadMoreStatus" :showIcon="true"></uni-load-more>
  </div>
</template>
<script>
import * as API_home from "@/api/home";
export default {
  props: ["res", "isload"],
  data() {
    return {
      list: [],
      pageSize: 5,
      pageNumber: 1,
      state: false, // 状态
      loadMoreStatus: "more", // 加载更多状态
    };
  },
  onReachBottom() {
    console.log("触底了");
  },

  mounted() {
    this.getlist();
    // 移除原有的滚动监听
    // window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 移除原有的滚动监听
    // window.removeEventListener('scroll', this.handleScroll);
  },
  watch: {
    isload(val) {
      console.log(val);
      this.loadMon();
      // this.getlist();
    },
  },
  methods: {
    getlist() {
      const param = {
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
      };
      API_home.getbendi(param).then((res) => {
        this.total = res.data.result.total;

        this.list = res.data.result.records;
        if (res.data.result.records.length < this.pageSize) {
          this.loadMoreStatus = "noMore";
        } else {
          this.loadMoreStatus = "more";
        }
      });
    },
    handleClick(item) {
      uni.navigateTo({
        url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
      });
    },
    handleScroll() {
      const currentHeight = window.scrollY;
      const totalHeight = document.body.scrollHeight;
      if (this.total == this.list.length) {
        this.loadMoreStatus = "noMore";
        return;
      }
      if (window.innerHeight + currentHeight >= totalHeight) {
        this.loadMoreStatus = "loading";

        this.pageSize += 5;
        this.getlist();
      }
    },
    loadMon() {
      if (this.loadMoreStatus === "noMore") return;
      if (this.total == this.list.length) {
        this.loadMoreStatus = "noMore";
        return;
      }
      this.loadMoreStatus = "loading";
      this.pageNumber++;
      const param = {
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
      };
      API_home.getbendi(param).then((res) => {
        const newRecords = res.data.result.records;
        this.list = this.list.concat(newRecords);
        if (newRecords.length < this.pageSize) {
          this.loadMoreStatus = "noMore";
        } else {
          this.loadMoreStatus = "more";
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";

.layout {
  height: 100%;
  background: #fff;
}
.shop {
  border: 1px solid #eee;
  display: flex;
  .pl_img{
    //  width: 100px;
    //  height: 100px;
    padding: 10px;
    // &>img{
    //   width: 100%;
    //   height: 100%;
    // }
  }
  .right{
    // flex: 1;
    padding: 10px;
    font-size: 12px;
 
  }
}
.proice{
  color: $light-color;
}
</style>
