<template>
  <div class="container">
    <NavBar title="我的奖励券" left-arrow @click-left="goBack" />

    <section class="list">
      <PullRefresh v-model="refreshing" @refresh="onRefresh" class="scroll">
        <List :finished="finished" finished-text="没有更多了" @load="loadApproval">
          <TicketListItem v-for="item in list" :sdata="item" />
        </List>
      </PullRefresh>
    </section>
  </div>
</template>

<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, List, PullRefresh } from "vant";
import TicketListItem from '../components/TicketListItem.vue'
import api from "../api";
import { useRouter } from "vue-router";

const list = $ref([
  {
    isUse: false,
    id: '1234777',
    pid: '****************',
    VDate: '2022.10.28'
  },
  {
    isUse: true,
    id: '1234777',
    pid: '****************',
    VDate: '2022.10.28'
  },
])


const refreshing = $ref(true);
const finished = $ref(true);

const onRefresh = () => {
  // 下拉重置参数，重新加载
};

const loadApproval = () => {

}

const router = useRouter();

</script>

<style scoped lang="less">
.list {
  box-sizing: border-box;
  height: calc(100vh - var(--van-nav-bar-height));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

.scroll {
  box-sizing: border-box;
  height: calc(100vh - var(--van-nav-bar-height));
  overflow-y: auto;
}
</style>

<route>
{
  meta: {
    title: '我的奖励券'
  }
}
</route>