<template>
  <view>
    <view v-if="data.length > 0">
      <view
        class="card-list"
        v-for="(item, index) in (data as any[])"
        :key="index"
      >
        <view class="left">
          <view>昵称：{{ item.nick_name }}</view>
          <view>订单号：{{ item.oid }}</view>
          <view>购买时间：{{ item.add_time.slice(0, 10) }}</view>
        </view>
        <view class="right">
          <view style="color: red"
            >+<text>{{ item.number }}积分</text></view
          >
        </view>
      </view>
      <nut-pagination
        v-model="page.PageNum"
        :total-items="page.ItemCount"
        :items-per-page="page.PageSize"
        @change="pageChange"
      />
    </view>
    <view v-else>
      <nut-empty description="暂无积分明细" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { useLoad, showToast } from "@tarojs/taro";
import { ref } from "vue";
import { getTGIntegralDetail } from "../../../../api/user";

const data = ref([]);

useLoad(() => {
  getData();
});

const page = ref({
  PageNum: 1,
  PageSize: 10,
  ItemCount: 0,
});

const pageChange = (e: number) => {
  page.value.PageNum = e;
  getData();
};

const getData = async () => {
  try {
    const res = await getTGIntegralDetail({
      PageNum: page.value.PageNum,
      PageSize: page.value.PageSize,
    });
    data.value = res.data.data || [];
    page.value.ItemCount = res.data.count;
  } catch (error) {
    showToast({ title: error.msg, icon: "none" });
  }
};
</script>

<style lang="scss">
.card-list {
  margin: 10px 20px;
  background-color: #fff;
  display: flex;
  border-radius: 10px;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
}
.nut-pagination {
  position: absolute;
  margin-top: 10px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
