<template>
  <div class="coupon-page">
    <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,
      }
    };
  },
  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>
.coupon-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .scroll-view {
    flex: 1;
  }
}
</style>