<template>
  <tabbar :titles='["全部","未使用","已使用"]' :indicator-color='"#D95554"' @change='tabChange' />
  <scroll-view :scroll-y='true' class='content' @loadmore='onLoadMore'>
    <coupon-item v-for='item in coupons' :item='item' />
  </scroll-view>
</template>

<script lang='ts' setup>

import CouponItem from './components/coupon-item.vue';
import { getCouponList } from '@/api/user';
import { useUserStore } from '@/store';
import { getCompanyId } from '@/utils';
import { CouponBean } from '@/api/user/types';

const store = useUserStore();
const { userInfo } = storeToRefs(store);

const coupons = ref<CouponBean[]>([]);

onLoad(async () => {
  await fetchData(0);
});

const tabChange = (index: number) => {
  fetchData(index);
};

const fetchData = async (status: number) => {
  const { list } = await getCouponList({
    companyId: getCompanyId(),
    memberId: userInfo.value?.id,
    status: status,
    pageNum: 1,
    pageSize: 20
  });
  coupons.value = list;
};

const onLoadMore = () => {
  if(coupons.value.length >= 20) {
    return;
  }
  fetchData(0);
};
</script>

<style lang='scss' scoped>

</style>
