<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import Paging from '@/components/pc/Paging/index.vue'
import InterestsItem from './InterestsItem.vue'
import { incrementOrderList } from '@/api/user'
const pageSize = ref(5)
const currentPage = ref(1)
const total = ref(0)
const list = ref([])
const maxPage = ref(0)
const showInvoice = ref(false)
const currentI = ref('')
const currentItem = ref('')
watch(()=>currentPage.value, () => {
  getList()
})
onMounted(() => {
  getList()
})
function pageChange(data) {
  currentPage.value = data
}
async function getList() {
  window.scrollTo(0, 0)
  let params = {
    type: '',
    pageNum: currentPage.value,
    pageSize: pageSize.value
  }
  let res = await incrementOrderList(params)
  console.log(res, 'incrementOrderList')
  pageSize.value = res.pageSize
  total.value = res.total || 0
  list.value = res.list
}
</script>

<template>
  <div>
    <div v-if="total">
      <div class="order-item" v-for="(item,i) in list" :key="item.orderSn">
        <InterestsItem :item="item" :i="i" @isOrderInvoice="edit"  />
      </div>
    </div>
    <div class="scene-nothing" v-else>
      <img :src="`${$cdn}images/nothing.png`" alt>
      <div>{{$t('manage.myOrders.norecord')}} 
        <a class="gotoBuy" @click="$router.push({name: 'member'})">{{$t('manage.gotoBuy')}}</a>
      </div>
    </div>
    <div class="paging" v-if="total">
      <Paging @clickHandle="pageChange" @maxPage="data=>maxPage=data" :current="currentPage" :total="total" :equable="pageSize"/>
    </div>
  </div>
</template>

<style lang="less" scoped>
.scene-nothing {
  text-align: center;
  padding: 42px 0 210px 0;
  img {
    padding-bottom: 22px;
    margin: 0 auto;
  }
  div {
    font-size: 16px;
    color: #969696;
  }
}
</style>