<template>
  <LayoutApp :show-back="true" :title="title">
    <Scroll 
            ref="scrolllist"
            :scroll-events="['scroll-end','scroll']"
            @scroll-end="fetchList(isMore)"
            v-if="favoriteProductList.list.length"
            class="fav-scroll-bg"
            >
      <ProductList :list="favoriteProductList.list"></ProductList>
    </Scroll>
    <!-- <empty-list v-show="!isShowEmpty" /> -->
    <UfoNoItem :tip="`暂无数据`" v-else></UfoNoItem>
  </LayoutApp>
</template>
<script>
import ProductList from '../../list/components/productList';
import EmptyList from "../../order/order-list/components/empty";
import UfoNoItem from '../../../components/ufo-no-item'
import {Scroll} from 'cube-ui';
import {createNamespacedHelpers} from 'vuex';

const {mapState, mapActions} = createNamespacedHelpers('home/favorite');

export default {
  name: 'list',
  components: {
    ProductList,
    Scroll,
    EmptyList,
    UfoNoItem
  },
  data() {
    return {
      scrollToY: -200,
      scrollToTime: 700,
      scrollToEasing: 'bounce',
      scrollToEasingOptions: [
        {
          text: 'bounce',
          value: 'bounce'
        },
        {
          text: 'swipe',
          value: 'swipe'
        },
        {
          text: 'swipeBounce',
          value: 'swipeBounce'
        }
      ],
      title: '我的收藏',
      scrollOptions: {
        bounce: {
          top: false
        },
        pullUpLoad: true
      },
      fixed: false
    };
  },
  // mounted() {
  //   this.fetchFavoriteList();
  // },
  activated(){
    console.log('favorite====activated')
    let params = {
      isReset: true,
    };
    
    this.fetchFavoriteList({isReset: true});
    // this.scrollToTop();
  },
  methods: {
    ...mapActions(['fetchFavoriteList']),

    scrollToTop() {
      // let height = this.$refs.scroll.scrollHeight
      console.log(this.$refs)
      console.log(this.$refs.scrolllist)
      this.$refs.scroll.scrollTo(
        0,
        this.scrollToY,
        this.scrollToTime,
        ease[this.scrollToEasing]
      )
    },

    async fetchList(isMore) {
      if(this.isMore){
        let params = {
          isReset: false,
        };
        await this.fetchFavoriteList({isReset: false});
      }
      
    },
    // 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(['favoriteProductList','isMore']),
  },
};
</script>

<style scoped>
  .fav-scroll-bg {
    background-color: #f5f5f5;
  }
</style>