<template>
  <view class="scroll-wrap" :disable-scroll="isShow">
    <scroll-view :scroll-y="true" class="scroll-Y" enable-back-to-top @scrolltolower="getData">
      <view v-if="isShow" class="mark" catchtouchmove="true" />
      <slot />
      <more />
      <view class="good">
        <goodsCard :no-share="true" :show-header="false" :goods-list="getGoodsList" />
      </view>
      <uni-load-more :status="noMore ? 'loading' : 'noMore'" />
    </scroll-view>
  </view>
</template>
<script>
import goodsCard from "./goodsCard";
import more from "./more";
import { getGoodsList } from "../api/home.api";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
export default {
  components: {
    more,
    goodsCard,
    uniLoadMore
  },
  props: {
    pageType: Number,
    isShow: Boolean
  },
  data() {
    return {
      getGoodsList: [],
      noMore: true,
      progress: "finished",
      params: {
        pageSize: 10,
        pageNo: 1,
        pageType: this.pageType
      }
    };
  },
  watch: {
    isShow: {
      deep: true,
      immediate: true,
      handler(val) {
        console.log(val, "11");
      }
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      if (!this.noMore || this.progress === "loading") return;
      this.progress = "loading";
      const [data = {}] = await getGoodsList({ ...this.params });
      this.progress = "finished";
      this.params.pageNo++;
      data.goodsList = data.goodsList || [];
      this.noMore = data.hasNext;
      this.getGoodsList = [...this.getGoodsList, ...data.goodsList];
    }
  }
};
</script>
<style lang="scss">
.scroll-wrap {
  height: 100vh;
  .scroll-Y {
    height: 100%;
    .good {
      padding: 0 $uni-spacing-row-base;
    }
  }
}
.mark {
  position: absolute;
  height: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  left: 0%;
  right: 0%;
  font-size: 26rpx;
  text-align: center;
  box-shadow: 2px -3px 100px -5px #ffffff;
  z-index: 99;
}
</style>
