<template>
  <div style="height: 100%; background-color: #f0f0f0;">
      <ScrollView class="scroll-view" :data="ufoList" :options="scrollOptions" v-if="ufoList.length">
        <CouponItem :item="item" v-for="(item, index) in ufoList" :key ="index"></CouponItem>
      </ScrollView>
      <Empty v-else></Empty>
  </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex';

const {mapState} = createNamespacedHelpers('coupon/yoho');

import CouponItem from '../components/coupon-item';
import Empty from '../components/empty';
import ScrollView from '../components/scroll-view';

export default {
  name: 'UfoCouponListPage',
  computed: {
    ...mapState(['ufoList']),
  },
  data() {
    return {
      scrollOptions: {
        directionLockThreshold: 0,
        bounce: true
      }
    };
  },
  created() {
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      return this.$store.dispatch('coupon/yoho/fetchUfoList', {
        limit: 100,
        page: 1
      });
    }
  },
  components: {
    ScrollView,
    CouponItem,
    Empty
  }
};
</script>

<style lang="scss" scoped>
  .scroll-view {
    height: calc(100% - 90px);
  }
</style>