<template>
  <LayoutApp :show-back="true">
    <Scroll :scrollEvents="['scroll']" :options="scrollOptions" @scroll="scroll"
            @pulling-up="onPullingUp">
      <ProductList :list="productList.list"></ProductList>
    </Scroll>
  </LayoutApp>
</template>
<script>
import ProductList from './components/productList';
import {Scroll} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';

const {mapState, mapActions} = createNamespacedHelpers('list');

export default {
  name: 'list',
  components: {
    ProductList,
    Scroll
  },
  data() {
    return {
      scrollOptions: {
        bounce: {
          top: false
        },
        pullUpLoad: true
      },
      fixed: false
    };
  },
  mounted() {
    this.fetchProductList();
  },
  methods: {
    ...mapActions(['fetchProductList']),

    async onPullingUp() {
      await this.fetchProductList();
    },
    scroll({ y }) {
      const height = this.$refs.banner.$el.offsetHeight + this.$refs.header.offsetHeight;

      if (-y >= height) {
        this.fixed = true;
      } else {
        this.fixed = false;
      }
    }
  },
  computed: {
    ...mapState(['productList']),
  },
};
</script>

<style scoped>
</style>