<template>
  <LayoutApp :show-back="true" :title="title" class="favorite-wrapper">
    <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 class="empty" :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() {
    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 lang="scss" scoped>
.favorite-wrapper {
  /deep/ .layout-context {
    display: flex;
    flex-direction: column;
  }

  .empty {
    flex: 1;
  }
}

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