<template>
  <layout-app title="商品列表" class="brand-product-list">
    <scroll-view
      ref="scroll"
      :data="brandProductList"
      :options="scrollOption"
      @pulling-down="onPullingDown">
      <div class="list-wrapper" v-if="brandProductList != null">
        <product-list :list="brandProductList" priceKey="price"/>
      </div>
    </scroll-view>
  </layout-app>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
import ScrollView from 'components/layout/scroll-view';
import ProductList from '../list/components/productList';

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

export default {
  name: 'BrandProductList',
  props: ['productId'],
  components: {
    ProductList,
    ScrollView,
  },
  data() {
    return {
      inLoading: false,
      scrollOption: {
        pullDownRefresh: {
          threshold: 70,
          stop: 90
        },
        observeDOM: false,
        pullUpLoad: false,
      },
    };
  },
  computed: {
    ...mapState(['topLists']),
    brandProductList() {
      return this.topLists[this.$route.params.productId];
    },
  },
  asyncData({store, router}) {
    return store.dispatch(`${STORE_PATH}/fetchBrandTop`, {productId: router.params.productId});
  },
  methods: {
    ...mapActions(['fetchBrandTop']),
    onPullingDown() {
      this.fetchBrandTop({productId: this.productId});
    },
  },
};
</script>

<style lang="scss" scoped>
  .brand-product-list /deep/ .scroll-view {
    background: #f5f5f5;
  }
</style>