<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="" />
        <div class="price" style="font-size: 20px">
          <div>价格:{{ item.price }}￥</div>
          <div>限量:{{ item.geQuantity }}</div>
        </div>
      </div>
      <div style="font-size: 15px">
        <div style="padding: 5px">{{ item.sellingPoint }}</div>
        <div style="padding: 5px">
          {{ item.district }} {{ item.storeAddressDetail }}
        </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","loadMore"],
  data() {
    return {
      list: [],
      pageSize: 5,
      pageNumber: 1,
      state: false, // 状态
      loadMoreStatus: "more", // 加载更多状态
    };
  },
  onReachBottom() {
    console.log("触底了");
  },
  watch: {
    loadMore: {
      handler(val) {
        // this.loadMon()
      },
      deep: true
    },
  },
  mounted() {
    this.getlist();
    // 移除原有的滚动监听
    // window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 移除原有的滚动监听
    // window.removeEventListener('scroll', this.handleScroll);
  },
  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.total == this.list.length) {
        this.loadMoreStatus = "noMore";
        return;
      }
      this.loadMoreStatus = "loading";
      this.pageNumber++;
      this.getlist();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";

.layout {
  height: 100%;
  background: #fff;
  // display: flex;
  // justify-content: space-between;
}
.shop {
  border: 1px solid #eee;
}
.pl_img {
  position: relative;
  height: 180px;
  width: calc(100% - 10px);
  padding: 10px;
  img {
    width: 100%;
    height: 100%;
  }
  .price {
    width: calc(100% - 30px);
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(217, 217, 217, 0.4);
    color: red;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    // margin: 0 10px
    // opacity: 1;
  }
}
</style>
