<template>
  <LayoutApp :show-back="true" title="二手" class="list-wrapper">
    <LayoutScroll
      ref="scrolllist"
      @pulling-up="fetchSkupList(isMore)"
      v-if="skupList.list.length"
      class="list-scroll-bg"
    >
      <SecondList :list="skupList.list"></SecondList>
    </LayoutScroll>
  </LayoutApp>
</template>

<script>
import SecondList from "./components/second-list";

import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("second/skupList");

export default {
  name: 'UfoSecondListPage',
  components: {
    SecondList
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState(["skupList", "isMore"])
  },
  methods: {
    ...mapActions(["fetchSecondSkupList"]),

    async fetchSkupList(isMore) {
      if (this.isMore) {
        await this.fetchSecondSkupList({ isReset: false });
      }
    }
  },
  activated() {
    this.fetchSecondSkupList({ isReset: true });
  }
};
</script>

<style lang="scss" scoped>
.list-wrapper {
  /deep/ .layout-context {
    display: flex;
    flex-direction: column;
  }

  .empty {
    flex: 1;
  }
}

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